smashingconf.com Open in urlscan Pro
2a05:d014:58f:6202::1f4  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Skip to main content

 * 
 * 
 * 
 * 
 * 

 * Home
 * Workshops
 * Speakers
 * Software
 * Bundles 🏝️
 * Tickets


ADVANCED MODERN CSS MASTERCLASS

Your instructorManuel MatuzovićTicketsGet a ticket ↓

--------------------------------------------------------------------------------

Workshop includes:

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

Workshop, 5×2h + Q&A • Mon & Tue, Nov 27 – Dec 12 2023
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…How do
you feel when you read these terms? Confused? Interested? Excited? Overwhelmed?
Well, yeah, that’s how most of us feel. CSS has changed so much in the last few
years that it’s almost impossible to stay up-to-date.



--------------------------------------------------------------------------------


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

--------------------------------------------------------------------------------





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

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




2022 and 2023 were critical years for CSS. Browsers got together and began
shipping new features week after week almost simultaneously. While that’s good
news for us developers, keeping track of and adapting to those changes is
challenging.

Manuel Matuzović introduces you to the most useful modern features in CSS and
shows how you can implement them today in your code base to improve scalability,
maintainability, and productivity.


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 front-end developer who's passionate about HTML and CSS.
He works for the City of Vienna where he builds accessible frontends and
assesses the quality of sites built by others. He's a certified accessibility
expert, auditor, teacher and consultant. 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, November 27, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
 * Tue, November 28, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
 * Mon, December 4, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
 * Mon, December 11, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
 * Tue, December 12, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

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

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

--------------------------------------------------------------------------------


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.



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

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



With a commitment to quality content for the design community.

Smashing Media AG 2011-2023. Hosted on Netlify.

 * Code of Conduct
 * Contact us
 * Accessibility Statement
 * Scholarship & Volunteering
 * About us
 * Terms

--------------------------------------------------------------------------------

 * Smashing Meets
 * SmashingConf
 * Smashing Workshops

 * San Francisco 2022
 * Freiburg 2022
 * New York 2022
 * San Francisco 2023
 * Freiburg 2023
 * Antwerp 2023
 * Back to top ↑