QR Code Challenge Solution

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 7 months ago

  HTML:

  • Remove the .attribution if you are not going to include it.

  • 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 a page's "main" section. Change .container into a <main>.

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

  • Never have text in divs alone. "Improve your" is a <h2>, and "Scan the QR code" is a <p>. You don't need to wrap either in a <div>, so remove those 2 divs.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • You don't need the .center class so I would remove it. 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 properties on .container.

  • Remove all widths, as well as min-height and max-height on the card.

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

  • I would use rem instead of em on font-size.

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

  • To create the space between the image and the edge of the card, set padding on all 4 sides of the card:padding: 16px;.

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

  Marked as helpful

  0