Lessons: 19Length: 2 hours
Media queries are a powerful way to limit the scope of your CSS styles. In this course, you'll learn the magic behind media queries as you turn them inside-out and discover all that can be done with them. Craig Campbell will walk you through practical examples as he teaches you the true potential of many under-used features of CSS media queries.
1.Introduction
1.1Introduction01:25
1.1
Introduction
01:25
1.2What are Media Queries?05:18
1.2
What are Media Queries?
05:18
2.Media Query Basics
2.1Viewport Width04:03
2.1
Viewport Width
04:03
2.2Simplifying Designs for Print10:09
2.2
Simplifying Designs for Print
10:09
2.3HTML and CSS Media Queries08:38
2.3
HTML and CSS Media Queries
08:38
2.4Introduction to Media Types03:31
2.4
Introduction to Media Types
03:31
3.Using Widths
3.1Max-Width Media Queries11:02
3.1
Max-Width Media Queries
11:02
3.2Resizing Content Based on Width07:58
3.2
Resizing Content Based on Width
07:58
3.3Styling the Menu11:04
3.3
Styling the Menu
11:04
3.4Creating a Menu Button05:46
3.4
Creating a Menu Button
05:46
3.5Making the Menu Animate08:49
3.5
Making the Menu Animate
08:49
3.6Logical Operators05:25
3.6
Logical Operators
05:25
4.Other Media Features
4.1Resolution Features04:16
4.1
Resolution Features
04:16
4.2Orientation and Aspect Ratio09:54
4.2
Orientation and Aspect Ratio
09:54
4.3More Media Features04:03
4.3
More Media Features
04:03
4.4Animating on Breakpoints03:42
4.4
Animating on Breakpoints
03:42
5.Conclusion
5.1Targeting Older Browsers07:57
5.1
Targeting Older Browsers
07:57
5.2The Future of Media Queries07:18
5.2
The Future of Media Queries
07:18
5.3Final Thoughts00:43
5.3
Final Thoughts
00:43
