Responsive Blog preview card using Flexbox, bem and SCSS
Design comparison
Solution retrospective
- There were no particular difficulties; it was a simple task. 👍
- Next time, I will take a closer look at the design and try to write more comments in my code. 🧐📝
- There were no special challenges; it was a straightforward design card. 🃏✨
- Everything went smoothly, and I was able to implement the design without any issues. 🌟
- In this project, everything was clear to me. ✔️
- However, I'd love to get advice from others on what I could have done better. 🧩👨🏫
- Feedback on my approach and any suggestions for improving my work would be greatly appreciated. 🌟💬
Community feedback
- @Islandstone89Posted 8 months ago
Hi, good job!
Here are some suggestions - I hope it helps :)
HTML:
-
Every webpage needs a
<main>
that wraps all of the content, except for<header>
andfooter>
. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change.blog-preview-card-section
into a<main>
. -
Screen readers recognize images, so you shouldn't have "image" or "photo" in the alt text.
-
Consider wrapping the date in a
<time>
tag:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. -
"HTML & CSS" is the card heading, so wrap it in a
<h2
. Keep the link, as that would be needed on a blog card. -
A more suitable alt text for the profile image would be "Headshot of Gary Hooper".
-
"Greg Hooper" is not a heading, as it doesn't introduce any content. If it were, it would be a
<h3>
, as you cannot go from a<h2>
to a<h4>
. Make it a<p>
.
CSS:
-
Including a CSS Reset at the top is good practice.
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
.blog-preview-card-section
doesn't need any properties, so move them(except fordisplay: flex
which thebody
already has) to thebody
. Changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. Addgap: 2rem
, to create some space between the card and the footer. -
Remove the width on the card, and the height on the top image.
-
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
font-size
must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
It's common to use numbers for
line-height
, so I would switch150%%
to1.5
. Since you use the sameline-height
on several elements, I would add it to thebody
, and remove it elsewhere. -
Similarly, you don't need to put the
font-family
on every element. A more efficient way is to remove them and addfont-family
tobody
. The children will inherit the value. -
Media queries should be in rem, and usually we do the mobile styles as the default.
Marked as helpful1@DalaScriptPosted 8 months ago@Islandstone89 I really appreciate it, thank you very much, I will definitely fix it and upload a new version. <3
1@Islandstone89Posted 7 months ago@NikaDalalishvili Glad to help! You don't need to submit a new solution, though. This solution is linked to your GitHub repository, so any changes you make there will be reflected here.
Marked as helpful1@DalaScriptPosted 7 months ago@Islandstone89 While you are here, I will ask you something. When I change something in my code and then upload it to github, and when I view the page using github page, the changes are reflected very late (and sometimes I think not at all), is this correct or am I doing something wrong (I mean should the changes be reflected late)? Thanks once again.
0@Islandstone89Posted 7 months ago@NikaDalalishvili It usually takes a few minutes to apply the changes. I like to do a hard refresh(Ctrl+F5) untill it shows. But you shouldn't have to wait more than 5 minutes, for me the changes usually appear after 1 or 2 minutes.
0 -
- @wassimboualamPosted 8 months ago
Looks fine, nothing to say really.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord