Skip to content
Submitted about 2 years ago

QR code component

CHAKIRI•70
@mouad-chakiri
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

  • Luis Olivero•170
    @Luis-OliveroPosted about 2 years ago

    Hello Chakiri, congratulations on completing this challenge! Looking at the report it seems you have a few accessibility issues and only one issue with your HTML.

    To start, I would suggest adding this to your <html> tag. <html lang="en">

    Also I would add a < main> tag around your <div>

    <body>
  <main>
    <div class="card">
    </div>
  </main>
</body>

    Another thing to keep in mind is that it is best practice to always have at least one <h1> tag on each page. I would change your <h2> line to an <h1>.

    <h1 class="header">Improve your front-end skills by building projects</h1>

    Hope this helps and keep at it!

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

    👾Hello Chakiri, congratulations for your new solution!

    1.Your solution is great and the code is working, but the html 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.

    Here’s a minimal html structure for this challenge:

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

    2.Its ever better to use relative units as rem or em that have a better fit if you want your site more accessible between different screen sizes and devices. REM and EM does not just apply to font size, but to all sizes as well.

    ✌️ I hope this helps you and happy coding!

    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