Skip to content
Submitted 6 months ago

QR code with HTML and CSS

Linh Nguyen•170
@auri222
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?
  • Maybe the part in the code that I am proud of is the way I can use Flexbox to achieve the outcome that I want and with the help of the calc function to create the footer part at the end of the page for an appropriate look. But as you can see the HTML structure is a bit messy.
  • Next time I will use CSS grid for this challenge.
What challenges did you encounter, and how did you overcome them?
  • The footer part made me think hard and had to try a lot of ways to achieve it.
  • Using Flexbox can help stack 2 components as a column, but then the container that includes the QR box will only have the height of the QR box, so I had to calculate the height of the footer and used the calc function to achieve the container height as the way shown in the page.
What specific areas of your project would you like help with?
  • If the result is shown as the page that I coded, which way would be the best approach?
  • I hope to hear your idea on this.

Community feedback

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