Responsive blog preview card using CSS Flex
Design comparison
Solution retrospective
:>
Community feedback
- @bbsmoothdevPosted 11 months ago
I'm going to give you a different perspective on the image alt text. I would say that the first image should have empty alt text since it is purely a decorative image and doesn't add any information that a screen reader user would need to know. So it should be
alt=""
.Whether the image of the person is decorative is up to debate. But if you do think it needs a description then it should probably describe what the person looks like, not just say "avatar". But I think in this case it would be just as reasonable to give it empty alt text as well.
Alt text for images is very important when the image is conveying important information, especially if that information can't be found elsewhere on the page. But when an image is purely decorative then adding alt text to it is actually an annoying hindrance for screen reader users.
1 - @ThiagoBRG60Posted 11 months ago
Hi 👋! Your blog preview card looks good overall, here are some feedback for your solution:
1 - You made sure to use the <main> tag inside of your body, that's really important for more semantic html and defining the main content of your website.
2 - You also made sure to fill the alt="" with the description of the images, that's really good for accessibility and people using screen readers, good job!
3 - Your card is responsive, that's also really good for mobile users.
The only thing I see lacking here is the hover status on the h1 and the cursor pointer property, and also the box shadow should increase when you hover the card, that's all that's left to do, overall you did a great job!
Keep learning and improving! 😊
1@TogrulAbdullayevPosted 11 months ago@ThiagoBRG60 I just added the hover state, cursor pointer style and the box shadow expansion aswell, thanks for the analysis :)
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