Skip to content
Submitted almost 3 years ago

QR Code Component

Robin•40
@EklundRobin
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,020
    @MelvinAguilar

    Hi @EklundRobin 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

    I like this solution for the challenge. Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further:

    • Your solution should contain an icon.
    <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />

    With semantic tags:

    <body>
   <main class="container">
      <article class="card">
         . . .
      </article>
   </main>
   <footer>
      . . .
   </footer>
<body>
    • Add descriptive text to the alt attribute of the images. The text must clearly describe the image. The alt attribute enables screen readers to read the information about on-page images and will be displayed instead if an image file cannot load.
    • Use an h1 tag for your solution. The <h1> element is the main heading on a web page. There should only be one <h1> tag per page, and always avoid skipping heading levels The HTML Section Heading elements (Reference)
    <h1>Improve your front-end skills by building projects</h1>
    • The container isn't centered correctly. You can use flexbox to center elements:
    body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

    Additionally, remove the margin to center the card correctly.

    .container {
    /* max-width: 1400px; */
    /* margin: auto; */
}

.card {
    /* margin: 150px auto; */
    max-width: 350px;
    . . .
}

    Links with more information:

    I hope those tips will help you.

    Good job, and happy 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