We can understand CSS layout as a system, and rather than poke around using trial and error to do layout, learn the rules that control this system saving a lot of time and enabling more elegant and performant layouts.

This understanding will make choices such as “should I use Grid or Flexbox” or “what do I do about old browsers” much easier, in fact sometimes the answer will be so obvious, you’ll not need to ask those questions!

Who Is This For?

This workshop is for front-end and full-stack developers. If you love CSS already, you will enjoy gaining a deeper understanding of the language. If writing CSS is not your favourite thing, then you’ll come away with a better understanding of how things work, and the ability to treat CSS in the same way you treat other languages.

Even if you don’t leave loving CSS, you will leave being able to do the parts of your job that involve CSS in a faster and better way.

This workshop is also structured to make it as easy as possible for you to share what you have learned with your team. If part of your job is to help other team members with their CSS, you’ll find you have better ways to explain things to them.

We Will Cover

• The basic design principals behind CSS
• What is the display property really, and how has it changed?
• Formatting contexts
• Multi-column Layout
• Fragmentation
• Grid Layout — including subgrid
• Flexbox
• Sizing, alignment and writing modes
• Developing robust fallbacks for browsers without support
• Feature Queries
• Media Queries — including the new features in Media Queries level 4 such as pointer detection and prefers color scheme
• The contain property — using CSS to improve performance
• Using DevTools to understand and debug layouts

Rachel will also be happy to answer specific questions you might have along the way.

As the workshop is split over two days, we will spend day one looking at some of the key things you need to know to use modern CSS layout. On day two we’ll think about how we actual use these skills in practice — covering browser support, conditional CSS with media and feature queries and more.

Register for this workshop →

What Do You Need To Bring?

A laptop, with an up-to-date copy of Chrome and Firefox and your favorite CSS editor.

About Rachel Andrew

Rachel Andrew is a front- and back-end web developer, author and speaker. Author or co-author of 22 books including The New CSS Layout and a regular contributor to a number of publications both on and offline.

Rachel is co-founder of the CMS Perch and Notist, Editor-in-Chief of Smashing Magazine, a Google Developer Expert and an Invited Expert to the CSS Working Group. She writes about business and technology on her own site at rachelandrew.co.uk.

Time & Schedule

This workshop is split over two days. Our virtual doors open at 8:45, we start at 9 AM PT.

The workshop sessions will run on the following days:

• Tue, February 16, 09:00 – 11:30 AM PT
• Wed, February 17, 09:00 – 11:30 AM PT

Day 1: Modern CSS Layout

8:45 AM PT
Virtual doors open, registration, chat and introduce yourself

9:00 AM – 11:00 AM
Day 1 material, Modern CSS layout: display, Grid and Flexbox, sizing.

11:00 AM – 11:30 AM
Q&A with Rachel on the day’s material. Chat with each other.

Day 2: Using your CSS Skills

8:45 AM PT
Virtual doors open, registration, chat, what was most useful yesterday?

9:00 AM – 11:00 AM
Day 2 material, Using your CSS skills: fallbacks, conditional CSS, performance, DevTools.

11:00 AM – 11:30 AM
Q&A with Rachel on the day’s material. Chat with each other.