Skip to content
Submitted 13 days ago

qr code using HTML and CSS

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

This was my first completed project on Frontend Mentor and my first github project! If I were to complete this project again I'd ensure I had a firm understanding of figma to avoid learning this as I go which slowed me down.

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

I struggled to use in fonts in the project, and also in getting the padding and margins right. Chrome Dev Tools was a huge help in figuring this out.

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

I would like to know how close to the example I am.

Is my padding/margins correct?

Have I correctly formatted this for the right devices?

Community feedback

  • Dylan Heslop•1,150
    @dylan-dot-cPosted 13 days ago

    Well done on completing your first challenge! You have a long way to go and you only get better.

    For Figma, the more you use it the better you get at inspecting the designs but if you hold the ctrl button(on windows) and move your cursor you can see the spacing between different elements and that would be good for padding and margin.

    Only issue with this is that you need to center it vertically, seeing that you used flex box and justify-content you also need align-items to center it vertically.

    Note if you use align items it will center the content to the height of the container... So you need to make sure the container is the same height as the screen/window so don't use 100% as that would be relative but rather 100vh as that would make it full height of the screen.

    Also another tip is to do what is in the Readme-template.md as it's important for when others want to look at your project and it gives you more details. Also make sure you put the link on the GitHub repo as well. All of these will make you look more professional and you are actually putting in the extra effort to become a programmer. Because at the end of the day, it's more that just coding but also documentation

    Marked as 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