@Islandstone89
Posted
Hi, well done!
Here are some suggestions :)
HTML:
-
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(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."
-
I would change the heading to a
<h2>
- a page should only have one<h1>
, reserved for the main heading. As this is a card heading, it would likely not be the main heading on a page with several components.
CSS:
-
Including a CSS Reset at the top is good practice.
-
Remove the
height
on the card. We should never limit the height of elements containing text, as that causes overflow if the text grows taller than the fixed height. -
max-width
on the card should be in rem. Around20rem
will work fine. -
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. -
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. -
Paragraphs have a default value of
font-weight: 400
, so there is no need to declare it. -
It's common practice to change the default
img
value ofdisplay: inline
todisplay: block
.
Marked as helpful
@moaz-shamim
Posted
@Islandstone89 Thank you very much Øystein for your valuable feedback.