@Islandstone89
Posted
HTML:
-
Do not use words like "image" or "photo" in the alt text. Screen readers start announcing images with "image", so an alt text of "image of a qr code" would be read like this: "image, image of a qr code". The alt text must also say where it leads(frontendmentor.io).
-
Remove the
<article>
, it is not needed. -
Never have text in divs alone. "Improve your" is a heading, and "Scan the QR code" is a paragraph. And you don't need to wrap any of them in a
<div>
.
CSS:
-
It's good practice to include a CSS Reset at the top.
-
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. As for the vertical centering, you are correct: while thebody
takes up the full viewport width, its height is determined by the content. This can seem confusing, especially since the background color applied to thebody
fills the full viewport. It's one of those things you learn along the way :) -
gap
on the card doesn't do anything, as you haven't declareddisplay: flex
. -
Change
width
tomax-width: 20rem
. -
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. -
Paragraphs have a default value of
font-weight: 400
, so there is no need to declare it. -
On the image, remove the margin, and change
max-width
to100%
. -
To create the space between the image and the edge of the card, set
padding
on all 4 sides of the card:padding: 1rem;
.
Marked as helpful