Design comparison
Community feedback
- @Islandstone89Posted 3 months ago
Hey, wonderful job!
Some of the things I like about your submission:
- Custom Properties
- CSS Reset
- Font size in rem instead of
px
(this is an essential accessibility requirement!) - No fixed widths or heights in
px
- Max-width on the card
Most of these are usually missing from submissions, so again, well done!
A few tips:
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. Replace<article>
with<main>
. -
The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
-
As the card heading would likely not be the main heading on a page, I would change it to a
<h2>
.
CSS:
-
I like to add
1rem
ofpadding
on thebody
, to ensure the card doesn't touch the edges on small screens. -
You don't need to declare
font-weight: 400
on thebody
, as that is the default value. -
You also don't need
min-height
on the image wrapper. -
According to MDN,
will-change
"is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems."
Keep up the great work :)
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