Submitted 8 days ago

I used, flex, CSS and HTML

Sebastián Márquez• 70

@sebamarques

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

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'm not proud about it but it's the first time that i used someone else figma design, so, being capable of understanding and making the page based on someone else design is something i liked.

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

I couldn't center the div, i googled how to do it but i didn't like how they did it so i used flex, justify content and align items

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

Maybe in the positioning, i used flex making this component, but i used a div above it so i could center it, i would like to know how to do it without another div if it's possible, cause it's looks the same as the figma design,(from my pov) but i think that in a more proffesional environment what i did is not valid.

Community feedback

WellingtonGuedesDev• 30

@WellingtonGuedesDev

Posted 8 days ago

sorry for my English, I'm also a beginner at it, lol.

If you think about componentization, encapsulating everything inside a <div> doesn't seem like something wrong to do. In a broader context, positioning everything based on the body might eventually break your site if you try to add more to it. Positioning everything relative to a <div> simplifies things.

As for using Flexbox for positioning, in my view, it doesn't make a difference whether you use Flexbox, Grid, or Positioning. There's no right or wrong way; it depends on specific situations where one might be better than the others. In general, there’s no correct or incorrect approach.

Please log in to post a comment

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