QR code component

HTML:

• I would change the class on main to .container, and replace the <section> with <div class="card">.

• You don't need a <figure>, that is used when yo uwant a <figcaption> that says something about the image.

• Do not use words like "image" in the alt text - a screen reader would read it like this:"image, QR code scanner image". The alt text must also say where it leads(frontendmentor website). A good alt text would be "QR code leading to the Frontend Mentor website."

• Remove the <header> - it is used for content that repeats across several pages, for example, a section at the top with a logo and navigation.

• <h1> is reserved for the main heading on a page. As a card would be one of several components, its heading would not be the main heading. There can be only one <h1>, so change it to a <h2>.

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 display: block on the card, as that is its default value.

• Remove the margin on the card.

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

• Remove all widths and heights.

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

• Set font-family on the body and remove it elsewhere - the children will inherit the font.

• Remember to specify a fallback font:font-family: 'Outfit', sans-serif;.

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