Flexbox to center the main component, semantic html, box model
Design comparison
Solution retrospective
Nothing as such. I just could do it quite perfectly..
What challenges did you encounter, and how did you overcome them?I thought it was a very easy project, but I need to work on my speed. Also,
- doing
height : 100vh
makes the body tag to have a scrollbar. - centering the div using flexbox for larger screens was challenging
min-width
, max-width
, etc.
filter() etc.
Community feedback
- @RobinsonGabrielPosted 5 months ago
Hi Kin,
Yeah that's pretty much a perfect 1 for 1 from what I can see, so points! What are you curious about with max-width and max-height in particular? I may have some good resources that helped me/I might just know the answer off the cuff.
Marked as helpful1@RobinsonGabrielPosted 5 months ago@kinlearn
https://developer.mozilla.org/en-US/
Mozilla as far as I'm concerned has the most user-friendly yet descriptive guide for any element you might want to understand better. Their guides are pretty helpful for getting some of those basic layout concepts down. I am pretty sure that the first time I did that QR card, which was the first thing I'd styled since college like 2 years ago (and even then we mostly used Bootstrap and spent basically no time discussing UI at all) and it took me... like a day??
https://flexboxfroggy.com/ Just a fun little game to get more acquainted with the elements that are used in flex.
https://css-tricks.com/ More organized than MDN, in case you need more pictures, their guide on grid is also helpful.
https://layout.bradwoods.io/ Also here's this. Obviously don't use a tool as a crutch, but as you're getting used to doing larger layouts I find this to be a good starting point to double check my code.
Likewise just refering to some of the solutions on here can be great help, paying special attention to elements that gave you trouble, like I didn't know that grid doesn't apply to every element in a line of descendants (so if you had a grid layout with one div and a div inside of it, that second div plus everything in it would keep whatever display rule it had).
That said now I can style less complex elements in an hour or two no problem, taking your time is probably more beneficial instead of working on speed as my two cents, otherwise you might not notice shorter ways to do certain layouts.
Any rate that's a lot of words so I can try to reword anything if needed. And best of luck!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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