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

@NullishKoala

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?

I am especially proud of the time it took me to finish this project. I estimated around 2 hours but managed to finish it in an hour. I am also happy with finally being comfortable using CSS flexbox since it has always been a bit of a struggle.

I would probably rethink the css properties that I have used for the overall layout. I am not sure is flexbox for body, and flexbox + position: absolute for the main component and footer is the best and common solution.

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

The most challenging parts were:

  • the layout of the page: should I use flexbox? Is the combination of flexbox and position: absolute for the footer the best option? Should I use grid for this page?

In the end I've decided to use flexbox & position: absolute for the footer for the overall layout.

  • how to fit the image of the QR code.

I've set it's width to 60%, but I am not sure if that's the best solution.

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

I would be grateful for the feedback regarding:

  1. the overall layout solution: flexbox on the body + position: absolute on the footer. Is it a good solution and a common one?
  2. resizing the QR code image to fit the box? Is my solution to set it's width to: 60% a good one? Is there a better way to solve that part?

Community feedback

Dan P. 190

@Danielfww

Posted

Hey Aneta - great job on finishing your first project!

The only thing that I would change its on the padding you did - if you do 5px or 10px inside your container you will see a difference there - image wise you can always adjust after but yeah changing width and height its how you would usually resize image.

Hope this helps even a little i powodzenia na nastepnych projektach.

1

@NullishKoala

Posted

@Danielfww dzięki wielkie! Yeah, I see it now how changing the padding would help here overall, thanks for pointing it out!

1

@Mtrxxo

Posted

Hello, Your Solution's great...

Your Solution's a good one... And it's common

For you to fit the QR Image in the box... You can set height and width for the image and then give it a margin top and bottom of any value you desire and set margin left and right to "auto" which centers it on both sides... Other than that, great work

Happy Coding 😊✨

1

@NullishKoala

Posted

@Mtrxxo Thank you so much for your advice! Happy coding to you too ⭐😺

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