Design comparison
Community feedback
- @Islandstone89Posted 7 months ago
Hi Mahmoud, well done!
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>
. -
Remove the
<span>
elements, they are not needed. Images shouldn't be wrapped in a<span>
, and "Learning" "Published" and "Greg Hooper" are all<p>
elements. -
I would use the
<time>
element for the date:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. -
Change the alt text on the profile image to "Headshot of Gary Hooper".
-
.attribution
should be a<footer>
, and you should use<p>
for the text inside.
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. -
On the
body
, changeheight
tomin-height
- this way, the content will not get cut off if it grows beneath the viewport. Remove the width, as the body takes up the full width of the viewport by default. -
Remove the
width
on the card - to make components responsive, we should rarely set fixed sizes inpx
. -
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
font-size
on the footer must also be inrem
. -
On the top image, add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container.
0 -
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