Skip to content
Submitted almost 2 years ago

QR-Code Component with Flexbox

DNel•200
@TechEdDan2
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?

It was a fun project to complete. I think next time, I would try to practice using a framework possibly.

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

I didn't encounter too many challenges on this assignment.

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

Getting the sizes (like the width of the card) correct.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    Hi, DNel!

    Congratulations on completing this challenge!

    Nice alternative text for the QR code! It is rare to see people that can write good alternative text. Amazing! 👏

    I recommend removing all commented code. If other developers or yourself in the future work with the same code base, they can get confused about whether the commented code should be used or deleted.

    I recommend making the body as a flex container to place the card in the center of the page. Then, there is no need for a wrapper to have margin-top: 15%. Be aware that using percentage unit for margin and padding can lead to unexpected results on some screen sizes. It is because the value (computed value) is relative. So, it is better to use a static unit (rem) to make sure it is consistent across screen sizes.

    I suggest using a CSS reset whenever you start a new project. This can help you set the styling foundation easily.

    Read more — A Modern CSS Reset

    I hope this helps. Happy coding!

    Marked as helpful
    1
    DNel•200
    @TechEdDan2Posted almost 2 years ago

    @vanzasetia Thank you for all of your helpful notes and suggestions.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @TechEdDan2 Happy to hear that was helpful! 😊

    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