@Islandstone89
Posted
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 helpful