** QR Code Component **

HTML:

• The <main> element holds all of the content on a page, except for the header and the footer. The card would likely not be the only component on a page, hence I would wrap it in a <div class="card">.

• Replace the IDs with classes. This article explains the use cases for the id attribute.

• "Improve your" is a heading, not a paragraph. Headings must always be in order, so you would never start with a <h3>. A <h1> is reserved for the main heading on a page, and should not be repeated. Given this is a card heading, it would likely not be the main heading of a page. Hence, I would make it a <h2>.

CSS:

• I would have all of the CSS in one file, usually called style.css.

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

• I like to add 1rem of padding on the body, to ensure the card doesn't touch the edges on small screens.

• On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

• Remove all widths and heights in px . We rarely want to set fixed sizes, as we want our elements to grow and shrink according to the viewport.

• We do want to limit the width of the card, so it doesn't get too wide on larger screens. Give the card a max-width of around 20rem to solve this issue.

• 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 max-width: 100% - the max-width prevents it from overflowing its container.