Submitted 7 months ago

QR Code Component

progfish•280

@progfish

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

All feedback is appreciated

Code

Please log in to post a comment

Community feedback

Aakash Verma•9,500

@skyv26

Posted 7 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

Alaa Mekibes•2,090

@alaa-mekibes

Posted 7 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!

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