Skip to content
Submitted 3 days ago

QR Code Component

hbeamaniii•10
@hbeamaniii
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?

Design has always been my weakness. To be able to see a finished design, and finally bridge the gap between the design and the code needed to produce that design, and writing that code is what I am most proud of.

Next time, I would like to incorporate some of the layout techniques using grid or flexbox. It did not seem necessary for this challenge.

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

The main challenge was getting the size of the text right. It was not immediately clear from the design file whether the font size is represented in points or pixels. A google search then some trial and error helped to overcome that challenge.

The second challenge was understanding the box model. There was too much extra space at the bottom of the design. I still don't think I overcame that challenge in the correct way. I simply changed the height of the container element to eliminate the extra space.

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

I would like feedback on the structure of the html, layout techniques, and using the box model in css.

Community feedback

  • Sclata•100
    @SclataPosted 2 days ago

    Looks pretty good! I see a react tag but don't really see resources to that effect in the repo. Just a couple things to note on a quick review of your code:

    1. Remember the cascade. You can simplify some of the style declarations by specifying the rules in parent elements and letting them run down the chain. As an example, you declare font-family and text-align properties in both the h1 and p selectors, where you could declare them only once instead in the .info class selector (since it is the parent div).

    2. Understanding the box model and basic flow layout is good, but don't sleep on flexbox (and grid when needed). It/they simplify positioning of elements a lot.

    3. Look at how height is calculated for the body element and then see if you can use a style declaration relative to the viewport. This will help center your QR component on screen.

    Marked as helpful
    1
  • Bassel || باسل•180
    @BasselfathyPosted 2 days ago

    Congrats on completing your first challenge👏

    I have revised the code and I want to give you some tips, hope they help overcome the issues you are facing.

    • first, make the browser inspector tool your dear friend through your developing journey; it will show you why each element is acting like that.

    • Have a habit of using a CSS-reset, using a CSS-reset removes the browser default styles; making it easier to pinpoint the root cause of styling issues...you can try Josh W.Comeau's one.

    • Why the card not centered vertically as well?!...by default the <body> element has a display:block;, for that the margin:auto will only work on the X-axis; and to solve it you need to give the <body> a display:( flex or grid ).

    Marked as helpful
    1
  • Filip290•10
    @Filip290Posted 2 days ago

    It would have been necessary to add dimensions to the body to be able to place the qr code in the center.

    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