Learn how to work with PostCSS and CSSNext. Discover how to create a realistic single-page site that uses cutting-edge CSS features while maintaining compatibility with older browsers.
- [Ray Voiceover] Hey there, this is Ray Villalobos. And in this course I'm going to teach you how to work with upcoming features of the CSS language today, by using PostCSS. Which translates cutting edge CSS code so that it works with older browsers. We're going to be using a series of plug ins called CSSNext. I'll start by giving you an overview of the project. And show you how both PostCSS and CSSNext work. I'll show you how to use PostCSS to divide your work into partials. So that your code can stay organized in separate files.
Then I'll show you how to work with features like custom property variables, advanced pseudo classes, and variables with reduced calculations. We'll learn how to work with Flexbox layouts and NextCSS rules, plus how to work with custom media queries, and the many color functions available within CSS. Finally, I'll show you how to create a responsive layout, with animation and SVG Graphics which have embedded videos. There's a lot to learn, but that's why you're here.
So let's get started.
- 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