Advanced

Hands on Responsive Design Using a CSS Preprocessor

Build a mobile first, responsive website using the power of a CSS preprocessor so you can use variables, functions, calculations, shorthand, and minification in your web design workflow.
Play course overview
Course info
Rating
(43)
Level
Intermediate
Updated
Mar 14, 2016
Duration
2h 0m
Table of contents
Course Overview
Course Overview 1m
CSS Preprocessor Overview
Introduction 5m
Introduction to SASS
Introduction to SASS 9m
Setting up a New SASS Project
Overview 1m Create a Project with Media Queries in the Partial Files 10m Create a Project with Media Queries with the @imports 3m A Demonstration of the Koala App Save Options 2m Adding a CSS Reset as a Partial 2m
Building the Site Header
Overview of Variables and Nesting 1m Using Photoshop Generate Assets 4m Examining the Start File 6m Implementing Variables for the Header 8m Implementing Nesting for the Header 5m Building the Footer 2m
Building the Main Rows and Columns
Introduction 2m Building the HTML Rows and Columns 5m Styling the Text Using Nesting and Variables 5m Styling the Columns Using Nesting and Operations 5m
Building the Tabbed Navigation
Introduction 2m Building the Navigation in HTML 3m Styling the Navigation Using Inheritance/Extend 7m
Style Lists with Custom Bullets
Introduction 1m Styling the Lists with Mixins 5m
Build Newspaper Style Columns
Introduction 1m Passing Values to a Mixin 6m
Using a for Loop for a 12 Column Grid
Introduction 3m The Demo File 1m Building a for Loop 4m Using 12-column Grids to Design a Layout 4m Textwrapping Using Shape Outside 3m Testing for Multiple Browsers and Mobile Devices 2m
Description
Course info
Rating
(43)
Level
Intermediate
Updated
Mar 14, 2016
Duration
2h 0m
Description

CSS is very basic and tedious to write by hand. However, by using a CSS preprocessor, we can introduce variables, functions, calculations, shorthand, minification, and other cool stuff all while keeping our source files clean and readable. The power of using a CSS preprocessor for doing responsive design should not be underestimated.

About the author
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello. My name is Paul Cheney, and welcome to my course on Hands-on Response and Design Using a CSS Preprocessor. I teach digital media at UVU, and in my spare time I build courses for Pluralsight. A CSS preprocessor allows you to use many programming functions to build your CSS that you may never have thought possible. In this course, we will show you how you create many separate files for your CSS, and then automatically combine and minify them for delivery to the web. We will also show you the power of using variables, nesting your CSS, and how to use mix ins to automate code creation. We will also leverage the power of inheritance to create dry code, as well as explore math functions, and control directives. This is hands-on course, so you'll be working right alongside me to build a responsive, mobile-first website for Aspen Dental. Even if you don't like the dentist, you're going to love the final product. Before beginning the course you should be familiar with HTML5, CSS3, and media queries. I hope you'll join me, and give me a chance to convince you that using a CSS preprocessor is the way to go.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT