Lessons:18Length:2.4 hours
3.6 Responsive Panel Adjustment
Now it’s time to finalize our typography panels by making them responsive. We’ll build on the media queries we set up earlier, and you'll see just how helpful CSS variables can be in efficiently handling layout adjustments.
1.Introduction
1.1Welcome to the Course01:07
1.1
Welcome to the Course
01:07
2.Preparation and Basics
2.1Setup, Import Design, and Configure Preferences11:27
2.1
Setup, Import Design, and Configure Preferences
11:27
2.2Export Images14:36
2.2
Export Images
14:36
2.3Create CSS Variables10:08
2.3
Create CSS Variables
10:08
2.4Base Code: HTML Shell and CSS Variables03:46
2.4
Base Code: HTML Shell and CSS Variables
03:46
2.5Basic Layout and Background Color05:32
2.5
Basic Layout and Background Color
05:32
3.Welcome and Typography Panels
3.1Create a 16:9 Image Panel04:46
3.1
Create a 16:9 Image Panel
04:46
3.2Add the Panel 1 Content Tile16:50
3.2
Add the Panel 1 Content Tile
16:50
3.3Make Panel 1 Responsive08:40
3.3
Make Panel 1 Responsive
08:40
3.4Typography and Panels 2–513:06
3.4
Typography and Panels 2–5
13:06
3.5Links and Buttons08:11
3.5
Links and Buttons
08:11
3.6Responsive Panel Adjustment04:57
3.6
Responsive Panel Adjustment
04:57
4.Responsive Double-Column Panels
4.1Quick Panel 6 Setup04:12
4.1
Quick Panel 6 Setup
04:12
4.2Set Up a Scalable Tablet Image With a Low File Size11:08
4.2
Set Up a Scalable Tablet Image With a Low File Size
11:08
4.3Make Panel 6 Responsive06:08
4.3
Make Panel 6 Responsive
06:08
4.4Set Up Panel 7 With a Clipped Laptop Image10:56
4.4
Set Up Panel 7 With a Clipped Laptop Image
10:56
4.5Quick Footer02:06
4.5
Quick Footer
02:06
5.Conclusion
5.1Wrapping Up04:41
5.1
Wrapping Up
04:41
