QR-code-component

Hi, you did a good job. Here is some feedback.

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. Wrap the card in a <main>.

• The alt text should be written naturally, without using - between the words. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor website).

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 position and transform properties, they should not be used for a layout like this.

• 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 card is a <div>, which is a block element. Block elements take up the full width by default, so there is no need for width: 100%.

• max-width must be in rem - 20rem is the size I usually recommend for this project.

• Paragraphs have a default value of font-weight: 400, so there is no need to declare it.

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