Skip to content
Submitted about 2 years ago

QR Code Component using HTML and SASS

Oliver Cadman•220
@OliverCadman
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

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @OliverCadman 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

    I like this solution for the challenge. Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further:

    With semantic tags:

    <body>
   <main class="container">
      <article class="qr-wrapper">
         . . .
      </article>
   </main>
   /* You can remove the <section> tag*/
<body>
    • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.
    • Add an h1 tag to your solution. The <h1> element is the main heading on a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels; Always start from <h1>, followed by <h2>, and so on up to <h6> (<h1>,<h2>,...,<h6>). The HTML Section Heading elements (Reference)

    Solution:

    <h1>Improve your front-end skills by building projects</h1>

    To improve your solution on mobile devices:

    • Use max-width: 300px to #qr-wrapper selector instead of width, this will make the card container a bit responsive on mobile and set the element's maximum width to 300px.
    • Update the image selector to make responsive images.
    #qr-img {
    width: 100%;
    object-fit: contain;
   border-radius: 20px;
}

    I hope those tips will help you.

    Good job, and happy coding!

    2
    Oliver Cadman•220
    @OliverCadmanPosted about 2 years ago

    @MelvinAguilar Thanks very much Melvin! I will take your advice and make these improvements.

    All the best!

    1
  • Guido Guasch•50
    @guidoghgPosted about 2 years ago

    Hi, just did the same challenge and inspecting your code, found a better way to center elements on sites. Thank you for that, and your solution looks great.

    My code is way different because I try to use only the basic of HTML and CSS. This way, I find that a lot of problems come up and start training that part of coding that is solving problems and coming up with solution on the fly.

    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