CSS Media Queries and Responsive Design
4 Topics
Responsive Design Principles
5 Sub-topics
Responsive Design Principles
Mobile-First vs Desktop-First
Media Types (screen, print, all)
Width and Height Queries
7 Sub-topics
Combining min and max Width
Device and User Preference Queries
7 Sub-topics
Hover and Pointer Queries
prefers-color-scheme Query
prefers-reduced-motion Query
prefers-reduced-transparency
Media Query Best Practices
6 Sub-topics
Range Syntax in Media Queries
Logical Operators (and, or, not)
Common Breakpoint Strategies
Content-Based Breakpoints
Transition Properties
13 Sub-topics
Introduction to CSS Transitions
transition-property Property
Transitioning Specific Properties
transition-duration Property
transition-timing-function Property
cubic-bezier() Custom Timing
transition-delay Property
transition Shorthand Property
Transition Techniques
5 Sub-topics
Properties That Can't Transition
Transition Performance
5 Sub-topics
Transition Events in JavaScript
Common Transition Patterns
Keyframe Animations
5 Sub-topics
Introduction to CSS Animations
Animation Properties
14 Sub-topics
animation-duration Property
animation-timing-function Property
animation-iteration-count Property
animation-direction Property
animation-direction: alternate
animation-fill-mode Property
forwards and backwards Values
animation-play-state Property
animation Shorthand Property
Animation Techniques
7 Sub-topics
Animation Performance Tips
Animations and Accessibility
Respecting Reduced Motion
Common Animation Patterns – Part 1
Common Animation Patterns – Part 2