Skip to main content

Level-Up With Modern CSS

Stephanie Eckles
On the web
thinkdobecreate.com/
On Twitter
@5t3ph
Tickets
Get a ticket

Workshop includes:
  • Working examples to take away
  • Numerous real-world examples
  • Dedicated worksheet
  • Interactive sessions
  • Workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Workshop, 5×2.5h + Q&A Tue & Wed, October 5–20 2021
09:00 – 11:30 AM PT (Pacific, US) 18:00 – 20:30 CET (Europe)

Modern CSS has increased and improved the available CSS properties and layout behaviors, 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 in order to learn about what modern CSS has to offer us.


You’ll take away a reference for common layout patterns, and create flexible, extendable samples of high-touch user interface 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 creating 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 .00 Register for this workshop → 5 × 2.5h live sessions + Q&A. October 5–20.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with 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 13 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:

  • Tue, October 5, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Wed, October 6, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Tue, October 12, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Wed, October 13, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Wed, October 20, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

$450 .00 Register for this workshop → 5 × 2.5h live sessions + Q&A. October 5–20.
With all video recordings & slides. Get a ticket.

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


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.

Register for this workshop →