Introduction to Transitions & Micro-interactions: CSS Responsive Design & Animations | EdLight Code

CSS Responsive Design & AnimationsIntroduction to Transitions & Micro-interactions

8 / 21In progressIn progress

CSS Responsive Design & Animations

Course Progress0/21

1

Responsive Foundations

Introduction to Responsive Foundations
Media Queries Basics
Responsive Font Sizes
Responsive Images
Container Max-width & Centering
Layout Breakpoints
Capstone: Responsive Page

2

Transitions & Micro-interactions

Introduction to Transitions & Micro-interactions
Hover Transitions
Accessible Focus Styles
CSS Transform
Button Press Effect
Reduced Motion Preference
Capstone: Interactive Card

3

Animations

Introduction to Animations
Keyframes Basics
Loading Spinner
Fade In Animation
Animation Timing
Staggered Animations
Capstone: Animated Hero Section

CSS Responsive Design & Animations

Course Progress0/21

1

Responsive Foundations

Introduction to Responsive Foundations
Media Queries Basics
Responsive Font Sizes
Responsive Images
Container Max-width & Centering
Layout Breakpoints
Capstone: Responsive Page

2

Transitions & Micro-interactions

Introduction to Transitions & Micro-interactions
Hover Transitions
Accessible Focus Styles
CSS Transform
Button Press Effect
Reduced Motion Preference
Capstone: Interactive Card

3

Animations

Introduction to Animations
Keyframes Basics
Loading Spinner
Fade In Animation
Animation Timing
Staggered Animations
Capstone: Animated Hero Section

Loading lesson…

Loading lesson…