Pushing CSS to The Limit
- Your instructor
- Amit Sheen
- Workshop includes:
- 🔖 Examples to take away
- 🗣 Interactive sessions
- 📺 Workshop recordings
- 🎤 Dedicated Q&A time
- 🏅 Smashing Certificate
Workshop, 4×2h + Q&A • Wed & Thu, Nov 2–10 2022
09:00 – 11:30 AM PT• 18:00 – 20:30 CET • Check your time zone ⏰
Note on timings: If you’re joining us from outside the US, please note that due to Daylight Savings in some places, start times will be earlier on Week 1 than Week 2. Check timings for week 1 and timings for week 2.
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.
Here’s What You Should Be Expecting:
Interactive live sessions
4 × 2.5h live sessions
Practical insights
From 3D perspective to CSS animation
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
$400 .00
With all video recordings & slides.
🎪 Save up to 25% on this workshop with a Smashing Membership.
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
With all video recordings & slides.
🎪 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, November 2, 09:00 – 11:30 AM PT
- Thursday, November 3, 09:00 – 11:30 AM PT
- Wednesday, November 9, 09:00 – 11:30 AM PT
- Thursday, November 10, 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
With all video recordings & slides.
🎪 Save up to 25% on this workshop with a Smashing Membership.