Qr code componet using html and css

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

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!

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