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
Introduction to CSS
Course Introduction Introduction to CSS
Creating a Functional Spec
Setting up your Environment
Organizing your Project
Learning CSS Basics
Learning CSS Basics
Setting up Your CSS Files in Your HTML
Setting up a reset.css in Your Project
Looking at CSS Syntax
Creating the Style Guide
Creating the Style Guide Introduction
Setting up Your Style Guide
Using Color in CSS
Font Styles: Using Font Weight
Font Styles: Using Font Size
Font Styles: Using Font Family
Font Styles: Adding to your Style Guide
Creating Custom Fonts Using @Fontface
Styling Links
Padding: Adding Padding to Classes and DIV’s
Margins: Adding Margins to Classes and DIV’s
Borders: Adding Borders to Classes and DIV’s
Styling Backgrounds
Presenting Your Style Guide: How to Present Your Style Guide to Others
Creating a Page Template
Introduction to Creating Page Templates
Creating Your First Page Template
Creating Div Styles: Adding Dropped Shadows
Creating Div Styles: Adding Rounded Corners
Creating Div Styles: Adding Translucency
Creating Div Styles: Adding Gradients
Creating Layouts Using DIV’s: Introduction to Creating a Layout Using Div’s
Creating Layouts Using DIV’s: Adding a Column
Creating Layouts Using DIV’s: Adding Heights
Creating Layouts Using DIV’s: Adding Widths
Creating Layouts Using DIV’s: Adding Left and Right Floats
Creating Layouts Using DIV’s: Adding Layers
Creating a Page Structure for HTML 5
Creating Buttons: Creating the Button
Creating Buttons: Adding Hover State
Creating Buttons: Adding Images
Creating a Page Template Wrap Up
Getting Ready for Production
Getting Ready for Production
Cross Browser Compatibility
Optimizing Your CSS: Add Multiples Classes on One Line
Optimizing Your CSS: Streamlining CSS Attributes Using Shorthand
Optimizing for Performance