QR code component using flexbox with RWD

Hey, good job!

After looking at your code, these are my suggestions - I hope you find them helpful.

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 a page's "main" section. Change .container to a <main>, and have the <h1> inside of the main.

CSS:

• Including a CSS Reset at the top is good practice.

• I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

• Remove the styles on .container, it doesn't need any styles.

• Remove the margin on the card.

• Instead, add align-items: center on the body. I would also add gap: 1rem so the main and footer don't squeeze against each other.

• Remove the width and height in px on the card. We rarely want to give a component a fixed size, as we want it to grow and shrink according to the screen size.

• We do want to limit the width of the card, so it doesn't get too wide on larger screens. Give the card a max-width of around 20rem to solve this issue.

• 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.

• letter-spacing must also never be in px. You can use em, where 1em equals the element's font size.

• You don't have to declare those font weights - headings have font-weight: 700 as the default, and paragraphs have font-weight: 400.

• On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container. Without this, an image would overflow if its intrinsic size is wider than the container. max-width: 100% makes the image shrink to fit inside its container.

Nice done!