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
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?

Getting the flex box centered

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

Getting the flexbox centered, i asked chatgpt which give me a hint in terms of height being the 100% of the viewport for the flex container to center the box without padding and margins.

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

Semantic HTML, CSS styling

Community feedback

Seung Kim 30

@seung0708

Posted

Sorry, @medic-code! I didn't really read this section. Great work!

0
snhaydar 20

@snhaydar

Posted

Aside from the background color difference, it looks great! It's interesting that you used a flex box, I didn't think to do that!

0

P

@medic-code

Posted

Yeah I tried to use the hsl colour in the design but it really didn't look like the design at all so choose something that allowed you to see the card clearly. @snhaydar

Thanks for taking the time to comment!

It might be a bit over kill to use flexbox but for any columns or rows you can use flexbox. Using CSS Grid for large scale layout and flexbox for local layout.

This card is a bit weird because its just in the middle of the page which would be unlikely to be what you'd do for a full website lay out.

0
Seung Kim 30

@seung0708

Posted

I think my solution comes really close to the design.

0

P

@medic-code

Posted

Thanks for your input @seung0708

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