qr code component

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 the "main" section of a page. Change .container into a <main>.

• The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

• "Improve your" is a heading, not a paragraph. "Scan the QR code" on the other hand, is a paragraph, and must be a <p>, not a <span>.

• .attribution should be a <footer>, and its text must be wrapped in a <p>.

CSS:

• You don't need to put anything on html, only the body. I would move all the properties on .container over on the body, and change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Also, add flex-direction: column and gap: 2rem.

• font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• The card should not have a width, only a max-width of around 20rem, to prevent it from getting too wide on larger screens.

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

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

• As the design doesn't change, there is no need for any media queries. When you do need them, they should be in rem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens.

Looks great on desktop. To design for a mobile layout, you can use Chrome/Safari/Firefox's device emulator to display your page how it would look on different screen sizes.