QR Code Solution

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi @4lph4b3t4 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

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

  • Update the path of the styles to:

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

  More information.

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="qr-body"> to improve the accessibility of the website.

  • Even though this challenge is not a full page, you should use semantic tags and a title tag <h1> in your solution. Inside your 'main' element, you can create an '<h1>' that will not be visible visually but is visible to screen-readers. To hide content visually, you can use the sr-only class. You can copy the styles of this class here.

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

  • The Paragraph with class content1, is considered a header, change it to an <h2>

  • Try to use more descriptive names for your classes. I suggest you learn the BEM naming convention standard for CSS class names because increases the readability of front-end code and provides a modular structure. For example, the classes "content1" and "content2" do not say what they are.

  • 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.

  Please don't worry if your suggestions are long, they are just details. In the end, the project is well done 👏. Hope you find those tips helpful! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  0
• 

  Gobinath•65

  @gobinathvaratharajanPosted almost 2 years ago

  You don't need to have width of 100vw You can make the background-color at the top of the root node :root { --clr-white: hsl(0,0,100%) } and reuse as var(--clr-white)

  0