Course Description

"Styling forms with CSS" takes you through the process of marking up and styling a detailed form.
 
Along the way you will learn about form elements and their purpose, accessible form markup, and most importantly, how to style form layouts and form elements from the ground up.

Target Student:

Styling forms with CSS is for web designers and developers with a basic understanding of CSS who want to learn how to create and style elegant, enhanced CSS-based forms.

Prerequisites:

A basic understanding of CSS is required. Never used CSS before? Take a look at the introductory course on CSS called Getting started with CSS.
 
Students will need:
 
1. Some sort of text editor
 
2. One or more modern browsers (such as Safari, Chrome, Opera or FireFox)

Delivery Method:

Instructor led, group-paced, classroom-delivery learning model with structured hands-on activities.

Course Content

Lesson 1: Checking out the design and markup
Step 1: Lesson 1 - Introduction
Step 2: Browser support
Step 3: The design
Step 4: The markup
Step 5: Hiding some labels

Lesson 2: Form elements
Step 1: Lesson 2 - Introduction
Step 2: A quick exercise
Step 3: Form elements PDF

Lesson 3: Let's get styling
Step 1: Lesson 3 - Introduction
Step 2: CSS global resets
Step 3: CSS Font stacks
Step 4: Styling the basic elements
Step 5: Styling the container
Step 6: Styling the heading
Step 7: Styling the form container

Lesson 4: Styling the key form elements
Step 1: Lesson 4 - Styling the form div
Step 2: Styling the special classes
Step 3: Styling the labels
Step 4: Styling the legend span
Step 5: Styling the inputs

Lesson 5: Live Q&A
Step 1: Live Q&A
Step 2: Exercise
Step 3: :before and :after
Step 4: Recording of Live Q&A session

Lesson 6: Styling buttons and icons
Step 1: Lesson 6 - Introduction
Step 2: Styling the submit button
Step 3: Styling the select
Step 4: Explaining sprites
Step 5: About background-positioning
Step 6: Using background-positioning

Lesson 7: Adding warning styles
Step 1: Lesson 7 - Introduction
Step 2: Styling the warning messages
Step 3: Styling the links
Step 4: Styling the warning div
Step 5: Styling the hover
Step 6: Styling the input
Step 7: Styling the icons
Step 8: The Cascade
Step 9: CSS Cascade

Lesson 8: The enhanced design
Step 1: Lesson 8 - Introduction
Step 2: An Intro to CSS3
Step 3: CSS3 border-radius
Step 4: CSS3 box-shadow
Step 5: CSS3 gradients 
Step 6: Adding border-radius
Step 7: Adding box-shadows
Step 8: Adding gradients - part 1
Step 9: Adding gradients - part 2
Step 10: Adding gradients - part 3
Step 11: Lesson 8 - Wrap up

Lesson 9: Final testing
Step 1: Lesson 9 - Introduction
Step 2: Basic tests
Step 3: Time for some validating
Step 4: Browser testing
Step 5: Dealing with IE
Step 6: Wrap up