Frontend Mentor | QR code component coding challenge solution

@Islandstone89

Posted 10 months ago

Hi, here is some feedback.

HTML:

Remove the ````. Change it to a <h1>.
The image needs alt text. It should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

CSS:

Performance-wise, it's better to link fonts in the <head> of the HTML, instead of importing it in CSS.
It's good practice to include a CSS Reset at the top. I can recommend the one that Andy Bell has.
You don't have to write body in front of every selector.
You can remove flex-direction: row as that's already the default. Remember, though, if you had more than one flex item (the body's only direct child is .container), the items would be side by side, which you may not want. So it's not uncommon to see people declare flex-direction: column. In this example, since there's only one direct child, it won't make any difference.
max-width on the card should be in rem, not %. Around 20rem should be fine.
Remove height on the image, and change width to max-width. Also, add display: block.
box-sizing: border-box should be on all elements:

*,
*::before,
*::after {
 box-sizing: border-box;
}

This is the first line in the mentioned CSS Reset.

All text should be centered, so it's more efficient to put text-align: center on the body.
Media queries should be in rem. However, you don't need one for this project.

Hope this is helpful. Good luck!

Marked as helpful

@MrDevM

Posted 10 months ago

@Islandstone89 Thanks so much very Use full feedback

QR code component