Practical CSS

Code: ETCSSPRA

Duration: Days 1

Delivery methods:

Price per delegate: $350.00

Trained over 60000 delegates

Delivered by world class instructors

Highly competitive pricing

Capped class sizes

Post course support

Course Description

"Practical CSS" takes you through the process of building a web page - from start to finish.

Along the way you will learn about CSS resets, Grid systems, Object Oriented CSS and how to style all sorts of page components

Target Student:

"Practical CSS" is for web designers and developers with a basic understanding of CSS who want to learn how to build CSS layouts from scratch.

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: Getting started
Step 1: Lesson 1 - introduction
Step 2: The design
Step 3: Design mockups
Step 4: The markup
Step 5: CSS Resets
Step 6: Exercise - Part 1
Step 7: Exercise - Part 2
Step 8: Exercise - Part 3
Step 9: Exercise - Part 4

Lesson 2: Styling the overall layout
Step 1: Introduction to Layouts & Grids
Step 2: Overall Layout
Step 3: Browsers support
Step 4: The Exercise

Lesson 3: Setting Up the Images
Step 1: Preparing images
Step 2: Avoiding Problems
Step 3: Markup and Images
Step 4: Explaining our image sprite
Step 5: The exercise

Lesson 4: Styling the Header Using Absolute & Relative Positioning
Step 1: Styling the Header
Step 2: The form markup
Step 3: Styling the form
Step 4: Styling the form components
Step 5: Adding a background image

Lesson 5: Recorded Q&A Session
Step 1: Recorded Q&A
Step 2: Q&A Session A
Step 3: Q&A Session B
Step 4: Resources from Q&A session

Lesson 6: Styling the primary nav
Step 1: The primary nav markup
Step 2: Styling the LI element
Step 3: Explaining the "Sliding doors" technique
Step 4: Styling the A element
Step 5: Explaining block formatting context
Step 6: Fixing the UL element

Lesson 7: Styling the nested list
Step 1: The section nav markup
Step 2: Styling the section nav
Step 3: Styling the nested list
Step 4: Styling the footer

Lesson 8: Dealing with page objects
Step 1: Explaining page objects
Step 2: Creating classes
Step 3: Exercise - Part 1
Step 4: Exercise - Part 2
Step 5: Exercise - Part 3
Step 6: Exercise - Part 4

Lesson 9: Wrapping Up & Testing
Step 1: Wrap Up & Testing
Step 2: Code and layout testing
Step 3: Exercise - dealing with IE
Step 4: Page speed testing
Step 5: Exercise - Using media types
Step 6: Exercise - going to print
Step 7: CSS Media Types