Andrea D. Blog
Andrea, man, html operator, css dispeller, js runner, web lover.

...and definitely It steals the fish.

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.

learncss.com homepage


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:

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.