Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code component project

@jmarsic

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

Posted

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

@jmarsic

Posted

@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
Discord logo

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