Qr code componet using html and css

Community feedback

• Account deleted

  Hey eliabedasilva,

  Your solution looks great and here are few pointers to improve your code.

  On the body element remove:

  • width: 100vw;
  • height: 100vh;

  You can add min-height: 100vh on body which is makes it one line of CSS and puts your qr-code card in the middle of the page

  Use rem or em units when declaring font size in CSS.

  • What are Rem Units? and How to Use them in CSS?
  • CSS values and units

  I hope this helps you

  Marked as helpful

  1
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

  HTML:

  • The alt attribute should not contain underscores or hyphens, it must be human readable and understandable.

  • The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io

  If you want to learn more about the alt attribute, you can read this article.

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

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

  • Use min-height: 100vh instead of height: 100vh. The height property will not work if the content of the page grows beyond the height of the viewport.

  • To avoid security issues you should use the rel="noopener" or rel="noreferrer" attribute when you use the target="_blank" attribute. This will prevent the new page from gain any kind of access to the original page. You can read more about this here.

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

  Happy coding!

  Marked as helpful

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  To center the main on the page using flexbox, replace the height with min-height: 100vh;

  Give the img a max-width of 100%.

  Use relative unit like rem or em as unit for the padding, margin, width and preferably rem for the font-size values. for more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0