Skip to content
Submitted almost 2 years ago

Simple QR Code Component (CSS Flexbox)

Ian•310
@ianbuen
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

  • Fernando Pérez•320
    @fermopPosted almost 2 years ago

    Hi Ian! You did a really good job! your page looks cool on mobile and desktop devices.

    I have some suggestions for you:

    • You have some accessibility reports because you are using a div instead of semantic html elements such as main (where the main content of your page should be in).
    • It looks like there's another accessibility report due to the browser doesn't know if you have a footer inside the body of your page. Although you have a footer, it doesn't recognize it because you have your footer out of your body:
    <body>
  <div class="card">
    <img class="qr" src="./images/image-qr-code.png" alt="" />

    <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>
  </div>
</𝗯𝗼𝗱𝘆>   <---

<𝗳𝗼𝗼𝘁𝗲𝗿>   <---
  <div class="attribution">
    <div>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a></div>
    <div>Coded by <a href="https://www.frontendmentor.io/profile/ianbuen">@ianbuen</a></div>
  </div>
</footer>
    • I highly recommend you to use rem instead of px in the css. Browsers have a default size which is 16px equals to 1rem but what if the user has their personalized font-size to large instead of medium? your page would be the same although the font-size is set as large. Here are two YouTube videos where it is explained better.
    1. CSS em and rem
    2. Why You Should Use REM Instead of Pixels

    If you have any questions feel free to send me a message or answer this comment. I hope it helps!

    Marked as helpful
    2
    Ian•310
    @ianbuenPosted almost 2 years ago

    whoops, thanks a bunch @fermop- helped out fixing the reports

    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