Submitted almost 3 years ago

Qr code component html and css

Alejandro•80

@AlexKR7

A solution to the QR code component challenge

Preview Code

Solution retrospective

Any advice to better distribute the elements and avoid overflow is appreciated, any feedback is welcome, thanks :)

Code

Please log in to post a comment

Community feedback

PhoenixDev22•16,830
@PhoenixDev22
Posted almost 3 years ago
Hi Alejandro,

Congratulation on completing this frontend mentor challenge. Excellent work! I have some suggestions regarding your solution:
- In my opinion, 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.
- Adding rel="noopener" or rel="noreferrer" totarget="_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.
Overall, your solution looks good. Hopefully this feedback helps.
Marked as helpful
Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
👾Hello Alejandro, congratulations for your new solution!

Your solution is really complete, but you've add some divs that are not really necessary. Try the steps below to have a cleaner code.

You can build this with a simple approach, without using unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

See the structure below:
```
<body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>
```
👋 I hope this helps you and happy coding!
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord