Responsive blog preview card using CSS Flex

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.

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! 😊