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.

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.

• Course Overview 1min
• CSS Preprocessor Overview 4mins
• Introduction to SASS 8mins
• Setting up a New SASS Project 17mins
• Building the Site Header 26mins
• Building the Main Rows and Columns 16mins
• Building the Tabbed Navigation 12mins
• Style Lists with Custom Bullets 6mins
• Build Newspaper Style Columns 7mins
• Using a for Loop for a 12 Column Grid 18mins