QR Code Component

Hey, great job! Your HTML is really good, and I like your use of CSS Custom Properties.

Here are some improvements to make your solution even better:

HTML:

• You should not include words like "image" or "photo" in alt text. Screen readers start announcing images with "image", so your alt text would currently be read like this: "image, qrcode image of the card component". The alt text must also say where it leads(the frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor 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.

• Use the style guide to find the correct font-family, and remember to specify a fallback font:font-family: 'Outfit',sans-serif;

• Remove all widths and heights in px.

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

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

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

• To create the space between the image and the edge of the card, set padding on all 4 sides of the card:padding: 16px;.