Skip to content
Submitted about 2 years ago

Responsive QR Code Component Using HTML & CSS

cattheelephant•10
@cattheelephant
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

-What did you find difficult while building the project? -Which areas of the code would you improve on? -Any advice on best practices and resources for future projects?

Community feedback

  • Benny•180
    @dbenny1Posted about 2 years ago

    Great job! You should use semantic HTML next time. It helps a lot for accessibility (like screenreaders etc.). Instead of,

       `<div class="main"></div>
   <div class="footer"></div>`

    You can use,

       `<main></main>
   <footer></footer>`

    Plus, your img tag should have an alt attribute.

    Marked as helpful
    0
    cattheelephant•10
    @cattheelephantPosted about 2 years ago

    @dbenny1 Thank you so much. I'll effect those changes.

    0
  • Kawsar Ahmed Fahad•2,660
    @faha1999Posted about 2 years ago

    Hello cattheelephant. Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

    • You might want to use semantic tags like the <main> to wrap your code, instead of div. like
    <main class="main">
      <div class="container"></div>
      <div class="footer"></div>
</main>

    You could also make use of <section> and/or <article> semantic tags. This would help improve accessibility.

    • add alt="" attribute in img
    body {
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
}

    I hope this helps you. Happy Coding!

    Marked as helpful
    0
    cattheelephant•10
    @cattheelephantPosted about 2 years ago

    @faha1999 I really appreciate your feedback. Thank you so much. I'll be sure to make the appropriate changes.

    0
  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello @cattheelephant, Congratulations on completing this challenge!

    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!

    1
    cattheelephant•10
    @cattheelephantPosted about 2 years ago

    @correlucas Thank you!

    0
    Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    @cattheelephant You're welcome =)

    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