Lessons:18Length:2.4 hours
2.1 Setup, Import Design, and Configure Preferences
Let’s get the ball rolling with a quick look at the desktop, web and editor plugin versions of Avocode, as well as the settings you might want to change. We’ll also see how to import our Adobe XD design ready for coding.
Related Links
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
