Design comparison
Community feedback
- @Islandstone89Posted 11 months ago
Hey there, well done! Here are my suggestions.
HTML:
-
You need a
<main>
, this is important for accessibility. You can change.card
into a<main>
. -
The images don't need the
srcset
attribute. -
The profile image must have descriptive alt text.
-
.attribution
should be a<footer>
. -
Footer text needs to be wrapped in a
<p>
.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
You don't need media queries on this challenge, as the design stays the same. When you do need them, they should be in rem instead of px. Also, remember that setting fixed widths, like
width: 350px
is rarely a good idea. -
Do add a
max-width
in rem, to prevent the card from getting too wide on larger screens.
Marked as helpful1 -
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