Skip to content
Submitted 3 months ago

QR Code Component

progfish•280
@progfish
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

What specific areas of your project would you like help with?

All feedback is appreciated

Community feedback

  • Aakash Verma•9,480
    @skyv26Posted 3 months ago

    Hi @progfish,

    Great effort on your project! 🎉 I have a small suggestion to enhance the semantic structure and simplicity of your code:

    • Simplify the Section Usage: The <section> tag is generally used for grouping related content that's meaningful on its own, often accompanied by a heading. In your case, the content can be wrapped in a simple <div> without losing meaning or structure. Here's an updated example:
    <body>
  <main>
    <img src="./images/image-qr-code.png" alt="QR Code">
    <div>
      <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>
</body>

    Why this works better?

    • Reduces unnecessary use of semantic tags where they're not required.
    • Keeps your code concise and easier to read.

    You're on the right track, and I love how clean your HTML structure already is! Keep up the great work! 🚀

    Marked as helpful
    1
    progfish•280
    @progfishPosted 3 months ago

    @skyv26 thanks for your feedback! I usually use divs so I am kinda new to the section tag. I will keep in mind your suggestion going forward. Thanks again!

    1
  • Alaa Mekibes•1,560
    @alaa-mekibesPosted 3 months ago

    Hi @progfish, you did it good job 🎉 just a few points to fix:

    • Update Your README File

    Start by using the provided README template included in the starter file. Customize it to enhance clarity and professionalism.

    • Use css variables to improved maintainability like this:
    :root {
    --bg-color: hsl(210, 46%, 95%);
    /* Add your other colors here */
}

body {
    background-color: var(--bg-color);
    /* Other properties */
}
    • Separate your CSS code: Move your CSS code into a separate file (e.g., style.css) and link it to your HTML file using:
    <link rel="stylesheet" href="YOUR PATH HERE">

    Keep up the incredible work, @progfish, your dedication is inspiring!

    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