Skip to content
Submitted 2 months ago

QR Code Component

alexisgale•30
@alexisgale
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?

I’m proud that I was able to complete the code and achieve a design that closely matches the preview image provided. It gave me a great sense of accomplishment to see my work align with the intended design. In the future, I would like to enhance the project by incorporating animations to make it more dynamic and engaging.

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

The main challenges I faced were identifying the correct font size, margins, and techniques for centering the div element. I overcame these obstacles by utilizing Chrome DevTools, which proved to be an invaluable resource for inspecting and adjusting the layout in real-time. It significantly helped me fine-tune the design to align with the preview.

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

At this stage, I don’t have any specific areas where I need help. The project has been straightforward, and I’m satisfied with the outcome so far. However, I’m always open to feedback or suggestions for improvement!

Community feedback

  • Bhuvnesh Upadhayay•2,000
    @bhuvi819381Posted 2 months ago

    Hello, you completed this challenge congratulations

    i'm unable to see your github repo so i can't suggest you anything but after seeing your live page looks like you div is not centered. You can make it center using flex or grid.

    Another thing i'm suggesting you pixel perfect by welldone a chrome extension you can match the design and your preview with this

    i hope it'll solve your problem

    0
    alexisgale•30
    @alexisgalePosted 2 months ago

    @bhuvi819381 Yes, I used display: flex in my code. I don't know why the screenshot on this website is different from my code. Thank you for your feedback and the Chrome extension you provided.

    https://alexisgale.github.io/QR-Code-Components/

    1
    Bhuvnesh Upadhayay•2,000
    @bhuvi819381Posted 2 months ago

    @alexisgale I'm unable to see your repo so can't say why

    For center use this

    *{
 margin:0;
padding:0;
box-sizing: border-box;
}

body {
height:100vh;
display: flex;
justify-content: center;
align-items: center;
margin: auto;
}

    And check

    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