DGM2740 Principles of Web Languages
This course was built by Dr. Paul Cheney for the Digital Media Department at UVU
- Purchase a copy of Compass.app
- Build a single responsive web-page that uses SASS as the CSS preprocessor.
Hand-coding all your CSS can be time consuming for a complex project. A CSS preprocessor allows you to type shorthand and then a CSS preprocessor will convert your shorthand into viable CSS that gets downloaded to the browser. There are many CSS preprocessors available and as yet, there is no clear winner. SASS or LESS seem to be the current contenders. After asking industry professionals and reading reviews, I chose to include SASS in this class. Once you learn one CSS Preprocessor, you should be able to pick up other ones without much problem.
All videos listed below are available on UDEMY
- Watch CSS Preprocessor Overview
- Watch Introduction to SASS
- Watch Setting up a new project
- Watch Setting up a basic site in Dreamweaver
- Watch Using Partials and Import
- Watch Using Variables
- Watch Using Nesting
- Watch Using Mixins
- Watch Using Extend or Inheritance
- Watch Using Math Operators
- Watch Examining a completed SASS page
- Watch CSS Preprocessor on Pluralsight (This features KOALA.APP instead of compass)
- Watch the 7 videos in the Applying RWD Styles of "Responsive Web Design" by Ben Callahanon PLURALSITE (1:01:00)
- Read an article comparing Sass and LESS (Sass wins)
- Read two ways to install Sass (I now use Koala.app which is free!)
- Read how to get started with Compass.app and pay attention to how to use it with existing projects.
- Read an introduction to Sass
- Learn SASS Basics (Variables, Nesting, Partials, Import, Mixins, Extend/Inheritance, Operators)
You are benefiting from those students who have gone before and shared their in-site as to how this class can be improved. Please take a few minutes to share some ways we can improve this class for the next group of students.
- What is an advantage of using SASS?
- What do you see as a disadvantage?
- Write a 1/2 page summary of what you learned from the Adobe MAX video.