QR Code using HTML and CSS

Community feedback

• 

  Boris•2,850

  @mkborisPosted 3 months ago

  Great work @Erika-codes, here are a few things to review

  • It's not good practice wrapping every element in div because divs aren't semantic. Use more meaningful semantic elements like main, section, and footer. Wrap a main tag around the .card and a footer for the attribution.
  • Use heading tags h1, h2 for the title instead of wrapping it in a p tag. This makes the structure more accessible.
  • Your image needs a more descriptive alt attribute like so alt="Qr Code to Frontendmentor.io"
  • To properly center the card, add this on your body and remove the all the margin properties from the .card

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
  

  • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Change the width of the .card to max-width and it should be defined in rem.
  • The link to the github repo seems to have an issue, you might want to check that

  Hope this helps, Good luck!

  Marked as helpful

  0