QR code component solution

Community feedback

• 

  Gaurav•80

  @GauravKumawat2002Posted almost 2 years ago

  Solution is good but there are some issues in it. First, I would suggest you not to use heights at all as it fixes the height of your design & because of that you can run into some overflowing issues at small screen sizes. Pro Tip:- The more content you will add to your design the container of it will adjust the height automatically, so you don't have to manually add height at all.

  Hope this helped you 🙂🙂

  Marked as helpful

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Congratulations on completing your first challenge! You have done a great job and I can see you are on the right track.

  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 class="card"> tag. With this semantic element you can improve the accessibility of your page.

  • Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

  • You must use a level-one heading (h1) even though this is not a full-page challenge.

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

  • Its not recommended to set a defined width for the body element. The body element is the container for the entire webpage, and it should be flexible to allow the content of the page to adapt to different screen sizes and resolutions. Setting a defined width for the body element can make it more difficult to create a responsive design that adapts to different screen sizes and resolutions

  • You should use a CSS reset. A CSS reset is a set of styles that is used to reset the default styles of elements on a webpage. It is generally used to ensure that the styles of a webpage are consistent across different browsers, as different browsers have different default styles for elements.

    Popular CSS resets:

    • Normalize.css
    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

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

  Happy coding!

  Marked as helpful

  1