Design comparison
Solution retrospective
Commit more often even though it is a simple challenge.
What challenges did you encounter, and how did you overcome them?Aligning vertically.
What specific areas of your project would you like help with?none
Community feedback
- @Islandstone89Posted 6 months ago
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
id
with aclass
. -
The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
CSS:
-
Including a CSS Reset at the top is good practice.
-
I like to add
1rem
ofpadding
on thebody
, to ensure the card doesn't touch the edges on small screens. -
Remove the
max-width
onbody
. -
Remove the
width
on the card. It is not recommended to set fixed dimensions inpx
. -
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
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. -
Use
px
instead of%
forborder-radius
. Change it to20px
. -
To create the space between the image and the edge of the card, set
padding
on all 4 sides of the card. -
Remove the margin on the image. Add
display: block
and changemax-width
to100%
- the max-width prevents it from overflowing its container.
0 -
- @issei416Posted 6 months ago
The project is clean and almost the same as requested but only with a tiny size difference
Also, there is a color difference in the description which differs from the actual design
YOU DID A GREAT JOB KEEP IT UP!!
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