How to learn CSS layout
April 24th, 2014
Something every frontend developer should know
You surely need to check this website out: learnlayout.com
It's a great resource created by @incompl and Isaac Durazo.
That's all. Oh yes... and I just translated it to italian.
learnlayout is now available in Italian! http://t.co/wSXFaj7hZb— Greg Smith (@_gsmith) April 22, 2014
wtf css layout - TL;DR
When I started studying CSS I remember that the most difficult thing to understand was figure out how to use those cool selectors and properties to properly reproduce great page layouts.
There are several positioning methods you can approach, mastering them surely would take you much time.
Tricky names impossible to remember and awful results.
I clearly remember that I wanted a quick guide, a reference where to learn the CSS layout, but nothing was there. A guide developers from all over the world could use and start doing their work: create the layout they need.
If you are a frontend developer, or if you worked with them before, you probably would know that:
- position has strange values
- fixed really does not fix your problems
- block is the opposite of inline
- margin not always works
- padding and width, they just mess everything up
- float ... uh?
After few years of trying, creating static mockups, jsfiddles, pastebins and tons of stackoverflow you probably will end up mastering all of them :)
I think learnlayout.com is a great resource, I know it will help future developers to better understand the CSS and how to properly use it in order to achieve the desired layout.
learnlayout.com is straightforward, you can't ask for better examples or explanation. Not even MDN is so clear.