Submitted almost 2 years ago

QR Code Using Flexbox

Lul• 20

@lulam

Preview site View code

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any and all feedback is welcomed. Please let me know if there are ways I can improve my code, or ways to make it more efficient and clear.

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted almost 2 years ago

Hi, Lul! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice work on this one! 🙌

Overall, your solution looks great! One small thing I'd like to suggest is that you instead of adding margin to the sides of the heading and the paragraph inside the .text container, you simply add some padding to the inside of the .text container to add space between its children and its borders. That way, you won't have to bother with adding the same amount of left and right margin to each child in the .text container and you can just specify the amount of spacing you want inside in one place. 😉

Hope that helps! 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

Hendro Triokta Brianto• 90

@ndro

Posted almost 2 years ago

Hi, 👏 congrats for completing the challenge

For the h1 text, I think you should try font-size to 20px or 21px. And for the p, try to remove alpha (transparency).

Everything is nice! 🤘

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

👾Hello Lul, Congratulations on completing this challenge!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

Your solution is great and the code is working, but the html structure can be reduced by removing 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.

Here’s one example to show can be cleaner this HTML structure:

<body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

✌️ I hope this helps you and happy coding!

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