Qr Code Card Component

Community feedback

• 

  Favour•2,160

  @Nadine-GreenPosted almost 2 years ago

  HEY NOAM!

  CONGRATULATIONS ON COMPLETING YOUR FIRST CHALLENGE!

  your solution is an exact replica of the design and I love it however I noticed that you have a few accessibility issues, I can help you fix some of them,

  Instead of using a div for the <div class="card">, it would be better to use a semantic element like main instead, the same goes for the .attribution, it would be better to use a footer instead of a div, doing do will not only make your page more accessible but you will have fewer errors as well you can learn more about semantic elements here

  IF THIS WAS HELPFUL IN ANY WAY, DON'T HESITATE TO MARK IT AS HELPFUL :)

  HAPPY CODING!

  Marked as helpful

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="card"> with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. There is no need to give the body a width and height value. To center a content on a page, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body. Increase the width of .card

  Hope am helpful

  Well done for completing this challenge, you did a good job . HAPPY CODING

  Marked as helpful

  1
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey there, nice solution! If you want to improve your code, make sure sure to use footer tag for your attribution div.

  You can read more about semantic html here: https://www.w3schools.com/html/html5_semantic_elements.asp

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  0