Qr-code component using HTML and CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

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

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

  • Use the <main> tag to wrap all the main content in your solution instead of using <div class="hero"> to improve the accessibility of the website.
  • In my opinion, the container with the "container" and "hero-description" classes is unnecessary.

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. You can read more about this problem here.

  • The alternative text must not contain hyphens, underscores, or the words "image" or "photo", it must be human readable.

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

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

  • Always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). Swap the <h3> tag with <h2>.

  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

  2

  ---

  

  Tawakalt•120

  @LahitanPosted almost 2 years ago

  @MelvinAguilar

  Thank you I would make necessary adjustments 🙂

  1