Building a Responsive Single-Page Design with PostCSS

Learn how to create animated single-page websites with PostCSS, the CSS post-processor that extends the power of CSS through JavaScript.

Introduction

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

1. Getting Started

• Looking at our single-page responsive design
• HTML markup for the single-page design
• Learn to work with a Gulp.js workflow

2. Creating Base Styles

• Use PreCSS Sass-like imports in PostCSS
• Create Sass-like variables with PreCSS
• Build the most important CSS styles
• How mixins are different with PreCSS than with Sass

3. Styling Modules

• Use Flexbox to create a layout for our header or navigation
• Make a navigation responsive
• Use color functions to help create a footer
• Create shared section styles

4. Creating Sections

• Create fullscreen backgrounds and controlling layouts
• Use calc() function for simple calculations in CSS
• When to create custom variables for your colors with PostCSS
• Create the sections styles

5. Animating with PostCSS

• Use regular CSS animations to create an slide-in effect
• Use transformations to zoom in elements
• Make keyframe-based animations using the Animate.css library

Goodbye

• Next steps