QR code component

HTML:

• You don't need to write role="main", as that is implicit when using the <main> element.

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

CSS:

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

• Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

• Remove width and height on body. The body is a block element, which means it fills the available width by default. And while you do need to give body a height to be able to center the card vertically(by default, the body is only as tall as its content), there is a better way than using 100%.

• You should not use position and transform to center the card, so remove those properties.

• To center the card horizontally and vertically, use Flexbox on the body:

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

The reason we're using min-height instead of height is because this way, the content will not get cut off if it grows beneath the viewport.

• Remove the width on the card.

• Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

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

• On the image, add display: block and change width to max-width: 100% - the max-width prevents it from overflowing its container.

Hi, Congratulations on your first project. Code looks structured and readable. A suggestion to consider for future projects, with regards to determining the size of the container, if you are using windows, under Windows Accessories use Paint [on the preview provided in the design] and set the gridlines option, that will enable you to determine the pixel width and height. Keep the momentum going and enjoy the learning process.

Nice work. Code is easily well-structured, readable and reusable. Can increase the width and height of the qr__container. Layout looks good on a range of screen sizes.