Learn CSS3


 21 Reviews Add a review

Published March 2011

You won’t even realize how much you’ve learned by the time you’re done.

Mastering a language like CSS3 can be intimidating. It doesn’t have to be! We believe we’ve created the ultimate learning experience: a virtual classroom, full of people just like you. Under the expert guidance of John Allsopp, you’ll find the combination of digestible audio, video and mini-articles with a supportive forum of classmates to be so much fun, you won’t even realize how much you’ve learned by the time you’re done.

What you'll learn

  • What exactly is CSS3, and to use it today
  • Targeting devices using media queries
  • CSS3 backgrounds and gradients
  • The Future of CSS
  • Closed captions available
SPONSORS
Meet your instructor
John Allsopp

Successful software developer, long standing web development speaker, writer, evangelist and expert, John has spent the last 15 years working with and developing for the web.

Lesson 1: Setting the Scene for CSS3
Free Introduction to Learn CSS3 6:10
Free Lesson 1 Outline 1:01
Free What Exactly is CSS3, and How we can Use it Today 9:59
Free Progressive Enhancement 10:27
Thinking in CSS 7:31
Inspiring Real World Examples of CSS3 7:06
Discussion
Lesson 2: CSS Selectors Part 1
Lesson 2 Outline 1:14
CSS2.1 Attribute selectors 8:01
CSS3 Attribute selectors 11:09
CSS3 UI selectors 8:15
Exercises
Document download
Zip file download
Exercise Solutions (Part 1) 11:26
Exercise Solutions (Part 2) 5:39
Lesson 3: CSS Selectors Part 2
Lesson 3 Outline 1:31
first-child and other CSS3 child selectors 11:13
Aspects of Child Selectors 12:50
CSS3 stuctural type selectors 12:00
Exercises
Solution to the Exercises (Part 1) 10:42
Solution to the Exercises (Part 2) 6:08
Zip file download
Lesson 4: CSS3 Text Properties
Lesson 4 Outline 1:58
Text Shadows 14:43
Text Stroke 13:38
RGBA Colors 10:45
Exercises
HTML file
Solution to the Exercises 14:57
Lesson 5: Recorded Webinar and Q&A Session
Recorded Live Q&A Sessions
View Session A 1:06:17
View Session B 1:06:24
Lesson 6: CSS3 Box Properties
Lesson 6 Outline 0:55
Border Radius Part 1 11:21
Border Radius Part 2 14:57
Border Radius Part 3 9:30
Box Shadow Part 1 7:14
Box Shadow Part 2 8:33
Exercises
Solution to Exercises Part 1 10:44
Solution to Exercises Part 2 8:51
Lesson 7: CSS Transition Animations
Lesson 7 Outline 1:40
Multi-column Text Part 1 9:38
Multi-column Text Part 2 12:54
CSS Transitions Part 1 12:29
CSS Transitions Part 2 10:42
Exercise 1: Transitions
HTML slides document
Recreating 2D Transition Effects from Keynote 2:52
Exercise 2
A Tale of Two Cities
Solution to Exercise 1 9:30
Solution to Exercise 2 9:35
Code to the Solutions
Solution to Exercise 1
Solution to Exercise 2
Lesson 8: CSS3 Backgrounds
Lesson 8 Outline 2:10
Multiple Background Images 8:12
Sizing Background Images 12:44
Clipping Backgrounds 9:25
Gradients, Part 1 14:22
Gradients, Part 2 8:43
Exercise 1
HTML document
Background image
Triangles in triangles
Exercise 2
Exercise 2 HTML document
Lesson 9: CSS Transforms
Lesson 9 Outline 1:55
2D transforms in CSS3, Part 1 9:37
2D transforms in CSS3, Part 2 15:14
2D transforms in CSS3, Part 3 7:13
2D transforms in CSS3, Part 4 14:59
Your Challenge for Today 1:04
Exercise
Download HTML document
SVG image
Lesson 10: Recorded Q&A
View Session A 49:08
View Session B 1:22:59
Lesson 11: Web Fonts
Lesson 11 Outline 2:04
The History and Challenges of Web Fonts, Part 1 11:45
The History and Challenges of Web Fonts, Part 2 5:09
Using Web Fonts
Download the demo page
Using Web Fonts, Part 1 7:21
Using Web Fonts, Part 2 13:27
Demo page from Using Web Fonts, Part 3
Using Web Fonts, Part 3 4:45
Using Web Fonts, Part 4 4:01
Services and Libraries, Part 1 13:31
Services and Libraries, Part 2 4:44
Bonus: Web Fonts Services, Sources, Tools and Resources
Exercise
Lesson 12: Targeting Devices Using Media Queries
Lesson 12 Outline 1:05
The Changing Landscape of The Web 3:41
Traditional Browser Detection 4:21
CSS2 Media Queries 14:28
CSS3 Media Queries 10:37
Exercises
Lesson 13: Browser Support
Lesson 13 Outline 1:43
CSS3 Selectors 11:13
CSS Properties 13:19
Modernizr and Progressive Enhancement 12:21
The Future of CSS 7:45
Exercise
Exercise Files
Lesson 14: CSS3 in Action
Exercise
File download
Exercise 1:17
Lesson 14 Outline 5:39
My Solution to the Exercise
Solution HTML 1:52
Solution CSS, Part 1 3:52
Solution CSS, Part 2 5:20
Solution CSS, Part 3 10:23
Solution CSS, Part 4 12:09
Lesson 15: Recorded Q&A
View Session A 1:17:30
View Session B 1:20:17

Leave a Review