@RobinsonGabriel
Posted
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 helpful
@kinlearn
Posted
@RobinsonGabriel Yes, sure! Please share the resources..
@RobinsonGabriel
Posted
@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 helpful
