There are a couple of issues I can spot in this. It looks good overall but not on my phone screen because it's hitting screen edges on all sides. There should always be a little space around components.
Other issues
- this is a blog card that would sit within another web page, probably alongside other blog cards. It would never act as a page title. Therefore it should not be using a h1. A h2 would be more appropriate.
- the link must not wrap around the whole card. This is a serious accessibility problem. The link should be inside the card heading (wrapping the blog title). Then you add a pseudo element off that link that covers the whole card to make the whole thing clickable.
- the sections inside the card are unnecessary. If you need anything at all, use a div as the only sectioning you're adding relates to layout not meaning. Think of sections as always needing a h2 and you're likely to use them more appropriately.
- personally I would consider the author image as meaningful content that should have an alt description.
- remember you don't need to wrap images in the picture element when there is only one image source.
Marked as helpful
@alkersan
Posted
@grace-snow Thank you, Grace. I really appreciate the work you're doing here! I've been following your other reviews, to spot other mistakes I'm making for sure.
@alkersan
Posted
@grace-snow, from your experience, is it still relevant today to account for screen sizes of 320px? Most of the resources I looked at target 375px.