Learn CSS3
Code: ETCSS3
Duration: Days 2
Delivery methods:
Price per delegate: $575.00
Trained over 60000 delegates
Delivered by world class instructors
Highly competitive pricing
Capped class sizes
Post course support
Course Description
Mastering a language like CSS3 can be intimidating. It doesn™t have to be!
The training course provides web designers with the knowledge and hands-on practice they need to be able to build and manage professional web sites. The course focuses on understanding web terminology as well as the concepts required to create a web site that can evolve to meet a client™s requirements through CSS3
Target Student:
This course is for web designers and developers who are proficient with CSS, and hand coding HTML and CSS.
Prerequisites:
Those taking the course should understand:
Delivery Method:
Instructor led, group-paced, classroom-delivery learning model with structured hands-on activities.
Course Content
Lesson 1: Setting the Scene for CSS3
Step 1: Introduction to Learn CSS3
Step 2: Lesson 1 Outline
Step 3: What Exactly is CSS3, and How we can Use it Today
Step 4: Progressive Enhancement
Step 5: Thinking in CSS
Step 6: Inspiring Real World Examples of CSS3
Step 7: Discussion
Lesson 2: CSS Selectors Part 1
Step 1: Lesson 2 Outline
Step 2: CSS2.1 Attribute selectors
Step 3: CSS3 Attribute selectors
Step 4: CSS3 UI selectors
Step 5: Exercises
Step 6: Document download
Step 7: Exercise Solutions (Part 1)
Step 8: Exercise Solutions (Part 2)
Lesson 3: CSS Selectors Part 2
Step 1: Lesson 3 Outline
Step 2: first-child and other CSS3 child selectors
Step 3: Aspects of Child Selectors
Step 4: CSS3 stuctural type selectors
Step 5: Exercises
Step 6: Solution to the Exercises (Part 1)
Step 7: Solution to the Exercises (Part 2)
Lesson 4: CSS3 Text Properties
Step 1: Lesson 4 Outline
Step 2: Text Shadows
Step 3: Text Stroke
Step 4: RGBA Colors
Step 5: Exercises
Step 6: HTML file
Step 7: Solution to the Exercises
Lesson 5: Recorded Webinar and Q&A Session
Step 1: Recorded Live Q&A Sessions
Step 2: View Session A
Step 3: View Session B
Lesson 6: CSS3 Box Properties
Step 1: Lesson 6 Outline
Step 2: Border Radius Part 1
Step 3: Border Radius Part 2
Step 4: Border Radius Part 3
Step 5: Box Shadow Part 1
Step 6: Box Shadow Part 2
Step 7: Exercises
Step 8: Solution to Exercises Part 1
Step 9: Solution to Exercises Part 2
Lesson 7: CSS Transition Animations
Step 1: Lesson 7 Outline
Step 2: Multi-column Text Part 1
Step 3: Multi-column Text Part 2
Step 4: CSS Transitions Part 1
Step 5: CSS Transitions Part 2
Step 6: Exercise 1: Transitions
Step 7: HTML slides document
Step 8: Recreating 2D Transition Effects from Keynote
Step 9: Exercise 2
Step 10: A Tale of Two Cities
Step 11: Solution to Exercise 1
Step 12: Solution to Exercise 2
Step 13: Code to the Solutions
Step 14: Solution to Exercise 1
Step 15: Solution to Exercise 2
Lesson 8: CSS3 Backgrounds
Step 1: Lesson 8 Outline
Step 2: Multiple Background Images
Step 3: Sizing Background Images
Step 4: Clipping Backgrounds
Step 5: Gradients, Part 1
Step 6: Gradients, Part 2
Step 7: Exercise 1
Step 8: HTML document
Step 9: Background image
Step 10: Triangles in triangles
Step 11: Exercise 2
Step 12: Exercise 2 HTML document
Lesson 9: CSS Transforms
Step 1: Lesson 9 Outline
Step 2: 2D transforms in CSS3, Part 1
Step 3: 2D transforms in CSS3, Part 2
Step 4: 2D transforms in CSS3, Part 3
Step 5: 2D transforms in CSS3, Part 4
Step 6: Your Challenge for Today
Step 7: Exercise
Step 8: Download HTML document
Step 9: SVG image
Lesson 10: Recorded Q&A
Step 1: View Session A
Step 2: View Session B
Lesson 11: Web Fonts
Step 1: Lesson 11 Outline
Step 2: The History and Challenges of Web Fonts, Part 1
Step 3: The History and Challenges of Web Fonts, Part 2
Step 4: Using Web Fonts
Step 5: Download the demo page
Step 6: Using Web Fonts, Part 1
Step 7: Using Web Fonts, Part 2
Step 8: Demo page from Using Web Fonts, Part 3
Step 9: Using Web Fonts, Part 3
Step 10: Using Web Fonts, Part 4
Step 11: Services and Libraries, Part 1
Step 12: Services and Libraries, Part 2
Step 13: Bonus: Web Fonts Services, Sources, Tools and Resources
Step 14: Exercise
Lesson 12: Targeting Devices Using Media Queries
Step 1: Lesson 12 Outline
Step 2: The Changing Landscape of The Web
Step 3: Traditional Browser Detection
Step 4: CSS2 Media Queries
Step 5: CSS3 Media Queries
Step 6: Exercises
Lesson 13: Browser Support
Step 1: Lesson 13 Outline
Step 2: CSS3 Selectors
Step 3: CSS Properties
Step 4: Modernizr and Progressive Enhancement
Step 5: The Future of CSS
Step 6: Exercise
Step 7: Exercise Files
Lesson 14: CSS3 in Action
Step 1: Exercise
Step 2: File download
Step 3: Exercise
Step 4: Lesson 14 Outline
Step 5: My Solution to the Exercise
Step 6: Solution HTML
Step 7: Solution CSS, Part 1
Step 8: Solution CSS, Part 2
Step 9: Solution CSS, Part 3
Step 10: Solution CSS, Part 4
Lesson 15: Recorded Q&A
Step 1: View Session A
Step 2: View Session B
