Skip to main content

Level-Up With Modern CSS

Stephanie Eckles

Your instructor
Stephanie Eckles

Workshop includes:

  • 🔖  Examples to take away
  • 🗣  Active participation
  • 🎁  Workshop recordings
  • 🏅  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, 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.

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)

Schedule

All five sessions will follow the same format:

Day 1 — Setup + Color Design Tokens

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

9:00 AM – 11:00 AM

  • Introductions
  • Discuss what “modern CSS” means to level-set participants
  • Review project starter environment
    • Eleventy with Sass, autoprefixer, stylelint
  • Begin theme system/setup initial design tokens
    • Cover CSS custom properties vs Sass variables
    • Create Sass theme mixins/functions
    • Include color contrast checking
    • Create overview page to preview colors
  • Create reset styles

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

Day 2 — Modern CSS Layout with Grid

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

9:00 AM – 11:00 AM

  • Discussion/overview of CSS Grid
    • Difference from flexbox
    • When to use
  • Create CSS Grid Utilities
    • Learn about special units/functions (fr, minmax, repeat, etc)
  • Create page layout structures
    • “Holy grail”
    • Dashboard
    • Blog

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

Day 3 — Typography and Navigation

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

9:00 AM – 11:00 AM

  • Fluid Typography
    • Create a type scale using clamp()
  • Define rules for content typography
  • Create variations of a navbar layout
    • Learn why flexbox (usually) has the edge in this scenario

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

Day 4 — Images, Buttons, and Cards

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

9:00 AM – 11:00 AM

  • Image utilities
    • Style rules for modern responsive images
    • Accessibility notes about images
  • Grid-based hero components
    • More practice with grid areas and positioning
  • Button styles
    • Inclusive of buttons and button-styled links
    • Discuss accessibility across states
    • Flexibility to add icons or create as icon-only
  • Card patterns
    • Create composable card layouts

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

Day 5 — Form Inputs, Landing Page Design, Accessibility Testing, and Production Readiness

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

9:00 AM – 11:00 AM

  • Accessible, semantic form inputs
    • Prepare styles and semantic HTML for
    • Text inputs/Textfields
    • Radio buttons
    • Checkboxes
    • Selects
  • Bring together all the lessons and the components to create a landing page design
    • Discuss additional things about semantics, accessibility, and extending the framework’s theme system
    • Note opportunities to scale or modify the system
    • Progressive enhancement - using the most cutting edge features today (aspect-ratio, :is(), etc)
    • Include responsive design considerations
  • Modern CSS design flourishes
  • Review accessibility testing
  • Prepare styles for production

11:00 AM – 11:30 AM
Q&A with Stephanie 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