Skip to content
Submitted 11 months ago

QR code component using html and css flex box

anthony•170
@Codingtry123
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

keep the simple project simple. Using container to wrap the element you want to style.

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

how to position child element away from the parent element. Setting appropriate size for parent and child element. Using margin to distance border of parent element and child element.

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

how do I choose sizing unit for different types of context and when building website responsively?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Howslifem8•100
    @Howslifem8

    Hello Anthony, you've done a great job with this project. Your website looks identical to the design. The only 'thing' was the size of the card container as it looks a little smaller than the original but besides that everything looks great. As for your question, the sizing units differ based on the context of your website. There 2 categories of sizing units, Absolute units and Relative units. The main behavioral difference between them is distinctly in their names. Absolute units are sizing units used to create fixed dimensions. They do not change size or location when the screen size changes (EX: px, cm, mm, etc). Relative units on the other hand scale with the environment (EX: em, rem, %, etc). Relative sizing units change depending on how the website is being viewed (on a smaller/larger screen etc). For example a relative unit known as 'rem' is used for scaling text relative to the root element, meaning if the root font size is 16px then 1rem = 16px. Hope this helped a little. Have a nice one !!

  • Stephanie Dennehy•220
    @Stephanie-Dennehy

    Hi Anthony,

    I'm not quite sure what you're asking about sizing. Could you provide a little more detail here? You mention responsive designs, so I am guessing you are asking how to make the design smaller on a mobile device. This would be done with media queries to adjust for the larger or smaller breakpoint.

    I was unable to link to your code. I'm getting an error when I try to view the code. But if you can update that, I'd be happy to take a look and offer more feedback!

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