Solution for the QR code component challenge on Frontend Mentor

Hi, good job. Here are a few suggestions to make it even better.

HTML:

• You need a <main>, this is important for accessibility. Change .container from a <div> to a <main>.

• The alt text also needs to say where it leads (frontendmentor.io).

• Footer text needs to be wrapped in a <p>.

CSS:

• It's good practice to include a CSS Reset at the top.

• Font-size must never be in px. Use rem instead.

• Since all of the text is center-aligned, you only need to set text-align: center on the body - remove it elsewhere.

• Remove the fixed width and height on the card. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

• Do add a max-width in rem. This is to prevent it from getting too big on larger screens. Around 20rem should be fine.

• Remove margin: 4rem auto on the card. Instead, use Flexbox to center the card horizontally and vertically. Since Flexbox needs to be set on the parent, put it on the body:

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

Good job. You can use display:flex; align-items:center; justify-content:center; min-height:100vh; in body element to get the card in the middle of the page.

Good code.

Enis...