Skip to main content

Scalable CSS Masterclass

Andy Bell
Your instructor
Andy Bell
Tickets
Get a ticket ↓

Workshop includes:

  • 🔖  Examples to take away
  • 🗣  Interactive sessions
  • 📺  Workshop recordings
  • 🎤  Dedicated Q&A time
  • 🏅  Smashing Certificate

Workshop, 5×2h + Q&A Thu & Fri, May 9–23 2024
09:00 – 11:30 AM PT (Pacific Time) 18:00 – 20:30 CET

CSS is amazing, and lots of people love it. However, one of the most heard complaints is how it doesn’t scale for larger projects. This is especially the case for developers that tend to focus on other parts of projects, rather than the front-end.

In this workshop, Andy Bell is going to teach you how to go about scaling CSS, based on years of experience working on huge, yet still very maintainable codebases.


Here’s What You Should Be Expecting:

  • Interactive live sessions

    5 × 2.5h live sessions

  • Practical insights

    From methodology and workflow to creation

  • Hands-on exercises

    With reviews by your teacher

  • Life-time access

    To all video recordings and examples

  • Dedicated Q&A time

    To ask all your questions

  • Smashing Certificate

    A well-deserved reward for your work


CSS is infinitely scalable! Many people believe that CSS doesn’t scale, but this is often because they haven’t explored the most efficient ways to write and document CSS, or taken advantage of the modern CSS features, modern browsers, the cascade, and specificity.

The magic of this workshop is that the knowledge you learn will be applicable to projects of all shapes and sizes; not just large projects. You’ll benefit if you’ve written CSS for years, only just started or barely touched CSS as part of your day job but you’re keen to skill up.

You’ll learn loads of CSS while also gaining knowledge Andy learned in the years building these large projects, both making mistakes and delivering quality work.

$450 .00Register for this workshop →5 × 2h live sessions + Q&A. May 9–23.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.

Who Is This For?

This is a full workshop, delivered in five 2-hour long sessions with lots of time for Q&A. It’s for designers and developers. To follow along, you should have a fundamental understanding of HTML and CSS.

You’ll walk away from this workshop with a solid foundation about how to plan, execute, and maintain a large CSS codebase in your organization.

What you’ll learn

  • How to approach any sized CSS build, fearlessly
  • Planning and strategy techniques
  • Communication techniques
  • How to provide meaningful feedback to designers
  • Documentation skills
  • A completely flexible mental model while authoring CSS
  • Better, more effortless decision-making
  • Real world tricks that make scaling CSS easier
  • Progressive enhancement

If you want to see the complete schedule, scroll to the day-by-day overview.

$450 .00Register for this workshop →5 × 2h live sessions + Q&A. May 9–23.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.

About Andy Bell

Andy Bell is a designer and front-end developer from the UK who founded Set Studio. He's worked in the design and web industries for over 15 years, and in that time, has worked with some of the largest organisations in the world like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

In that time, he's worked on both extremely large projects for huge organisations and tiny projects for small startups, allowing him to refine his CSS authoring processes and also share that knowledge by co-authoring Every Layout and the web.dev Learn CSS course.

Time & Schedule

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

The workshop sessions will run on the following days:

  • Thu, May 9, 09:00 – 11:30 AM PDT (18:00 – 20:30 CET)
  • Fri, May 10, 09:00 – 11:30 AM PDT (18:00 – 20:30 CET)
  • Thu, May 16, 09:00 – 11:30 AM PDT (18:00 – 20:30 CET)
  • Fri, May 17, 09:00 – 11:30 AM PDT (18:00 – 20:30 CET)
  • Thu, May 23, 09:00 – 11:30 AM PDT (18:00 – 20:30 CET)

Day 1: Getting Started & CSS Core Concepts

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
A primer on core CSS concepts such as the cascade, specificity, custom properties and layout. We’re gonna need these skills! After that, we dive into CUBE CSS to make sure all of us are up to speed.

11:00 am – 11:30 am
Q&A with Andy on the day’s material. Networking!

Day 2: Planning & Feedback

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
Scenario: you’ve been handed a Figma design and you don’t know where to start.

We learn about planning the build and generating feedback. There’ll be loads of oversights in the design that we’ll help each other to spot.

You’ll then learn how to provide constructive feedback to the designer who will make changes before our next session.

11:00 am – 11:30 am
Q&A with Andy on the day’s material. Networking!

Day 3: Planning

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:30 am
The feedback has been actioned and we’re almost ready to build. First up, there’s more planning to do.

We’re going to break the design up into pieces and map out global CSS, compositions, blocks and exceptions. We’ll also work out what is in the first pass and what details and flare we add in subsequent passes.

We’re also going to learn to map out documentation and patterns to keep our CSS codebase as maintainable and scalable as possible.

Day 4: Time To Write CSS

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
It’s time to write CSS! We’re going to have a session of live coding and discussion, tackling various stages of the CSS build. Get a nice cup of tea ready and get ready to ask questions as we go, rather than a Q&A session.

By the end of this session we’ll have the first pass of our CSS build done…or will we? Problems arise and I’ll teach you how to overcome them.

11:00 am – 11:30 am
Q&A with Andy on the day’s material. Networking!

Day 5: Composing It All Together

8:45 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
Solutions to problems are resolved, so we go back to some planning work because it’s important not to just plough on with code when your cards are down.

We also received some feedback from designers who haven’t quite grasped our multi-pass method. I’ll teach you how to effectively communicate with them to clear things up.

Lastly, we spend some time reflecting on how our methodology scales upwards for larger projects.

11:00 am – 11:30 am
Q&A with Andy on the day’s material. Networking!

$450 .00Register for this workshop →5 × 2h live sessions + Q&A. May 9–23.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.