QR code component using HTML, CSS and Flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  Alt text 📷:

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

    If you want to learn more about the alt attribute, you can read this article. 📘.

  CSS 🎨:

  • Setting the font-size to 62.5% can attract compatibility issues with third-party libraries or plugins. You can read more about this with this two lectures:

  1. The Surprising Truth About Pixels and Accessibility - The 62.5% trick
  2. A comment on the 62.5% trick

  Credit to grace-snow and vanzasetia for pointing this out.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  2

  ---

  

  Rostyslav Nazarenko•560

  @rostyslav-nazarenkoPosted almost 2 years ago

  @MelvinAguilar Hi! Thank you so much for the feedback and for providing resources!

  Already implemented your suggestions 😊

  The article about alt attribute really helped me. I never thought about it that way.

  I'm not going to set font-size: 62.5% from now and will correct the same in the other challenge. I thought that it was a great trick to use. Doing the math without calculator in base of 16 is doable if only using units divided by 4. And here the body text 15px and because of that decided to use font-size: 62.5%

  Thanks for your help. 😁 Have a great day!

  0