Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Building a Responsive Single-Page Design with PostCSS

via LinkedIn Learning

Go to class Write review

This course may be unavailable.

Details

This course may be unavailable.

Go to class

Provider

LinkedIn Learning
Pricing

Free Trial Available
Languages

English
Certificate

Certificate Available
Duration & workload

2-3 hours
Sessions

Finished

Found in

Overview

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

Syllabus

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

Taught by

Ray Villalobos

Reviews

Start your review of Building a Responsive Single-Page Design with PostCSS