Skip to content
Submitted over 2 years ago

A Simple QR Code Component Using only HTML and CSS

Purnima Kumar•390
@purnimakumarr
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

Hey! Started my day by building this simple QR Code Component. It took me 12 minutes to make this, which I think is not bad. Feedback is always welcome. Thank you.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi, Purnima Kumar! 👋

    Congratulations on finishing this challenge! 🎉

    You have done the challenge really fast! But, I would not recommend focusing too much on time especially when you just get started. I recommend focusing on the code quality instead.

    Some more suggestions.

    • I suggest putting the attribution outside the main element. It is not the main content of the site. So, I would recommend wrapping the attribution with footer tag inside (or swapping the div with footer).
    <body>
  <main>
    page content goes here...
  </main>
  <footer class="attribution">
    attribution links goes here...
  </footer>
</body>
    • I recommend improving the alternative text of the QR code by telling the users about the QR code. In this case, it will navigate the user to https://www.frontendmentor.io/ so I recommend improving the alternative text to "QR code to frontendmentor.io".
    • Lastly, put all the CSS on its own file. It is best to separate the HTML and the CSS whenever possible. It may not be a big deal in this case. But, in large projects or multiple-page websites, external CSS can be reused on the entire website. Also, it makes styling easier to maintain because you only need to change the CSS file and then all pages would reflect the change.

    Hope this helps. 🙂

    Marked as helpful
    1
    Purnima Kumar•390
    @purnimakumarrPosted over 2 years ago

    Hey Vanza,

    Totally agree on the attributtion thing & thanks for the alternate text suggestion. Making those changes right after writing this reply. As for the separate stylesheet, I know it's better to put the CSS in a separate file but as it was a very small project & readability was not an issue, I left it in the HTML file only.

    Thanks for the feedback.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @purnimakumarr I took a look at the updated solution. The alternative text for the QR code is not quite right. "QR Code by Frontend Mentor" is telling the users that the image is provided by Frontend Mentor.

    The alternative text should tell what the image is about, not where the image is coming from.

    For the CSS, it's good that you are aware that separating it is a good practice. 🙂

    Marked as helpful
    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