CSS is a powerful language for creating and controlling your website’s presentation, but it’s more of a visual language than a traditional coding tool. With this video workshop, you’ll quickly learn how to solve a wide range of style issues with CSS, whether you’re a web designer just starting to code, an experienced developer looking to refresh your skills, or a student looking to get into web design.

UX designer Adrian Mendoza starts with the basics and then adds layers of code and complexity as the course progresses. Along the way, you’ll learn how to create a non-functional spec, build a style guide, and develop page templates.

• Get an overview of CSS with a basic demo
  
• Set up your programing environment and organize your files
  
• Learn the basic CSS types and explore CSS syntax
  
• Create a non-functional spec: a document based on business decisions that affect coding
  
• Build a style guide for color, font styles, links, padding, margins, borders, and backgrounds
  
• Develop a page template with Div styles, layouts, and buttons
  
• Code and test your CSS for cross-browser compatibility
  
• Optimize CSS and minimize your code for performance
  

Table of Contents:

• Introduction to CSS
  
• Course Introduction & Introduction to CSS 08m 24s
  
• Creating a Functional Spec 13m 40s
  
• Setting up your Environment 07m 59s
  
• Organizing your Project 03m 53s
  

• Learning CSS Basics
  
• Learning CSS Basics 07m 37s
  
• Setting up Your CSS Files in Your HTML 13m 33s
  
• Setting up a reset.css in Your Project 06m 56s
  
• Looking at CSS Syntax 16m 57s
  

• Creating the Style Guide
  
• Creating the Style Guide Introduction 01m 52s
  
• Setting up Your Style Guide 06m 05s
  
• Using Color in CSS 11m 31s
  
• Font Styles: Using Font Weight 08m 35s
  
• Font Styles: Using Font Size 05m 37s
  
• Font Styles: Using Font Family 02m 22s
  
• Font Styles: Adding to your Style Guide 08m 05s
  
• Creating Custom Fonts Using @Fontface 08m 38s
  
• Styling Links 09m 09s
  
• Padding: Adding Padding to Classes and DIV's 06m 49s
  
• Margins: Adding Margins to Classes and DIV's 05m 19s
  
• Borders: Adding Borders to Classes and DIV's 06m 20s
  
• Styling Backgrounds 10m 47s
  
• Presenting Your Style Guide: How to Present Your Style Guide to Others 02m 11s
  

• Creating a Page Template
  
• Introduction to Creating Page Templates 01m 06s
  
• Creating Your First Page Template 03m 01s
  
• Creating Div Styles: Adding Dropped Shadows 10m 41s
  
• Creating Div Styles: Adding Rounded Corners 07m 18s
  
• Creating Div Styles: Adding Translucency 10m 09s
  
• Creating Div Styles: Adding Gradients 06m 13s
  
• Creating Layouts Using DIV’s: Introduction to Creating a Layout Using Div's 00m 52s
  
• Creating Layouts Using DIV’s: Adding a Column 08m 12s
  
• Creating Layouts Using DIV’s: Adding Heights 04m 29s
  
• Creating Layouts Using DIV’s: Adding Widths 02m 47s
  
• Creating Layouts Using DIV’s: Adding Left and Right Floats 10m 27s
  
• Creating Layouts Using DIV’s: Adding Layers 11m 33s
  
• Creating a Page Structure for HTML 5 05m 19s
  
• Creating Buttons: Creating the Button 08m 08s
  
• Creating Buttons: Adding Hover State 08m 23s
  
• Creating Buttons: Adding Images 02m 57s
  
• Creating a Page Template Wrap Up 03m 25s
  

• Getting Ready for Production
  
• Getting Ready for Production 00m 51s
  
• Cross Browser Compatibility 07m 23s
  
• Optimizing Your CSS: Add Multiples Classes on One Line 08m 57s
  
• Optimizing Your CSS: Streamlining CSS Attributes Using Shorthand 06m 14s
  
• Optimizing for Performance 09m 32s