Skip to content
Submitted almost 3 years ago

Simple QR code preview using HTML & CSS

Lakshan•305
@M-lakshan
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

10th build-up :)

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Lucas 👾•104,160
    @correlucas

    👾Hi Lakshan, congrats on completing this challenge!

    I saw your preview site and I liked a lot the work you’ve done here, it's almost complete, I’ve some suggestions you can consider applying to your code:

    The html structure is fine and works, but you can reduce at least 20% of your code cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

    <body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <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
  • romila•3,550
    @romila2003

    Hi Lakshan,

    Congratulations 🎉 for completing this challenge, your Card component looks great, and it is great that you used flex to center the card. It looks pixel perfect.

    The only thing I would suggest is to remove the header tag as it provides no use since there is no content within the tag. The header tag is defined as representing 'a container for introductory content or a set of navigational links' HTML Semantic Elements. Also, I would recommend you setting the value of justify-content to center.

    Overall, great attempt and project and wish you the best for your future projects so keep coding 👍.

    Marked as helpful

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