Skip to content
Submitted about 2 years ago

Responsive qr code component using pure css and html

Htet Arkar Ko•20
@htetarkarko
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

  • Lucas 👾•104,400
    @correlucasPosted about 2 years ago

    👾Hello Htet Arkar Ko, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

    👏 Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

    Your component is done and the code is working, but the html markup/structure can be reduced by removing unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

    YOUR SOLUTION BEFORE THE REDUCTION:

    <body cz-shortcut-listen="true">
  <div class="card">
    <div class="card-container">
      <div class="img-container">
        <img src="./images/image-qr-code.png" alt="frontend mentor qr code" class="image">
      </div>
  
      <h3 class="card__title">Improve your front-end skills by building projects</h3>
      <p class="card__text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
  </div>

</body>

    THE CODE REDUCED:

    <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>

    Here’s a good guide for writing a concise and clean code: https://altcampus.school/posts/writing-semantically-correct-and-clean-html

    ✌️ I hope this helps you and happy coding!

    Marked as helpful
    0
    Htet Arkar Ko•20
    @htetarkarkoPosted about 2 years ago

    @correlucas thank you for your feedback.

    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