Frontend Mentor | QR code coding challenge solution

@Islandstone89

Posted 8 months ago

HTML:

Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change .main into a <main>.
Remove the <header> - it should be used for content that is the same on every page, like a navigation menu and a logo.
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.io).
You don't need to wrap the image in a <div>, so I would remove it.
The paragraph text should all be in one <p>.

CSS:

Performance-wise, it's better to link fonts in the <head> of the HTML than using @import.
It's good practice to include a CSS Reset at the top.
Since all 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. Do the same for font-family.
font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.
Remove the margin on the card.

To center the card horizontally and vertically, use Flexbox on the body:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;

Remove min-height from the card.
The max-width of the card should be in rem - around 20rem works fine.
Use px for border-radius on the image.
You are correct by commenting out the media queries. As the design doesn't change, there is no need for any. When you do need them, they should be in rem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens. Since they should not be used, remove them altogether.
To create the space between the image and the edge of the card, set padding on all 4 sides of the card.
It is common to set display: block on images.

Marked as helpful

QR code