QR Code Component using basic HTML and CSS

Community feedback

• 

  Abdul Khaliq 🚀•72,360

  @0xabdulkhaliq

  Posted almost 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!

  01

  Marked as helpful
• 

  Josh Javier•930

  @joshjavier

  Posted almost 2 years ago

  Hello Rain 👋

  First of all, congrats on submitting your first solution! You're off to a good start; the layout looks good on both mobile and desktop, and your code is well-structured and readable.

  Some ideas on what you could improve:

  • Use semantic HTML tags to improve accessibility and help with SEO. For example, you can put the container div inside a <main> tag and the attribution div inside a <footer> tag.

  • I also recommend adding an H1 because it tells search engines and screen readers what your page is about. In this case, the H1 can be <h1>QR code component</h1>. You can use a .visually-hidden utility class to add the H1 without showing it visually so your code remains accessible without deviating from the design.

  Hope it helps, happy coding!

  01

  Marked as helpful