Learn how to create animated single-page websites with PostCSS, the CSS post-processor that extends the power of CSS through JavaScript.
- [Voiceover] Hello, this is Ray Villalobos, and welcome to Building a Responsive Single-Page site with PostCSS. In this course, I'm going to build a single-page responsive site step-by-step using an engine for processing CSS with JavaScript called PostCSS. I'll get started by going over the setup for this project, which includes examining the markup as well as the Gulp-process that you'll need in order to work with PostCSS. I'll show you how using different PostCSS plug-ins can help you code faster and more efficiently.
I'll also show you how to create Sass-like imports, create variables, and some of the differences between working with Sass and PostCSS with the PreCSS plug-in. Then, I'll show you how to work with Flexbox to create different types of layouts, including responsive designs that adjust to the widths of different devices. I'll also show you how to work with Color Functions, and how to use calculations to make creating columns faster. Finally, I'll show you different ways of animating content and how PostCSS can help you do it quicker, and with less errors.
Now there's a lot to learn, but that's why you're here so let's get started with building a responsive single-page site with PostCSS.
Released
1/22/2016- Structuring the HTML markup for a single-page design
- Using PreCSS Sass-like imports in PostCSS
- Creating Sass-like variables with PreCSS
- Building styles
- Creating a layout for the header and navigation with Flexbox
- Creating and styling sections
- Animating page elements with PostCSS
Share this video
Embed this video
Video: Welcome