Practical CSS

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.


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

Lesson 10: Recorded Q&A Session 2
Step 1: Recorded Q&A
Step 2: Q&A Session A
Step 3: Q&A Session B
Step 4: Thank you! 

Request More Infomation

Inquiry for
This field is for validation purposes and should be left unchanged.
Learn how Elite helped Aimbridge Hospitality stay ahead of the competition.
View Study