QR-Code-Component-HTML/CSS/FlexBox

Hi Eduardo Alexandre,

Congratulation on completing this challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

• In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor. (not describes the image).

• Adding rel="noopener" orrel="noreferrer"to target="_blank" links. When you link to a page on another site using target=”_blank” attribute , you can expose your site to performance and security issues.

• Add min-height: 100vh instead of height: 100vhto the body that let the body grows taller if the content outgrows the visible page instead.

• width: 320px an explicit width is not a good way to have a responsive layout. Consider using max-width to the card in rem instead.

• Consider using rem for font size .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.

• Remember a css reset on every project. That will do things like set the images to display block and make all browsers display elements the same.

• Really important to keep css specificity as low/flat as possible. It’s not recommended to use the ids to target the DOM elements for styling purposes, better to use classes so that it could be more manageable and reusable. IDs have a much higher specificity than classes and they have many uses in a webpage aside from being a CSS selector. For example as page anchors, fragment identifiers or to link labels to form fields.

Aside these , Good work! Hopefully this feedback helps

Olá Eduardo, tudo bem?

Parabéns por concluir outro desafio, gostei bastante do resultado, o desigin do projeto ficou bem-parecido com o do layout de exemplo. Tenho algumas dicas que julgo que você gostará:

Percebi que o layout estava quebrando muito cedo, fiz algumas alterações para melhorar isso:

@media (max-width: 340px) { body { padding: 0 10px; } #card { width: 100%; } #card img { width: 100%; } }

Adicione este media query no seu código e observe um layout mais reponsivo.

O resto está ótimo! Espero que ajude... 👍

• I would recommend using a reset.css for reseting the css of the browser so you get more control over it. I use RESET CSS 2022 but you may prefer RESET CSS.
• It's not back practice but I like to remove the unit when its 0 so:

margin: 0px;
# becomes
margin: 0;

Nice job, keep it up!