Skip to content
Submitted 8 months ago

QR code component project

Jakša Maršić•70
@jmarsic
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 is the first time I use CSS variables and use rem's for margin and padding instead of pixels. Next time I will try to use CSS variable name patterns and sort them in some order that I will find most logical.

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

Well biggest challenge was editing README.md :) Just kidding, although there are many things we can specify to make the project description beautiful. Biggest challenge was to get right ratio of hero component and combine margin with padding so text looks like on design previews.

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

I didn't like how i hardcoded margin-top for hero component (class hero). I would like if someone tell me a better way of centering components vertically.

P.S. I know for using display: flex, but then I would need more divs? Correct me if I am wrong.

Community feedback

  • MelAnnaCode•20
    @MelAnnaCodePosted 8 months ago

    Hi apart from the location of the content I don't see any differences, great job :) you can try to use: display: grid; place-items: center; then you don't have to set the top margin.

    0
    Jakša Maršić•70
    @jmarsicPosted 8 months ago

    @MelAnnaCode I will try it with grid. Thank you on your feedback. Kind regards, Jake

    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