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 Using CSS Grid

Extendo99β€’ 20

@Extendo99

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?

After completing the online course, I was able to use CSS grid and other CSS properties in practice for the first time. I learned a lot of useful things while writing this simple design. Next time, I would immediately enter a few properties such as min height to save time figuring out what is wrong.

I'm most proud of using the drop shadow filter, which makes the website look great

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

During the project, I used padding, which caused problems with border radius, but I read that it is better to use margin in such cases. I also had a problem with positioning the elements at the beginning. I tried flexbox, but it was faster with grid.

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

This is my first serious project, so I would also like to ask for general tips on how to write code, selectors and HTML. I would also like to ask about the better values ​​to use: pixels, percentages or maybe vw, vh

Community feedback

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