QR code viewer using flexbox

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

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

  HTML 🏷️:

  • 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 height in the image is not necessary, you are just elongating the image for no reason. Also, the height of the component is not necessary, the content and padding should be responsible for the height. As a last option, it is better to use min-height instead of height.

  • The width: 100vw property in the .class="container" tag is not necessary. The div tag is a block element and it will take the full width of the page by default.

  • For a responsive component, consider using max-width for the width and adding margin to add some space for the container card and the screen edge on mobile devices.

  • Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

  • You should use the box-sizing: border-box property to make the width and height properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here 📘.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  2
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  HTML 🏷️:

  • This solution generates accessibility error reports due to non-semantic markup, which lack landmark for a webpage

  ---

  • So fix it by replacing the element <div class="container"> the with semantic element <main> in your index.html file to improves accessibility and organization of your page.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>

  ---

  • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

  ---

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  Marked as helpful

  0