Level-Up With Modern CSS

Stephanie Eckles

Your instructor: Stephanie Eckles

Workshop includes:

Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:

Workshop, 5×2h + Q&A • Mon & Tue, July 11–25 2022
09:00 – 11:30 AM PT (18:00 – 20:30 CET ) • Check your time zone ⏰

Modern CSS has significantly improved available CSS properties and layout behavior, with modern browsers nearly in-sync for critical feature support. But — if you haven’t looked into CSS in a while, or have typically relied on frameworks to do the heavy lifting, it can seem overwhelming to figure out how to level-up your CSS skills!

Throughout this workshop, we’ll create our own CSS framework to learn about what modern CSS has to offer us.

Here’s What You Should Be Expecting:

Interactive live sessions
5 × 2.5h live sessions

Practical insights
From file setup to handoff

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

You’ll take away a reference for common layout patterns, and create flexible, extendable samples of UI components. Everything we cover will be practical examples that leverage modern CSS to upgrade them from older solutions.

All styles created will have support across the major modern browsers, so you can immediately use them in your current projects. This workshop will also emphasize writing accessible styles, and we’ll discuss what that means and learn how to test for compliance.

The workshop format is primarily a ‘show-and-tell’ with many practical examples. Although there will be some time for coding yourself, this is not a ‘code-along’ type of workshop.

🧕🏻👨🏻‍🦱👩🏽🤱🏾 Together with Stephanie, we are providing scholarship tickets to four underrepresented people in tech. Are you an underrepresented person in tech and would like to join us free of charge? Fill in our form and we’ll let you know if you are one of the lucky ones selected!

Video Message From Stephanie

A short introduction to the class by Stephanie herself.

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

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

What Will Attendees Learn In This Workshop?

Modern CSS properties and layout behaviors such as CSS grid, CSS custom properties, clamp, focus-within, and so many more!
To set up a themable system to enable extending our new framework across multiple projects.
How to ensure your styles and components are accessible not just today, but also as your styles grow.
To do a lot with a little for ultimate performance thanks to modern CSS allowing us to create intrinsically responsive layouts with minimal properties.
A modern toolchain as we use Eleventy as our static site generator (an upgrade/replacement for tools like Gulp), Sass to provide additional styling flexibility, stylelint for CSS linting, and a few others to help make our styles production ready!
The “why” behind each styling decision to help you take your new knowledge beyond the workshop and be prepared to tackle future CSS challenges, including debugging and making scalable style decisions.

Who Is This For?

This workshop is for anyone who has foundational CSS knowledge that they want to upgrade. You’ll gain skills in creating new components, flexible layout utilities, and scalable, accessible solutions.

Spoiler: You will learn a lot about CSS grid and custom properties ;)

About Stephanie Eckles

Stephanie Eckles is a front-end focused SWE at Microsoft. She’s also the author of , author of ModernCSS.dev which provides modern solutions to old CSS problems as in-depth tutorials, and is the creator of StyleStage.dev, and author of SmolCSS.dev and 11ty.Rocks.

Steph has over 15 years of webdev experience that she enjoys sharing as an author, egghead instructor, and conference speaker. Her most recent working experience has largely involved leading and co-creating enterprise design systems. She’s an advocate for accessibility, scalable CSS, and the Jamstack (especially Eleventy). Offline, she’s mom to two girls and a cowboy corgi, and enjoys baking.

Time & Schedule

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

Mon, July 11, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Tue, July 12, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Mon, July 18, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Tue, July 19, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Mon, July 25, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

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

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

Schedule

All five sessions will follow the same format: