Making QR-Code using Flexbox.

Community feedback

• 

  Agnik Bakshi•480

  @Agnik7Posted over 1 year ago

  Hi, Congratulations on completing the challenge!!🎉🎉🎉🎉 You have done a wonderful job coding this QR component. However, I have some suggestions which I feel might be helpful for you.

  • Always make sure to give an alt text in the img tag. An alt specifies to the browser what to show if the browser is unable to display the image. <img id="image" src="images/image-qr-code.png" alt="QR Code Image"/>
  • Replace the h4 tag with h1 tag. You don't need to use the br tag. The width of the card will take care of that.
  • Instead of specifying the width of the div with class name card, specify only the max-width, thereby making the card responsive. You don't need to define height of the card, because the card's height will be automatically taken care of by the text and margins and paddings inside the card.
  • The div with class name flex-container is actually unnecessary. Even if you remove it, only with some minor changes in the css file, you will get the same result.

  If .flex-container is deleted, then add the following lines to the body selector
  
  body{
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  • The div with class name card is also unnecessary. After deleting that div, copy its CSS styling and paste it inside the styling for the main tag and you'll get the same result.

  Hope this comment helps you. Please feel free to correct me, if I have said anything incorrect.

  Have a nice day!!

  Marked as helpful

  1

  ---

  

  Kiara•130

  @kxtaraPosted over 1 year ago

  @Agnik7 Hi! Thank you so much for the feedback! I'm always looking to get some outside perspectives on my projects, and this was really helpful.

  1