Skip to main content

The CSS Layout Masterclass

Rachel Andrew
On the web
rachelandrew.co.uk
On Twitter
@rachelandrew
Tickets
Get a ticket

Workshop includes:
  • Working examples to take away
  • Interactive sessions
  • Workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Workshop, 2×2h + Q&A • Thu & Fri, June 11–12
10 AM– 12:30 PM CEST (Central European Time)

We’ve been learning CSS and CSS for Layout in the same way since we broke free of table-based layouts in 2001, however CSS has grown-up and over the last few years a proper and consistent system for layout has emerged.

In this all-new workshop, Rachel will take you through this new system for layout, giving you the ability to properly understand and use CSS Layout with real understanding of why things behave as they do.


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!

🌏 People loved this workshop so much we’re running it again, this time at a more friendly time for our friends in Europe and Asia.

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. In 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 9:30, we start at 10 AM CEST.

The workshop sessions will run on the following days:

  • Thu, June 11, 10:00 AM – 12:30 PM CEST
  • Fri, June 12, 10:00 AM – 12:30 PM CEST

Time around the world

We've chosen earlier timings for our friends in Europe and Asia Pacific, and night cats in the Americas.

London 9:00 – 11:30 AM
Amsterdam 10:00 – 12:30 AM
Mumbai 1:30 – 4:00 PM
Singapore 4:00 – 6:30 PM
Sydney 6:00 – 8:30 PM

Thu, June 11: Modern CSS Layout

9:45 AM CEST
Virtual doors open, registration, chat and introduce yourself

10:00 AM – 12:00 AM
Day 1 material, Modern CSS layout: display, Grid and Flexbox, sizing

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

Fri, June 12: Using your CSS Skills

9:45 AM CEST
Virtual doors open, registration, chat, what was most useful yesterday?

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

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

Register for this workshop →