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

vanilla html and css

P
abs8090 60

@abs8090

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 challenges did you encounter, and how did you overcome them?

even though it was a simple card to implement, I still had to pay attention to the details found in the Figma design to re-produce the design in code.

I also did not know how to center elements inside the container dive, so I googled "how to center an image inside a dive" and used one of the solutions I found online.

Community feedback

Atatra 170

@Atatra

Posted

Hi, good job on your first challenge! 🎊

If you struggle with flexboxes (really useful when you want to center something), I would advise you to check out Flexbox Froggy, it's fun and I'm sure afterwards you will understand everything.

As per your solution, here are my recommendations:

  • You can apply a background color to your page if you apply it to your <body> (or perhaps even your <main> if you had one). If you do, you will need to set a minimum height to match the size of the viewport, and full width.
  • If you want to center the Card (your .container), you need to add to the parent component "flex, justify-content: center" (to center its children on the main-axis - the main-axis is the same as your flex-direction for that same component) and "align-items: center" (to center its children on the other axis).

Hope it'll help, have fun coding! 😊

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