Submitted about 2 years ago

QR code component using Flexbox

B33th0v3n• 70

@B33th0v3n960

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

Community feedback

PhoenixDev22• 16,950

@PhoenixDev22

Posted about 2 years ago

Hi B33th0v3n,

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.

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

Hopefully this feedback helps.

Marked as helpful

Lucas 👾• 104,420

@correlucas

Posted about 2 years ago

👾Hello @B33th0v3n960, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

Great great great start, nice solution!

Something can be a good exercise for you is to reduce your code by removing unnecessary blocks/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.

Here’s a minimal html structure for this challenge:

<body><div><img><h1></h1><p></p></div></body>

Add a margin to avoid the container touching the screen edges while scaling, margin: 20px

👋 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