CSS Layout Concepts

Hi,

I am getting confused with CSS layout topics (float, position, display, Flexbox, and CSS grid). I finished the FCC lessons because they were easy, but my concepts are not clear.

Are there good books/online resources that focus on CSS layouts?

Should I proceed with the projects? Will projects clarify the concepts?

Thank you.

Don’t waste your time with float.

Learn grid and flexbox & that will cover about 90% of your positioning problems.

After those 2, learn about position: absolute, relative, fixed. Then you’re done.

2 Likes

My answer would be yes. They start simpler as well and as you apply the concepts they make more sense. E.g. the first project “Tribute Page” is for the most part a list with an image. So there aren’t that many elements and it is a good place to start getting your feet wet.

As far as resources go, these gamified exercises helped me solidify grid/flexbox concepts:
https://flexboxfroggy.com
https://cssgridgarden.com

And I find these cheatsheets handy …
http://flexbox.malven.co/
http://grid.malven.co/

1 Like