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
- Learning CSS Basics
-
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
Product information
- Title: CSS for Designers
- Author(s):
- Release date: January 2015
- Publisher(s): O'Reilly Media, Inc.
- ISBN: 9781491917770
You might also like
video
Learning CSS Animations
CSS animations are pretty simple. They allow you to animate CSS properties by letting you specify …
book
CSS Master, 2nd Edition
CSS Master is tailor-made for the web designer or front-end devleoper who's really serious about taking …
video
CSS Animations and Transitions
What are some of the accessibility considerations that come along with adding animations to a UI?
video
Building a CSS Style Guide from Scratch
A well-designed CSS style guide offers more than just consistent patterns; it ensures web accessibility, better …