Skip to content
Submitted 5 months ago

QR Code Component using HTML5 and CSS

Rowan Pereira•330
@rowanrooster
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?

The HTML+CSS was straight forward - tried using flexbox to get the component aligned vertically and horizontally but went with CSS translate in the end. Next time I'll be making sure my environment works properly and that I can use some Sass

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

Figuring out how to get Sass working without an extension for compiling.

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

What is the best way to get Sass into your project? I tried using Vite - will try that again but is the 'Live Sass Compiler' by Glenn Marks worth it?

Community feedback

  • Andy•140
    @AStombaughPosted 5 months ago

    Good job! :) If you want to achieve a drop shadow similar to the original design file, one way to do so is by using the box-shadow CSS property: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

    Marked as helpful
    0
    Rowan Pereira•330
    @rowanroosterPosted 5 months ago

    @AStombaugh thank you, i have updated my code thanks to you! I completely overlooked that!

    1
  • Muhammed Ali•160
    @Mohamed-ben-AliPosted 5 months ago

    The solution includes semantic HTML. It is accessible. The layout looks good in the range of screen size. The code is perfectly structured, readable, and reusable. The solution does not differ from the design.

    Marked as helpful
    0
    Rowan Pereira•330
    @rowanroosterPosted 5 months ago

    @Mohamed-ben-Ali thank you! I wasnt sure if I should make the component more responsive for even smaller screens ( screens < 320px) but thats pretty small!

    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