Skip to content
Submitted about 2 years ago

QR Code Component - First Project

Corey•90
@cjay44
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

My first FEM project - YAY! Any feedback is welcome! This was my first time using variables, I found it really helpful! I also need to become more aware of Accessibility and keeping things mobile responsive

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hi Corey, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

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

    Something I've noticed in your code is that on many occasions you've added some <div> to wrap contents that don't really need to be inside of a div block. Note that for this challenge all you need is a single block to hold all the content, which can be <div> or <main> if you want to use a semantic tag to wrap the content, the cleanest structure for this challenge is made by a block of content with div/main and all the content inside of it (img, h1 and p) without need of any other div or something. See the structure below:

    <body>
<main>
<img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor" >
 <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!

    Marked as helpful
    1
    Corey•90
    @cjay44Posted about 2 years ago

    @correlucas Thank you! I appreciate the feedback - I will try to keep this in mind when doing my next challenge! 😁

    1
  • Kawsar Ahmed Fahad•2,660
    @faha1999Posted about 2 years ago

    Hello, Corey Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

    • You might want to use semantic tags like the <main> to wrap your code, instead of div. like
    <main>
      <div class="card"></div>
      <div class="attribution"></div>
</main>

    You could also make use of <section> and/or <article> semantic tags. This would help improve accessibility.

    • do not leaver srcset value empty. It's bad practice.

      • use srcset like this
    <img
  srcset="mage-qr-code.png, mage-qr-code.png 1.5x, mage-qr-code.png 2x"
  src="images/image-qr-code.png"
  alt="qr code" />
      • add alt="QR code" attribute in img . This would help improve accessibility.

    I hope it will work. Happy coding.

    Marked as helpful
    0
    Corey•90
    @cjay44Posted about 2 years ago

    @faha1999 Thank you, for the tips! I will be sure to incorporate these suggestions in my next challenge! 😁

    0
  • Joseph Haddad•220
    @joehaddad1000Posted about 2 years ago

    Hello @cjay44, Your webpage is great and well done 👍

    You could add the <main> tag for accessibility:

    <main>
<div class="card">
  ......
</div>
</main>

    And attribution in the <footer> tag:

    <footer>
<div class="attribution" style="bottom:0px; position:absolute">
...
</div>
</footer>

    And with the <img> tag, you can remove the srcset. That's it, hope you're having a great time always!

    Marked as helpful
    0
    Corey•90
    @cjay44Posted about 2 years ago

    @joehaddad1000 Thank you for the advice, I honestly just completely forgot about semantics.

    I appreciate the comment! 😁

    1

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