Next Generation CSS Design with PostCSS and CSSNext

Learn how to work with PostCSS and CSSNext. Discover how to create a single-page site that uses cutting-edge CSS features while maintaining compatibility with older browsers.

Introduction

• Welcome
• What you should know
• Using the exercises for this course

1. Getting Started

• What you'll build
• How PostCSS and CSSNext work
• Organizing your CSS into partials
• Creating variables
• Using custom selectors
• Advanced pseudo-classes
• Variables with reduced calculations

2. Headers and Footers

• Working with flexbox layouts
• Nesting CSS rules
• Creating property groups
• Custom media queries
• Nesting flexbox layouts
• Using color functions
• Finishing your footer

3. Featured Content

• Setting up a mobile layout
• Making your features responsive
• Alternating layouts
• Adding animation
• Hacking SVGs
• Adding videos
• Triggering animations

Conclusion

• Next steps