QR code display Challenge solution

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @MaxiJRom 👋, good job completing this challenge! 🎉

  I have some suggestions you might consider to improve your code:

  • In this challenge, the picture tag is not needed, since the image does not need to change depending on the viewport. This is necessary with the "Product preview card component" solution because the platform provides two images, one for mobile and one for desktop. You can directly use the image tag in this solution.

  • Use max-width: 305px to .qr-card selector instead of width, this will make the container card a bit responsive on mobile and set the element's maximum width to 305px.

  • Use margin: 0.938rem or margin: 15px in the .qr-card selector to add some space for the container card and the screen edge on mobile devices.

  • To make alternative texts more worthwhile, add descriptive text to the alt attribute of the QR image to explain what the QR image does. Upon scanning the QR code, you will be redirected to the frontendmentor.io website, so an example of alternative text would be "QR code to frontendmentor.io". You can read more about alternative text here.

  • The <h1> element is the main heading on a web page, there should only be one <h1> tag per page. You can create a <h1> and give it a suitable text:

  <h1 class="sr-only">QR Card Component</h1>
  

  The sr-only class is a class that you can add to hide content visually but is only visible to screen-readers.

  More information here.

  Above all, the project is done well👏. I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  1
• 

  Maximiliano•200

  @MaxiJRomPosted about 2 years ago

  What do you think about my code?

  0