Responsive QR code component

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • Use the <main> tag to wrap all the main content of the page instead of the <div> tag. With this semantic element you can improve the accessibility of your page.

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

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS 🎨:

  • The color of the paragraph element is unreadable because it is too light compared to its background. For example, change the color to hsl(220deg, 15%, 55%).

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

  • You should use a max-width of 205px or another value to make sure that the component will have a maximum width of 205px on any device.

    section {
         /* display: flex; */ /* rremove all this*/
        /*  flex-direction: column; */
         /* align-items: center; */
         /* justify-content: center; */
        /* margin: 100px 400px; */
        /* padding: 50px; */
        max-width: 205px;
        padding: 10px;
    }
    

  I hope you find it useful! 😄

  Happy coding!

  0

  ---

  

  Makinde mercy•140

  @IleolamiPosted almost 2 years ago

  @MelvinAguilar thanks I will try it

  1