Emotion topics
12 short topics in HTML CSS and Accessibility. Each one is a single focused exercise with a clear piece of evidence at the end.
12 topics, one exercise each.
Work through them in order, or jump to the one you need.
These are draft topic outlines (draft; instructor review pending). Full lessons follow after review; ask Ajay if you need a topic sooner.
- 01
Style transformation pipeline
Demonstrate style transformation pipeline in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 02
Parser and syntax boundaries
Demonstrate parser and syntax boundaries in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 03
Plugin order and compatibility
Demonstrate plugin order and compatibility in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 04
Selector and declaration transforms
Demonstrate selector and declaration transforms in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 05
Generated-output inspection
Demonstrate generated-output inspection in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 06
Source-map preservation
Demonstrate source-map preservation in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 07
Build integration
Demonstrate build integration in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 08
Environment target configuration
Demonstrate environment target configuration in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 09
Repeated-transform correctness
Demonstrate repeated-transform correctness in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 10
Custom transformation extensions
Demonstrate custom transformation extensions in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 11
CSS output size analysis
Demonstrate css output size analysis in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course → - 12
Transformation upgrade regression checks
Demonstrate transformation upgrade regression checks in a focused Emotion example; verify normal behavior and one edge or failure case. Keep the exercise bounded and record the behavior supported by the chosen version.
Open micro-course →
Learn the same ideas beyond Emotion.
These courses share topics with this one, so you can compare how each language or tool handles the same concept.
More in CSS UI and design systems.
You have the curiosity.
Let’s turn it into capability.
Start with a practical workshop or bring a specific question to Ajay.