@Islandstone89
Posted
Hi Anthony, good job!
Here are some suggestions :)
HTML:
-
Every webpage needs a
<main>
that wraps all of the content, except for<header>
andfooter>
. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap the card in a<main>
. -
Replace
<span>
with<p>
. -
Consider using the
<time>
element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. -
As this is a blog card, the heading needs a link inside.
-
The heading should be a
<h2>
, as the card would likely wouldn't be the only component on a page.
CSS:
-
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
Add
width: fit-content
on "Learning", so it doesn't stretch across the card. -
Except for the author image, remove all widths and heights in
px
. -
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
It is common practice to add
display: block
andmax-width: 100%
on images. The max-width prevents it from flowing out of its container. -
On
.author__section
, removejustify-content: space-between
, and addgap: 1rem
.
Marked as helpful
@A-Young-Git
Posted
Thank you! Super helpful feedback. Will make the changes shortly. Appreciate it. @Islandstone89