Frontend Mentor | QR Component using flexbox coding challenge solution

Community feedback

@Islandstone89

Posted 10 months ago

Hello, here is my feedback, hope it helps.

HTML:

The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).
Headings should always be in order, so you never start with a <h3>. Change it into a <h1>.

CSS:

Performance-wise, it's better to link fonts in the <head> of the HTML then using @import.
It's good practice to include a CSS Reset at the top.
Remove width: 100% on main - it is a block element, which means it is 100% wide by default.
height on main should be min-height.
max-width on the card should be in rem. Around 20rem will work fine.
Remove width: 100%, the reason being mentioned above.
Remove the fixed height on the card, you want the content to determine the height of a component.
Font-size must never be in px. Use rem , as you have done on the heading.
text-align: center should be set on the body, as all of the text is centered.
The image should not have a width but max-width: 100%, as well as display: block. This is included in the mentioned CSS Reset