Qr Code Component

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 10 months ago

  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. I would change .card to a <main>, and delete .container, as that div is not needed.

  • 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).

  • .tag should be a <footer>.

  • The footer text needs to be wrapped in a <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top.

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

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

  • Remove any margin on the card, it is not needed as it is centered using Flexbox.

  • Since all text should be centered, you only need to set text-align: center on the body, and remove it elsewhere. The children will inherit the value.

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

  Marked as helpful

  0