Submitted about 1 year ago

qr-code using flexbox

FinnJ04• 100

@FinnJ04

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

Feedback is very much appreciated!

Community feedback

Rebecca Padgett• 1,760

@bccpadge

Posted about 1 year ago

Hello @FinnJ04. Congratulations on completing this challenge!!!🎉

Your project looks great 🤩 and the only concern I have for you is there is no a heading tag on your website.

HEADING TAGS are very important on a website and helps with SEO and accessibility.

More info📚:

I would stay away from using ids in HTML file and mainly used for JavaScript purposes.

More info📚:

HTML id attribute

HTML 📃:

You can update your HTML structure using HTML5 Semantic Tags

<body>
<main>
 <div class="card">
  <img>
  <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>
</div>
</<main>
<footer class="attribution"></footer>
</body>

Hope this helps you and don't hesitate to reach out to me if you have any questions

Sadeesha Jayaweera• 210

@SadeeshaJayaweera

Posted about 1 year ago

Congratulations completing your first challenge you made it feel great. Happy Coding and wish you all the best in your coding journey @FinnJ04.

I would suggest if you use margin bottom to increase the white area wider bit it will feel like some responsive to the code.

.text2{ font-size: 15px; line-height: 1px; margin-bottom: 20px;

text2 is the white background area i have used as a html class to make changes via CSS. i hope you get the clear idea what i'm saying and hope it would make more responsive the design and more vertically wide.

Have a Great Day.

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