Skip to main content

Pushing CSS to The Limit

Amit Sheen
Your instructor
Amit Sheen
Tickets
Get a ticket

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

Workshop, 4×2h + Q&A Wed & Thu, May 25 – June 2 2022
09:00 – 11:30 AM PT 18:00 – 20:30 CET Check your time zone ⏰

Let’s take a deep dive into the world of perspective and movement, and open ourselves to a new dimension (literally) of CSS. This is a fully ‘Hands-on’ workshop, where we learn how to harness the power of CSS to add depth to our elements and spice up our designs with animated 3D buttons, menus, info cards, interactions, text and titles, and more…

This comprehensive workshop covers everything from the very basic concepts, to complex moving structures, step by step, with detailed breakdowns for each major topic, great sample projects, and tons of live coding.


In this workshop you’ll learn:

  • Understanding the concept of perspective in CSS
  • Manipulating and placing elements in a 3D environment
  • 3D construction methods
  • The power of pseudo-elements
  • CSS animations, keyframes, and timing functions
  • How to use 3D animations and stay performant
  • Adjust animations to a responsive layout
  • Using user inputs and mouse position
  • Accessibility — Concerns and solutions
  • ‘Bonus’ — Using JS to control animations (basic use only)
  • Plus, the workshop will also include learning about Chiaroscuro (Lighting and shading) with CSS, advanced use of custom properties, working with advanced sass features, and more.

$400 .00 Register for this workshop → 4 × 2h live sessions + Q&A. May 25 – June 2.
With all video recordings & slides. Get a ticket.

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

Who is this workshop for?

This workshop is aimed for front-end and full-stack developers of all levels, who use CSS in their day to day, and want to advance their skills and knowledge on animations and perspective in CSS.

No need for prior knowledge or experience in animations, we will go over everything from scratch. Only basic knowledge of CSS is needed, and basic understanding of SCSS.

About Amit Sheen

Amit is an experienced web developer, doing mainly front-end, specializing in CSS, animations, and creative coding.

Amit has spent the last few years researching and exploring the boundaries of CSS, carefully learning its 3D capabilities and animation options, and using it to create countless spectacular 3D animations that are frequently featured on some of the most respectable websites and newsletters.

What do you need to bring?

This is an online workshop, so you’ll need a computer (desktop or laptop) with a good internet connection (this is important), and a basic camera and mic to interact with. The computer needs to have an up-to-date copy of Chrome (Firefox will work too) and a (free tier) CodePen account.

A secondary monitor, although not required, will definitely help you if you want to experiment with the code during the workshop.

But most importantly, do not forget to bring your imagination, and the desire to create something amazing.

Time & Schedule

This workshop is split over four days. Our virtual doors open at 8:45, we start at 9 AM PT.

The workshop sessions will run on the following days:

  • Wednesday, May 25, 09:00 – 11:30 AM PT
  • Thursday, May 26, 09:00 – 11:30 AM PT
  • Wednesday, June 1, 09:00 – 11:30 AM PT
  • Thursday, June 2, 09:00 – 11:30 AM PT

You can always re-watch the sessions at a more convenient time and follow the webinar at your own pace.

Day 1 — Let’s get some perspective

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

9:00 AM – 11:00 AM
Perspective and the 3D environment: Basic concept of Perspective, Transform functions, 3D Methods, and pseudo-elements.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 2 — Let’s get things moving

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

9:00 AM – 11:00 AM
Animation and transforms: Understanding keyframes, multi-step transforms, timing functions and Cubic-bezier.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 3 — Let’s take control

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

9:00 AM – 11:00 AM
Interacting with animations: Letting the user control the animation with user inputs and mapping the mouse position.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

Day 4 — Let’s put it all together

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

9:00 AM – 11:00 AM
A full project live coding, from scratch, using multiple elements and multiple animations, with user interaction, and JS control.

11:00 AM – 11:30 AM
Q&A with Vitaly on the day’s material. Networking!

$400 .00 Register for this workshop → 4 × 2h live sessions + Q&A. May 25 – June 2.
With all video recordings & slides. Get a ticket.

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