The CSS Layout Workshop

Learn CSS layout with straightforward and practical examples. A course designed to remove layout confusion for good!

Does this sound familiar?

This Course is for you.

I’m Rachel Andrew and I’ve been working with, writing and speaking about CSS layout since it first became a possibility. Let me share my knowledge with you in this comprehensive online, self-study workshop, based on material I’ve been presenting in person around the world.


We’ll be working with CSS. No frameworks, task runners or pre-processors. You’ll need a text editor, a web browser or two and a desire to really understand CSS. That said, we will ultimately look at how you take your knowledge into a modern world of web development, using all of the available tools. However your new knowledge will empower you to use tools to save you time and effort, allow you to assess the best fit for any project, rather than leaning on them to support a lack of CSS knowledge.

View a full Table of Contents and see what you could start learning today.

The Course

On this site you will find three sets of course material. The first, CSS Basics is a free course designed to show the format of the material and explain the concepts of selectors and length units that are needed in the rest of the course. Get started with the CSS Basics material.

Move on and purchase CSS Layout Fundamentals to develop solid modern CSS skills for the browsers of today, and continue your learning with my CSS Layout Advanced course to discover what is becoming possible now and in the very near future. A listing of what is included in each course is below.

Take a look at the FAQ if you have any questions or go right ahead and get started learning layout today.

CSS Basics

To be able to create great layouts we need to have an understanding of some basic CSS. The two modules on CSS Selectors and Length Units are offered free and make a good introduction to the Layout Fundamentals course as well as an example of the format of the other lessons.

CSS Layout Fundamentals

A course that will give you solid CSS Layout skills for today, and for the browsers from the past you still have to support.

Start learning now!

  • Introduction

    This course has very simple requirements. You’ll need a text editor and a web browser.

  • The Box Model

    The CSS Box Model explained. How to use the alternate box model. Learn how margins and padding work, and why margins collapse.

  • Positioning

    How to use absolute, relative and fixed positioning.

  • Stacking Content

    Introduction to stacking content in CSS and the z-index property.

  • Floats

    What are floats? How to float elements within content, create a navigation bar and use floats for layout.

  • The Display Property

    Using display block, inline and inline-block for UI elements and layout. The strengths and pitfalls of display:table.

  • Getting Started with Flexbox

    A beginners guide to flexbox, you will learn how to build UI elements such as navigation and cards.

  • Responsive Design

    Learn about Media Queries and fluid grids. We’ll create a responsive layout and also learn how best to use images in our responsive designs.

  • Browser Support

    Here we will cover cross-browser and device testing, along with techniques for using newer CSS without locking out peope with older browsers. Learn how to make good decisions as to when to embrace new CSS techniques.

  • Debugging CSS Layout Issues

    Common problems explained. Learn techniques for debugging issues in-browser and find out how to isolate problems in order to ask for help.

Advanced CSS Layout

We are in an exciting time for CSS Layout, things are changing rapidly and this course will bring you right up to date. Much of the material will be things you can use now - but we’ll also take a look at specifications that are just landing in browsers.

Start learning now!

  • Multiple Column Layout

    It’s be around for a while, but gets little attention. While limited there are some interesting use cases for this specification.

  • Advanced Flexbox

    Build on the work we did in the Fundamentals Course and learn how to work with Flexbox to create more complex user interface features and layouts.

  • CSS Shapes

    Break out of the box and learn how to use CSS Shapes to rid your designs of straight edges and square boxes.

  • CSS Grid Layout

    Coming to browsers soon is the CSS Grid Layout specification. Get to grips with a brand new way of doing layout.

  • Box Alignment

    The Box Alignment Specification brings the alignment properties of Flexbox to Grid Layout and Block Layout too. This is the vertical alignment module!

  • Other interesting new things

    Exclusions and Regions, and other emerging modules of relevance.

  • Keeping up to date

    Rounding up with some final thoughts on keeping up to date and contributing back to the web platform.

Take a look at the courses and join us today!