O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CSS for Designers

CSS for Designers

by Adrian Mendoza
Publisher: O'Reilly Media, Inc.
Release Date: January 2015
ISBN: 9781491917770
View table of contents
Start watching

Video Description

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

Adrian Mendoza has spent more than 20 years working in design and user experience. Founder of Mendoza Design, he has consulted on a variety of user experience for web and mobile projects.

Table of Contents

  1. Introduction to CSS
    1. Course Introduction & Introduction to CSS 00:08:24
    2. Creating a Functional Spec 00:13:41
    3. Setting up your Environment 00:08:00
    4. Organizing your Project 00:03:54
  2. Learning CSS Basics
    1. Learning CSS Basics 00:07:38
    2. Setting up Your CSS Files in Your HTML 00:13:34
    3. Setting up a reset.css in Your Project 00:06:57
    4. Looking at CSS Syntax 00:16:57
  3. Creating the Style Guide
    1. Creating the Style Guide Introduction 00:01:52
    2. Setting up Your Style Guide 00:06:05
    3. Using Color in CSS 00:11:32
    4. Font Styles: Using Font Weight 00:08:35
    5. Font Styles: Using Font Size 00:05:37
    6. Font Styles: Using Font Family 00:02:23
    7. Font Styles: Adding to your Style Guide 00:08:05
    8. Creating Custom Fonts Using @Fontface 00:08:39
    9. Styling Links 00:09:09
    10. Padding: Adding Padding to Classes and DIV's 00:06:49
    11. Margins: Adding Margins to Classes and DIV's 00:05:20
    12. Borders: Adding Borders to Classes and DIV's 00:06:20
    13. Styling Backgrounds 00:10:47
    14. Presenting Your Style Guide: How to Present Your Style Guide to Others 00:02:12
  4. Creating a Page Template
    1. Introduction to Creating Page Templates 00:01:06
    2. Creating Your First Page Template 00:03:01
    3. Creating Div Styles: Adding Dropped Shadows 00:10:42
    4. Creating Div Styles: Adding Rounded Corners 00:07:19
    5. Creating Div Styles: Adding Translucency 00:10:09
    6. Creating Div Styles: Adding Gradients 00:06:13
    7. Creating Layouts Using DIV’s: Introduction to Creating a Layout Using Div's 00:00:53
    8. Creating Layouts Using DIV’s: Adding a Column 00:08:12
    9. Creating Layouts Using DIV’s: Adding Heights 00:04:30
    10. Creating Layouts Using DIV’s: Adding Widths 00:02:48
    11. Creating Layouts Using DIV’s: Adding Left and Right Floats 00:10:27
    12. Creating Layouts Using DIV’s: Adding Layers 00:11:34
    13. Creating a Page Structure for HTML 5 00:05:19
    14. Creating Buttons: Creating the Button 00:08:08
    15. Creating Buttons: Adding Hover State 00:08:24
    16. Creating Buttons: Adding Images 00:02:58
    17. Creating a Page Template Wrap Up 00:03:25
  5. Getting Ready for Production
    1. Getting Ready for Production 00:00:51
    2. Cross Browser Compatibility 00:07:24
    3. Optimizing Your CSS: Add Multiples Classes on One Line 00:08:57
    4. Optimizing Your CSS: Streamlining CSS Attributes Using Shorthand 00:06:15
    5. Optimizing for Performance 00:09:32