Design comparison
Solution retrospective
Building this with vanilla HTML and CSS to improve my learning
Community feedback
- @Islandstone89Posted 4 months ago
Hey, good job!
A few tips:
HTML:
-
Never have text in divs alone. "Learning" should be a
<p>
. -
I would consider wrapping the date in a
<time>
element:<p class="publish-date">Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. -
The card heading would likely not be the main title of a webpage, so change it to a
<h2>
. -
Screen readers announce images as "image" by default, so there is no need for words like "image" or "photo" in the alt text. A good alt text for the profile image would be "Headshot of Gary Hooper".
CSS:
-
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. -
I would remove all the properties on
.wrapper
, and add the following on thebody
:
justify-content: center; align-items: center; gap: 2rem; padding: 1rem;
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