Skip to content
Submitted 6 months ago

Responsive QR Code Component created using SASS

Srishti Chaudhary•170
@itsmesrishti
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

What are you most proud of, and what would you do differently next time?

I'm proud of the fact that I was able to finish it in the time I estimated. I'm proud of using scss. And, I'm proud of making it fully responsive with only a few media queries.

What challenges did you encounter, and how did you overcome them?

How to connect scss file with html and how to use mixins. I googled how to do these things properly and that helped.

What specific areas of your project would you like help with?

I'd like to know how can I make this accessible!

Community feedback

  • Patricio Zarauz•140
    @PatricioZarauzPosted 5 months ago

    First off, let me congratulate you on the challenge you did, it's great and looks identical!

    After reviewing your code, I have a small number of tips to give so you can have it in mind for a next challenge.

    • When using colors in your scss, you can define a variable as following: $dark_blue:hsl(218, 44%, 22%); and then use $dark_blue anywhere you want.
    • Instead of using position absolute for the footer, you could use a grid template, for your layout. Since if the screen is short enough, the footer and the card starts to overlap and it's not readable. In this case it would be better for the user to scroll and see everything correctly.

    Regarding your question on how you can make it accessible, you can use the axe DevTools plugin in order to get accessibility recomendations for your page, in your case the only issues are with the footer that you added, that it doesn't meet the minimum contrast requirement.

    I insist, you did great job! and I would like to get some tips from you on how you were able to get the exact measurements of everything, since I couldn't :(

    Marked as helpful
    1
    Srishti Chaudhary•170
    @itsmesrishtiPosted 5 months ago

    @PatricioZarauz Thank you so much for the detailed review! You gave such great tips! I'll try to implement them all in my next project!

    For the exact measurements there was the figma design file provided with the project so I used that. There's also this Dimensions extensions that's helpful too sometimes!

    Again, thank you for reviewing and leaving actionable tips!

    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