QR Code Component Hub

Oi Carol tudo bem? Bom não sei se é brasileira então vou escrever em inglês mesmo rs You did a quite good job, those warnings are caused for some detais and lack good practices of semantic HTML but it can be easilly fixed by using more landmarks on you HTML, as section,main to evolve your components and the images must be a alt tag alt="" to help the acessiblity of the user, you also can improve your code by using the resolution proposed by the challenge, and align your itens in the center of the screem to get a more close result. See ya!

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

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

• To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
#qr-box img {
    /* height: 95%; */
}

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

Happy coding!

Hey 👋 .... I'm just adding my suggestions over above .... you can add max-width for qr-box instead of width , like below

qr-box{ max-width:225px; width:100%; }

So it will fit responsively for the screen size .... the qr box width wont go out of flow .. You can try adding and see the difference !!!

Hi, Congratulations on solving this challenge!!!🎉🎉🎉🎉 I just went through your code, and have a few suggestions that I feel will help you. For the accessibility issues:

• add an alternative text to the image tag `<img src="images/image-qr-code.png" a>
• use a main tag for the whole content.
• use landmarks like header, section, footer for sections of the code insteand of divs.

I hope this would help😏.