Skip to content
Submitted about 2 months ago

Responsive QR code component using Flexbox and Semantic HTML5.

Gokul•20
@Gokul221
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?

Feeling great that I managed to make the component look almost similar to the challenge. Next time I would try tailwind CSS to add stylings and responsiveness to the site.

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

I haven't used general CSS for a long time because tailwind CSS was my go-to CSS library. So I had to revisit the styling formats and properties' names in general CSS. Also, I noticed the shadow applied in the figma file so applying shadow using box-shadow property was new for me. Nice experience solving this simple challenge!

Community feedback

  • Malak Bousabah•10
    @malakworldwidePosted about 2 months ago

    I think your code is really great. I used <div> instead of <section> in the challenge. I was wondering how I could use semantic HTML, and I found the answer with you.

    1
    Gokul•20
    @Gokul221Posted about 2 months ago

    @malakworldwide Thanks for the lovely feedback. I'm sure there could be other ways in which we can apply semantic tags here. This came into my mind at as a last moment thought. But glad the solution helped you in some way.

    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