CSS3 First Look

Take a look into the CSS horizon and explore Flexbox, aka the Flexible Box Layout model, an important part of the evolution of CSS3 layouts. Senior author James Williamson walks through the exciting new capabilities Flexbox offers for controlling layouts—with a fraction of the code previously required. Learn what browsers currently support Flexbox and how to define containers and use properties to control position, size, and display order. Throughout the course, you'll have occasions to test your understanding with engaging, hands-on Challenge exercises.
Topics include:

• Reviewing Flexbox support
• Defining elements
• Controlling element flow
• Wrapping content
• Defining display ratios
• Aligning single and multiple items
• Nesting flex containers

00- Introduction

01- Welcome
02- Using the exercise files

01- Introducing CSS3

01- What is CSS3
02- The current status of CSS3
03- An overview of CSS3 capabilities
04-An overview of CSS3 capabilities
05- Detecting support for CSS3
06- Understanding vendor prefixes

02- CSS3 Selectors

01- An overview of child and sibling selectors
02-Using child and sibling selectors
03- An overview of attribute selectors
04- Using attribute selectors
05- Pseudo-class UI selectors
06- Negation pseudo-class selectors
07- Target pseudo-class selectors
08- Structural selectors
09- Nth-child selector syntax
10- First, last, and only structural selectors
11- Using structural selectors to write more efficient code

03- Working with Color in CSS3

01-Color formats in CSS3
02- Transparency in CSS3
03- CSS3 gradients
04- Creating linear gradients
05- Creating radial gradients

04- CSS3 Typography

01- Working with web fonts
02- @font-face syntax
03- Downloading sample fonts
04- Writing @font-face declarations
05- Using web fonts
06- Using text shadows
07- Creating multi-column text

05- CSS3 and Page Layout

01- An overview of the flexible box model
02- Controlling box orientation
03- Setting element flexibility
04- Distributing boxes
05- Controlling box alignment
06- Working with box sizing

06-The CSS3 Box Model

01-Using border-radius
02- Creating custom rounded corners
03- Understanding border images
04- Using border images
05- Creating box shadows
06- CSS3 background
07- Controlling background size
08- Creating multiple background image
09- Using background origin
10- Using background-origin

07- CSS3 Transitions and Transforms

01- An overview of CSS3 2D transforms
02- Using 2D transforms
03- Setting transform origins
04- An overview of CSS3 transitions
05- Animating CSS properties
06- Using easing in animations
07- An overview of 3D transforms

08- Media Queries

01- Understanding media queries
02- Strategies for targeting multiple devices
03-Writing styles for target screen sizes
04- Deploying styles through media queries
05-Basing media queries on page orientation
06- Targeting media queries for iOS devices

09- Conclusion

01-Goodbye