Skip to content
Submitted almost 2 years ago

QR code challenge

Miguel•40
@notEspagueti
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

This challenge was done in React whit simple functional components

Community feedback

  • Manish Mandal•650
    @manishdevelopsPosted almost 2 years ago

    hey! congrats on completion of this project. well instead of 👇

    .container {
     margin: 10vh auto;
}

    you should use 👇 . it is going to align contents center wrt the viewport

    .root {
   display: flex;
   min-height: 100vh;
    justify-content: center;
    align-items: center;
}

    hope it adds up to your learning...

    1
  • Atif Iqbal•3,200
    @atif-devPosted almost 2 years ago

    Hi Miguel, congrats🎉 on completing the challenge. Better take care about following points.

    • Always check Frontendmentor Report Generator issues after submitting the project for removing errors and warnings. To overcome warning: Page should contain a level-one heading. Create level one heading (<h1></h1>) inside main and hide it visually. Although it will be hidden on UI but will be readable for screen readers technology. To avoid accessibility issue "All page content should be contained by landmarks" use code as :
    <body>
    <main>
        ---your code here----
    </main>
  <footer>
  </footer>
</body>
    • For centering the container(whole card) vertically and horizontally you can use code as:
    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    Or you can learn centering from here.

    (since you have used react library, just get the concept and use it your code.)

    Hope you will find this Feedback Helpful.

    1
  • Ahmed Mahrous•980
    @AhmedMahroussPosted almost 2 years ago

    good jop my bro Congrats on completing your first challenge!🎊🍻If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! 🎆🎊

    1

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