Skip to main content

Advanced Modern CSS Masterclass

Manuel Matuzović

Your instructor
Manuel Matuzović

Workshop includes:

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

Unfortunately, this workshop is fully sold out! But you can join the waiting list in case a ticket becomes available:


Workshop, 5×2h + Q&A Mon & Tue, June 24 – July 2 2024
09:00 – 11:30 AM PT 18:00 – 20:30 CET Check your time zone

clamp, :is, :where, min, max, lab, lch, oklab, oklch, cascade layers, container queries, logical properties, has, svh, dvh, lvh, font-pallets, subgrid… The amount of changes and new features we have seen in CSS the last few years is quite impressive.

In this workshop, Manuel will teach you how these features work, in what cases you can best use which option, what the best tools are, and much more.


Here’s What You Should Be Expecting:

  • Interactive live sessions

    5 × 2.5h live sessions

  • Practical insights

    From testing tools to integrating accessibility testing

  • 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


If you are looking to improve your workflow and output with modern, scalable and maintainable CSS, this workshop is perfect for you. Manuel will teach you how to holistically look at your situation, decide on the best possible solution, and learn new features along the way. The end result is a lot of new knowledge, and much more confidence in your own skill set.

Join Manuel for 5 deep-dive sessions on CSS, and learn how to become more productive — together!

What Will Attendees Learn In This Workshop?

  • How to manage specificity with the help of cascade layers, :is(), and :where().
  • New colour spaces and functions and their differences
  • How to reduce the dependency of JavaScript for layout.
  • Using custom properties to create scalable systems.
  • New functions in CSS such as min(), max(), clamp().
  • How to use container queries to create truly responsive components.
  • The benefits of using logical properties and what they are.
  • Creating flexible layouts using Grid and math functions in CSS.
  • New pseudo-classes such as :has.
  • Improving UX with view transitions. 
  • Applying the progressive enhancement principle.
  • Using and tweaking color fonts.
  • Native nesting.

Who Is This For?

This is a full workshop, delivered in five 2.5-hour long sessions with lots of time for Q&A. It’s for web developers (front-end and back-end), UI designers and for anyone who has at least a basic understanding of HTML and CSS.


About Manuel Matuzović

Manuel Matuzović is a freelance front-end developer, auditor, teacher, and consultant who’s passionate about HTML and CSS. He writes about accessibility, HTML, and CSS on his personal blog matuzo.at and htmhell.dev.

Time & Schedule

This workshop is split over five days. The workshop sessions will run on the following days:

  • Mon, June 24, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Tue, June 25, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Wed, June 26, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Mon, July 1, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Tue, July 2, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

Day 1 — CSS Setup

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

9:00 AM – 11:00 AM

  • Setting up a system with custom properties
  • Registering custom properties
  • Structuring CSS in layers
  • Managing specificity using cascade layers, :where, and :is

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

Day 2 — Colors and Logical Properties

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

9:00 AM – 11:00 AM

  • Modern color spaces and functions
    • hsl, hwb, lab, lch
    • Difference between lab/lch and oklab/oklch
    • New notations for existing function
    • Relative color syntax
  • Logical properties

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

Day 3 — Layout and Math Functions

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

9:00 AM – 11:00 AM

  • Using grid and math functions for layout
    • Subgrids
    • Masonry layouts
  • min, max, and clamp
  • Writing responsive components using container queries

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

Day 4 — View Transitions, Container Style Queries, Viewports, and :has

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

9:00 AM – 11:00 AM

  • Advanced usage of custom properties with container style queries
  • View transitions
  • Viewport units
  • The :has pseudo class

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

Day 5 — Misc + Cutting Edge

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

9:00 AM – 11:00 AM

  • Color fonts and palettes
  • Nesting
  • Introduction to scroll driven animations
  • Introduction to scoping

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


Unfortunately, this workshop is fully sold out! But you can join the waiting list in case a ticket becomes available:


x