QR code component with CSS and HTML

Hi PEmanuele,

Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:

• You should use <main> for the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

• In my opinion, the image is an important content. The alternate text is needed on this image. The alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor not describes the image.

• Never use <div> and <span>alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together. By adding semantic tags to your document, you provide additional information about the document, which aids in communication.

• You can use <p> for class="description".

• There are some unnecessary div’s need to be removed.

• Adding max-width on the body tag to prevent layout from stretching. If you try to zoom out on your browser , you'll see that the layout stretches, adding max-width will prevent that. Personally, I don’t restrict the width or height of the body element. If I need to restrict the width I use a container div with a max-width on it.

• For future use: Best practice is to use the simplest selector possible while maintaining the minimum required specificity. As a rule, if a selector will work without it being nested then do not nest it. That is to say, how quickly a browser can match the selectors your write in CSS up with the nodes it finds in the DOM. As in this challenge, there is only one element of each kind, you wouldn't face any issues , but you should maintain good practices from the beginning.

• Consider using rem and em units as they are flexible, specially for font size better to use rem. If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices

• line-height: 19px Use a unitless line-height value to Avoid unexpected results. You can read more in mdn

Hopefully this feedback helps.

Hello everything is fine?

Congratulations on the challenge, you did a great job.

I'll explain why the way you used to specify where the image is, wasn't working. Basically it's because you went from folder to folder looking for an image and in the case of the first folder, depending on how you committed it to github, it didn't exist and the error you commented on ends up.

The second way was from the images folder, which in this case is on your github, and then you put the image, that is, github managed to find the file.

Hope it helps... 👍