Skip to content
Submitted almost 2 years ago

QR code Solution

Agil•180
@Agil-Saputra
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

Which should I add to make this component better? Should I use framework to make this or just plain html/css?

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    Hello Agil, You have done a good work! 😁

    Some little tips to improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • also you can use article tag instead of a simple div to the container card for improve the Accessibility
    • add descriptive text in the alt attribute of the images
    • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
    • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
    • instead of using px use relative units of measurement like rem -> read here

    Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

    Marked as helpful
    1
  • Muhammad Adam•210
    @Muhammad-adam778Posted almost 2 years ago
    • "Which should I add to make this component better? Should I use framework to make this or just plain html/css?".
    • You don't need to use any framework, this project is very simple, pure css and html will do the required.
    • But there is some points you need to fix to solve the accessibilty problems:
    • You don't need all of these divs.
    • You need to use semantic html elements like <main>, <article> if you want to know how, please check this code below :
    <body>
    <main>
        <article class="container">
            <img src="images/image-qr-code.png" alt=""></div>
            <h1>Improve your front-end skills by buillding Projects</h1>
            <p>Scan the QR code to Visit Frontend mentor and take your Coding to The next level</p>
        </article>
    </main>
  </body>
    • If you want to know about semantic elements check this article Semantic HTML Elements.
    • I hope you find this 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