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 Thu & Fri, July 8–22
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.


🧕🏻👨🏻‍🦱👩🏽🤱🏾 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.

$450.00 Register for this workshop → Five 2.5h live sessions + Q&A. July 8–22.
With all video recordings & slides. Get a ticket.

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


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:

  • Thu, July 8, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Fri, July 9, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Thu, July 15, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Fri, July 16, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
  • Thu, July 22, 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

  • Discuss what “modern CSS” means to level-set participants
    • Setup 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
    • Learn about Sass color functions
    • Include color contrast checking
    • Create theme 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
  • Grid-based hero components
    • Learn about grid areas and positioning

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

Day 3 — Typography, Navigation, and Form Inputs

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
    • Perf tips for using custom fonts
  • Create standard logo + navbar layout
    • Learn why flexbox (usually) has the edge in this scenario
    • Create an accessible dropdown menu
  • Accessible, semantic form inputs
    • Prepare styles and semantic HTML for
    • Text inputs/Textfields
    • Radio buttons
    • Checkboxes
    • Selects

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
    • Standard rule for responsive images
    • Learn difference between background-image: cover and object-fit: cover
    • Accessibility notes about images
    • Responsive image sizing with aspect-ratio
  • 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
    • Flavors TBD
    • Will be an opportunity to bring together lessons learned in the workshop so far

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

Day 5 — 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

  • 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
    • Improve text links with modern CSS properties
    • Stylize headlines with pseudo elements
    • Learn to use ::marker for list styles
    • Emphasize a CTA card with a gradient border-image
  • Review accessibility testing
  • Prepare styles for production
    • Add minification into build process
    • Review how to check build size

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

Register for this workshop →