Skip to content
Submitted about 1 year ago

qr-code using flexbox

FinnJ04•100
@FinnJ04
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Feedback is very much appreciated!

Community feedback

  • Rebecca Padgett•1,840
    @bccpadgePosted 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 📃:

    <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

    0
  • Sadeesha Jayaweera•240
    @SadeeshaJayaweeraPosted 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.

    0

Please log in to post a comment

Log in with GitHub

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