Design comparison
Community feedback
- @Islandstone89Posted 7 months ago
Hi, good job!
A few suggestions:
HTML:
-
Consider using the
<time>
element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time>/p>
. -
The heading would have a link as this is a blog card.
-
Don't use "picture" or "image" in the alt text. A better description would be something like "Headshot of Gary Hooper".
-
Footer text must be wrapped in 2
<p>
elements.
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. -
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. -
Media queries should be in
rem
orem
, and we usually style for mobile as the default.
Marked as helpful0 -
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