Skip to content
Submitted about 1 month ago

Responsive QR Code Component using the CSS Flex property.

Vincent Dao•100
@Squ1nty
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?

Initially, I was struggling with how I was going to center the parent container of the QR Code. With a little trial and error I was able to get the CSS Flex property to work after setting the height of the html and body tags to 100%. Definitely going to start with setting that up first next time.

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

I encountered a few challenges, obviously the main challenge was centering the parent container of the QR Code, which was solved with the help of a helpful thread on Stack Overflow. Other minor issues such as text-formatting also arose but I was able to debug them fairly quickly.

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

Probably nothing to be honest.

Community feedback

  • Marzia Jalili•3,970
    @MarziaJaliliPosted about 1 month ago

    Awesome work!

    Some areas you can amend:

    • Using grid is more concise for centering:
    display: grid;
place-items: center;
    • Next, using px for font-size isn't considered good practice, man. It happens to cause some issues. I suggest using rem units instead.

    1rem is equal to 16px. Just by having enough practice, you'll be able to guess the number within the first glance.

    • Lastly, for your next project consider moving the CSS to a separate file. 😁 In case you don't know how to link the file, the <link> is used for this task.
    <link href="./style.css" rel="stylesheet" />

<!-- href is for the path of the file -->
<!-- "rel" here is specifying the relationship which in this case is a stylesheet -->

    To keep it 100, the solution is amazing overall!

    😎😎😎

    Marked as helpful
    1
    Vincent Dao•100
    @Squ1ntyPosted about 1 month ago

    @MarziaJalili Thanks so much for the feedback! Will keep it in mind for my next projects :)

    0
  • ANAND BILLA•50
    @5eisenBergPosted about 1 month ago

    It is looking Good.

    1

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