QR Code Component

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted about 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  QR iMAGE ALT TEXT 📸:

  • The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

  ---

  • The alt with QR code is not even explaining for what the QR image need to be used.

  ---

  • So update the alt with meaningful text which explains like QR code to frontendmentor.io

  ---

  • Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  02
• 

  Hassia Issah•50,410

  @Hassiai

  Posted about 2 years ago

  Replace <div class="card"> with the main tag to make the content/page accessible. click here for more on web-accessibility and semantic html

  To center .card on the page using flexbox, replace the height in the body with min-height: 100vh.

  To prevent the content from overflowing, there is no need to give .card a height value rather give the same padding value for all the sides. padding: 16px which is 1em/rem

  Give the img a max-width of 100% instead of a fixed width value and a border-radius value, the rest are not needed.

  Give p a font-color of hsl(220, 15%, 55%); for the faded color.

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  01
• 

  Danish Mushtaq•310

  @Danish49

  Posted about 2 years ago

  Replace the div class card with a main tag for accessibility and semantics and pay a little attention towards the font color and size of the design. Rest is nice 👍🏻 congratulations for completing your first challenge keep coding.

  01