QR code-component

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 10 months ago

  HTML:

  • Use the appropriate semantic HTML landmarks whenever needed. Instead of <div role="main">, use <main>.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 the first <div> into a <main>, and use a class instead of an ID.

  • The image has meaning, so it must have proper alt text. Write something short and descriptive, without including words like "image" or "photo". Screen readers start announcing images with "image", so an alt text of "image of qr code" would be read like this: "image, image of qr code". The alt text must also say where it leads(frontendmentor.io).

  • Remove the <span>, it is not needed.

  CSS:

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

  • font-family should be placed on the body.

  • You don't need to set text-decoration: none, and if you did it should be set on links, not all elements.

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

  • On body, remove grid-template-rows, and change height to min-height.

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

  • Remove width and margin-top 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.

  • Remove width: 100% on .card-content_info, it is not needed. A <div> is a block element, meaning it takes up 100% of its parent width by default.

  Marked as helpful

  0

  ---

  

  Nantue Polchevski•170

  @NantuePosted 10 months ago

  hello @Islandstone89, thank for the feedback, It really helped me a lot.

  1