QR code component using HTML & CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

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

  HTML 🏷️:

  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels (<h2>, <h3>, etc.) helps ensure that your document has a clear and consistent hierarchy. Source 📘

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

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

  • Remove the width of the .qr-continer element, let it occupy 100% of the screen width. When you set a fixed width, it will only work well when the viewport (1440 and 375px) has the same width, this means that the website will not adapt to the different screen sizes, and will look bad when it is accessed on a smaller device.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  2
• 

  Francisco Carrillo•5,540

  @frank-itachiPosted over 1 year ago

  Hello there 👋. You did a good job!

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

  HTML 📄:

  • Wrap the page's whole main content in the <main> tag.
  • If your code has different sections that have a specific like a , , sections or footer, it’s a good practice to enclose those parts with HTML5 landmarks. For example, you could use a <footer> tag to wrap a footer section.
  • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more headings in your html code.

  I hope you find it useful! 😁😁 Above all, the solution you submitted is great👌!

  Happy <coding /> 😎!

  Marked as helpful

  2
• 

  Rajeev kumar•280

  @beRajeevKumarPosted over 1 year ago

  Congratulations Bro, you complete your first challenge.My advise to your is that You must think about solve the project and learn as much as possible form the project not think about just finish the project.

  1