Responsive QR CODE Component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,020

  @MelvinAguilar

  Posted over 2 years ago

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

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

  • In my opinion, the div with the main_container class is unnecessary, because you can place all its styles directly in the body element and have the same result. Besides that, it would make more sense to place the background color in the body element.

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

  • Since the entire component refers to scanning the QR code, the QR code image is considered important content. It is therefore necessary to add an alt attribute to the image to provide additional context. The alt attribute of the QR image should include descriptive text to explain the purpose of the QR image. 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 a single component and not a full page, it is recommended that you use semantic tags and title tags in your solution. You can create an 'h1' inside 'main' that is not displayed visually, but that is visible to screen-readers and provides more information about the content.

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

  The sr-only class is a class that you can add to hide content visually. The styles of this class can be copied here.

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

  • Setting element width with percentages or VW will cause your component to behave weirdly on mobile devices and high-resolution desktops. You can set the max-width at 320px or 20rem instead of using width: 25vw;

  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! 😁

  11

  Marked as helpful
• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 2 years ago

  Hello Vijay, You have done a good work! 😁

  Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • to make it look as close to the design as possible add width: 22rem to container class
  • img element must have an alt attribute, it's very important!
  • add descriptive text in the alt attribute of the images
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of qr image
  • remove main_container div because superfluous
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body instead of height because Flexbox aligns child items to the size of the parent container and with only height the content is cut off when the browser height is less than the content
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  10
• 

  Atul kumar•200

  @AtulKumar0001

  Posted over 2 years ago

  Hey @vij6 The first thing I want to say is that you should learn about some media queries so that you can create responsive pages. And if there is only one heading on your page, rather than using h2, use h1 first, and then you can use other heading levels.

  01