The CSS Layout Masterclass

I’ve got an all-new workshop for 2020, and so far I have bookings for SmashingConf in San Francisco, Austin, and New York. I’d love to see you there.

I would also love to book some workshops in the UK and Europe. So, if you would like me to run a workshop at your conference, or visit your company to train people in-house – please get in touch.

Workshop details

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.

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.

In this all-new workshop I 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.

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.

  • 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

I will also be happy to answer specific questions you might have along the way, and for in-house workshops I can always tailor the material to make sure it reflects your needs in the company.

Leave a Reply