Design comparison
Community feedback
- @Islandstone89Posted 4 months ago
Hello, good job on this challenge.
Here are some suggestions:
HTML:
-
All images must have alt text. Decorative images should have empty alt text:
alt=""
. This 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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website." -
"Improve your" is the card heading, so change it to a
<h2>
.
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 all widths and heights in
px
- it is not recommended to give elements a fixed size, as we want them to be responsive to different screen sizes. -
The
main
doesn't need any styles, so I would movebackground-color
andborder-radius
tosection>
, which holds the card content. -
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
I prefer to use
rem
instead ofem
forfont-size
. The most important thing is to never set the font size in px. -
Since all of the text should be centered, you only need to set
text-align: center
on the body, and remove it elsewhere. The children will inherit the value. -
On the image, add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container. -
To create the space between the image and the edge of the card, set
padding
on all 4 sides of the card:padding: 1rem;
. Hence, you can remove the padding from the individual divs. -
Instead of using complex selectors like
section > div:nth-child(1)
, it is better to add a class to the element - this is more readable, and you're also less likely to run into trouble with specificity.
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