Skip to content
Submitted almost 2 years ago

QR Code Card with Vanilla CSS

Josh•400
@burrijw
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

Rebuilt this QR code card with vanilla CSS since I did it with tailwind originally. I wanted to kinda of start over on FM projects without using any frameworks for the simple ones. This is the first of many!

I did some reading on accessibility on QR codes which was interesting. I actually learned a lot on this re-do. 📚

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    Replace <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. you can also use rem as a unit for width values, rem as very responsive unit and accessibility friendly. Aside from these, everything is fine .

    Hope am helpful

    Well done for completing this challenge. HAPPY CODING.

    Marked as helpful
    1
    Josh•400
    @burrijwPosted almost 2 years ago

    @Hassiai Thanks for the feedback!

    0
  • Grace•30,990
    @grace-snowPosted almost 2 years ago

    Looks good. Only minor suggestions really:

    1. The alt text is very verbose. I recommend changing to "QR code to FrontendMentor.io"
    2. Add some block padding to body as well so the card doesn't touch the screen edges at the top and bottom
    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