CSS Layout Tutorial: From Classic Approaches to the Latest Techniques


Front-End Development

Mastering web layout without mastering CSS is about as feasible as learning to swim on dry land. But unlike swimming – which, once mastered, is a skill that remains with you for life – mastering CSS is a process that never really ends since CSS itself is continually evolving.

The challenge is aggravated by differences in CSS implementation and support across different browsers (and even across different versions of the same browser), as well as different rates of adoption of CSS recommendations. For well over a decade, web designers and developers have been grappling with sporadic and inconsistent bursts of additional CSS3 features being supported in each new browser version.

But be that as it may, mastering CSS is an absolute necessity for any solid web designer or developer. There are so many different articles on the web considering this issue. But I found the one that stands out the most. CSS Layout Tutorial by Laureano Martin Arcanio is a great example of how all tutorials should be.

He defines a problem and solves in using many different user cases like CSS Tutorial Using Classic CSS2 Techniques using fixed positioning or default (Static) positioning. Later on Leveraging CSS3 and describing calc() functions, flexbox layouts and even CSS3 Grid layout which already becomes more and more popular and gets supported by all browsers latest versions.

CSS3 Flexbox Layout

Mastering these techniques and paradigms – both for CSS2 and CSS3 – is essential to leveraging all that CSS has to offer in order to optimize both the user’s experience and the quality of your code. This article really just represents the tip of the iceberg of all there is to learn and all that can be accomplished with the power and flexibility of CSS. Have at it!