YoVDO

Building a Responsive Single-Page Design with PostCSS

Offered By: LinkedIn Learning

Tags

HTML & CSS Courses Computer Science Courses Web Development Courses Javascript Courses Animation Courses Flexbox Courses Responsive Web Design Courses PostCSS Courses

Course Description

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

Related Courses

Intro to HTML and CSS
Udacity
Responsive Web Design Fundamentals
Google via Udacity
HTML5 and CSS Fundamentals
World Wide Web Consortium (W3C) via edX
CSS Basics
Microsoft via edX
Advanced CSS Concepts
Microsoft via edX