The CSS Layout Workshop
Learn CSS layout with straightforward and practical examples. Banish layout confusion for good.
Does this sound familiar?
- I love designing a site, but then find I have to compromise the design when it comes to building it with CSS.
- My approach to building layouts is to try things, reload and see what happens.
- I use a framework to do my layouts. I’d love to know what it is really doing under the hood.
- Once I get my CSS working I’m afraid to make changes in case it all falls apart again!
- I’ve never really understood why margins collapse.
- Should I be using Flexbox or floats? What about these newer methods such as Grid and Shapes?
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.
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.
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.
The selectors in the CSS Level 3 Selectors specification are powerful and well supported by browsers. In order to truly master CSS layout we need to have a good understanding of how to select parts of our document.
Understand length units in CSS. Relative units such as
rem, the viewport units
vmax, and absolute units such as
pt. Which should you use, and why?
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.
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.
How to use absolute, relative and fixed positioning.
Introduction to stacking content in CSS and the
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
Getting Started with Flexbox
A beginners guide to flexbox, you will learn how to build UI elements such as navigation and cards.
Getting Started with Grid Layout
The basics of CSS Grid Layout, get started defining grid and doing simple line-based positioning, naming lines and using grid template areas.
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.
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.
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.
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.
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.
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.