← Back to Home

Week 06 - CSS Animations & Advanced

Reference files for the live-coding demos, in teaching order. Open any example and use View Source (right-click → View Page Source) to read the code — then rebuild it yourself.

▶  Open the Interactive Slides

1. CSS Transitions

Smooth property changes on hover

2. CSS Transforms

Rotate, scale, skew, translate

3. CSS Animations

Keyframe animations

4. Responsive Design

Media queries in action

Tip: don't copy-paste. Type the code yourself, break it on purpose, then fix it. Use DevTools (F12) to inspect what's happening.