Skip to content
Submitted over 2 years ago

QR Code Component

Prabu•150
@reallyUndefined
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 everyone, had fun doing this challenge.

Please do give feedbacks, feedbacks are definitely welcome.

Community feedback

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

    👾Hello Prabu, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

    I saw your live site and code and I can say you this is an amazing start, the solution is working well, the design is perfect and the container is fully responsive. WELL DONE!

    To improve it even more you can clean the html and css removing divs, remember that all you need is a single <main> or <div> to keep all the content inside...The cleanest structure is the div and only the image, heading and paragraph.

    To clean the css remove all class and select all elements with the direct selector in the css sheet, for example (main, img, h1 and p).

    Doing that you reduce at least 15% of your code total lenght:

    Here's the cleanest html structure for this challenge:

    <body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

    Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR

    👏👏BY THE WAY, AMAZING SOLUTION, NOT EVERYONE HAVE SO CLEAN CODE BY THE FIRST SOLUTION HERE👏👏.

    👋 I hope this helps you and happy coding!

    Marked as helpful
    0
    Prabu•150
    @reallyUndefinedPosted over 2 years ago

    @correlucas Hey thanks man, this definitely helps.

    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