Skip to content
Submitted 6 months ago

QR Code Component Challenge. Only HTML5 and CSS.

Miller•30
@miller-danilo
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?

Since this was my first challenge, I had to review what the Frontend Mentor workflow is like.

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

For now, I need to improve my frontend knowledge, it is not my strong point.

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

I want to get ideas about how to implement in the best way possible the HTML and CSS structure.

Community feedback

  • Arkadiusz Żmudzin•30
    @arkus7Posted 6 months ago

    Hi! Here's my feedback as a seasoned dev, but a beginner in the frontend:

    1. Nice and clean HTML structure. I wasn't sure about the usage of the article tag, but I've read more on this topic and I think it's fine.
    2. I like the variables you've used in the style.css. I had a problem remembering which color is which, and your solution to that seems very good. Definitely stealing this one for another challenge.
    3. I can see that you've "hardcoded" the card height as well as the width. I think you should only hardcode the width, and let the height be more dynamic.
    4. I can see a small difference between the design and your solution when it comes to the "copy" text ("Scan the QR code..."). I was having the same issue, and I've dealt with that using a Figma design file - this text has non-default line spacing. If you want your solution to be 100% as on the design, check the line spacing there.

    Overall, great solution! Definitely better than mine and I've learned some new things from you, so thank you!

    Marked as helpful
    1
    Miller•30
    @miller-daniloPosted 5 months ago

    Hi, @arkus7

    Thank you for take the time to comment my solution. I will check the recommendations you made about the card height and the line spacing.

    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