QR Code Component Challenge in HTML and CSS

Community feedback

• 

  Dusan Brankov•860

  @dusan-b

  Posted over 2 years ago

  Hi Jennifer,

  I just had a look at your code, most of it looks pretty good. There are just a few changes I would consider.

  To center the card in both directions, a better way is to use Grid or Flexbox instead of position and transform:

  body {
    display: grid;
    place-content: center;
    min-height: 100vh;
  }
  

  For .card-container it's better to use max-width instead of width as it prevents horizontal scrolling on small screens.

  As far as accessibility is concerned, alternative texts for images should have a clear message. Instead of "QR code", it would be better to have "Scan this QR code to improve your front-end skills".

  Furhtermore, you should avoid skipping heading tags. The most important heading should always be <h1>, the second <h2> etc.

  It's also important to use semantic section elements to allow browsers, assistive software and search engines to understand the structure of your web page. One of the most common ones is the <main> element that contains the main content of a page. Therefore, every web page needs to have a single <main> element. In your case, the card component needs to be wrapped inside <main>. You can easily do this by replacing the parent div tag with main.

  I hope I could help. Keep up the good work, and happy coding. :)

  10

  Marked as helpful