HTML5 - CSS - Flexbox

Hi there, here are a few tips:

HTML:

• You need a <main> - change the .container from a div to a main.

• The alt text should also say where the QR code leads to, which in this instance is "frontendmentor.io".

CSS:

• It's better for performance to link the fonts in the head of the HTML, not in the CSS.

• Font-size should be in rem instead of px.

• Max-width on the container should also be in rem, not px.

• The container is centered vertically by using Flexbox and align-items: center on the body, and centered horizontally by using margin: 0 auto on the container itself. I would suggest letting Flexbox do both; remove the margin: 0 auto, and add justify-content: center on the body :)

• You can also put text-align: center on the body since all text should be center-aligned.

• You shouldn't have a separate stylesheet for the CSS Reset, or for the media queries. For a good CSS Reset, check out this one by Andy Bell

Hope this helps!

@JJunior-Dev congrats on completing this challenge. Here's a great article on flex property https://webdesign.tutsplus.com/a-comprehensive-guide-to-flexbox-alignment--cms-30183t. it takes time to get comfortable with flex properties and keep practicing.