QR code component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

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

  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="main-container">.

  • In this challenge, you should not use the background property to set the image because this image has semantic meaning. Use the CSS background property if the image is not part of the content.

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

  • The <div> tag defines a division or section on a website. It is used to style a container with CSS, set special alignment, or position content. It might be more efficient to use the <h1> tag; the <h1> element is the main heading on a webpage, also, there should only be one <h1> tag per page.

  <h1 class="sub-title">Improve your front-end skills by building projects</h1>
  

  I hope those tips will help you! 👍

  Good job, and happy coding! 😁

  Marked as helpful

  2

  ---

  

  ‪Ayhem Allouache‬‏•30

  @allprotas2019Posted about 2 years ago

  @MelvinAguilar Thanks you Melvin Aguilar , I didn't understand the part of not using background propriety to set image , if you could please explain more. I think i was a bit rush when i used a div instead of an h1 xD , next time i'll be aware of that :) .

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  @allprotas2019 Hi,

  The QR code image is not a decorative image. It is important content because the whole component talks about scanning the QR code. If you use the background-image property, screen-readers will never know that the image exists and it will never be mentioned, making it difficult for people with vision problems to understand the component.

  For that reason, it is better to have an image tag with a good alt text:

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

  You can read more about alternative text here.

  Marked as helpful

  1

  

  ‪Ayhem Allouache‬‏•30

  @allprotas2019Posted about 2 years ago

  @MelvinAguilar i understand now, thank you so much melvin ^^

  1