Skip to content
Submitted 5 months ago

QR Code Component Challenge

abanob rafik•60
@AbanobRafik
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

  • P
    Kamran Kiani•2,780
    @kaamiik

    Some notes for your code:

    • A proper page structure inside <body> should look like this:

      <body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>

      Depending on the design, you may not need a <header> or <footer>, but a <main> element is essential. You need footer in this too.

    • You do not need to wrap your img inside a div here. Do not make your code complicate. Also your alt should describe the image properly for screen readers. QR Code to frontend mentor webiste is better I think.
    • Each page should have an <h1> heading. However, in some cases (like a QR code component), an <h2> is more appropriate because this is not a page and is just a card.
    • It's recommended to use a proper CSS reset at the beginning of your styles. Both Andy Bell and Josh Comeau provide excellent CSS resets, which you can easily find online.
    • Add your styles from top of the html to the bottom.
    • Use min-height: 100vh; instead of height: 100vh; to prevent overflow issues.
    • Your font-size and max-width should be in rem units instead of px. Read more about this here.
    • This width: 250px; in .text is completely wrong. You should not limit text container.
    Marked as helpful
  • P
    Karolina Pietraś•40
    @ilierette

    Hello! First feedback there, so take it with a grain of salt. Overall looks good and very similar to project, good job! But was the background choice deliberate? It's grey on design. And divs are not semantic tag. That's all, keep up!

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