Building a Responsive Single-Page Design with PostCSS

Course details

Learn how to create responsive single-page websites with PostCSS, the CSS post-processor engine that extends the power of CSS through JavaScript. These step-by-step instructions take existing HTML markup and add style, animation, and responsive navigation. This combination allows for dynamic one-page sites—a popular design that's now even faster and easier to create with PostCSS. Along the way, Ray Villalobos introduces some handy plugins, tips for integrating PostCSS into a Gulp-based workflow, and techniques for making layouts more responsive with Flexbox.

Learning objectives
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

Concepts

0. Introduction

01 - Welcome
02 - What you should know before watching this course
03 - Using the exercises for this course

1. Getting Started

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

2. Creating Base Styles

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

3. Styling Modules

11 - Use Flexbox to create a layout for our header or navigation
12 - Make a navigation responsive
13 - Use color functions to help create a footer
14 - Create shared section styles

4. Creating Sections

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

5. Animating with PostCSS

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

Goodbye

22 - Next steps