Frontend Mentor - QR code component solution

Community feedback

• Account deleted

  Hey Mohamed, congratulations on completing the challenge! You did a great job 😉

  Let me give you some little tips for optimizing your code:

  • remove all properties from main tag
  • add descriptive text in the alt attribute of the images
  • remove all margin from container class
  • use flexbox to the body to center the card. Read here -> flexbox guide
  • after, add min-height: 100vh and margin:0 to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😁 by Travolgi

  Marked as helpful

  1

  ---

  

  Mohamed Khaled•190

  @mohamedKhaled89Posted over 2 years ago

  @travolgi thanks for your help I added descriptive text in the alt attribute of the images. I removed all margin from container class. I removed padding from main tag and added min-height: 100vh and used grid place-items: center; I added margin : 0; to body. I used rem instead of px with font-size and padding.

  1