Submitted about 2 years ago

Qr code component html and css

Alejandro• 80

@AlexKR7

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

PhoenixDev22• 16,950

@PhoenixDev22

Posted about 2 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,420

@correlucas

Posted about 2 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

Please log in to post a comment

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