QR code component using HTML and CSS with Flexbox

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Carlos, great job! Congratulations on completing the challenge.

  I had a look at your solution and I have a few suggestions for you:

  • add main tag and wrap the card for Accessibility
  • try to remove all margin from container class and use flexbox to the body for center the card. Read here -> flex guide
  • also set heigth of body to 100vh because Flexbox aligns to the size of the parent container.

  Also avoid assigning specific properties to the div element, rather create a class.

  Overall you did well! Hope this help and happy coding!

  Marked as helpful

  0

  ---

  

  Carlos Ortiz•50

  @Karlof99Posted almost 3 years ago

  @denielden Hi Daniel, Thank you very much for your comments. I find them very helpful. I'll modify my code with these reccomendations and others that have been seen to me. Regards

  1
• 

  sanket kumar•300

  @sanketcharanpahadiPosted almost 3 years ago

  1. Always wrap your main content inside the <main></main> tag like this

  <main><img src="image-qr-code.png" alt="QR code" width="250" height="250"> <p class="p1"><b>Improve your front-end <br> skills by building projects</b></p> <p class="p2">Scan the QR code to visit Frontend <br> Mentor and take your coding skills to <br> the next level</p> </main>

  2.don't use inline styles as you have done in the <img> element 3. use relative widths and max-width property. 4. set the font family inside the body element .

  Marked as helpful

  0

  ---

  

  Carlos Ortiz•50

  @Karlof99Posted almost 3 years ago

  @sanketcharanpahadi Hi Sanket, Thank you very much for your comments. I'll modify my code with these reccomendations and others that have been seen to me. I find them very helpful. Regards

  1