English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 37m | 534 MB
PostCSS—a CSS post-processor engine—transforms CSS with JavaScript, allowing you to work with the latest CSS features on older browsers. In this project-based course, learn how to work with PostCSS to create a realistic single-page site that uses cutting-edge CSS features while maintaining compatibility with older browsers. As Ray Villalobos explains how to tackle this project, he covers important concepts, such as how PostCSS and CSSNext work, how to keep your code organized by dividing your work into partials, and how to work with features like advanced pseudo-classes and custom property variables. Plus, he takes you through how to work with flexbox layouts, use color functions, set up a mobile layout, and add animations.
Topics include:
- Organizing your CSS into partials
- Creating variables
- Using custom selectors
- Working with flexbox layouts
- Setting up a mobile layout
- Making your features responsive
- Alternating layouts
- Adding animation
- Adding videos
Table of Contents
1 Welcome
2 What you should know
3 Using the exercises for this course
4 What you’ll build
5 How PostCSS and CSSNext work
6 Organizing your CSS into partials
7 Creating variables
8 Using custom selectors
9 Advanced pseudo-classes
10 Variables with reduced calculations
11 Working with flexbox layouts
12 Nesting CSS rules
13 Creating property groups
14 Custom media queries
15 Nesting flexbox layouts
16 Using color functions
17 Finishing your footer
18 Setting up a mobile layout
19 Making your features responsive
20 Alternating layouts
21 Adding animation
22 Hacking SVGs
23 Adding videos
24 Triggering animations
25 Next steps
Resolve the captcha to access the links!