QR Code Component Page

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 🏷️:

  • Wrap the page's whole main content in the <main> tag.

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

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

  CSS Reset 🔄:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    • 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

  2

  ---

  

  Kaushal21•180

  @KaushalM-2103Posted almost 2 years ago

  @MelvinAguilar Thanks for the tips i will remember and use it in my next challenges

  Happy coding🚀!

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="QR_CODE"> with the main tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  There is no need to give the body a width value. To center .card on the page using flexbox, replace the height in the body with min-height: 100vh.

  For a responsive content replace the width in the img and .qr_code with max-width. Increase the max-width of .qr_code for it to be equivalent to the width of the design. max-width:300px

  Give h1 and p the same font-size of 15px and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Kaushal21•180

  @KaushalM-2103Posted almost 2 years ago

  @Hassiai

  Thank a lot for the details explanation to improve my code

  0