Modernizing Your CSS Skills (CSS301)

This Modernizing Your CSS Skills training class is for web developers who have used CSS but need to update their CSS skills to take advantage of the new Level 3 and Level 4 CSS modules that are widely supported by modern browsers. People new to CSS should start with our Introduction to CSS and Advanced CSS courses.

1. Power of CSS
   1. The Power of CSS
   2. CSS Level 3 and CSS Level 4
2. Selectors
   1. The target Pseudo-Class
   2. Using CSS Target
   3. UI Element States Pseudo-Classes
   4. Using CSS Attribute-State Pseudo-Classes
   5. Negation Pseudo-Class
   6. Structural Pseudo-Classes
   7. Using the Structural Attribute Pseudo-Classes
   8. Using nth-of-type Pseudo-Class
   9. Pseudo-Elements
3. Fonts and Text Effects
   1. Fonts and Text Effects
   2. Fonts on the Web
   3. Font Services
   4. Using Font Services
   5. The @font-face Rule
   6. Using @font-face
   7. Text Shadow
   8. Word Wrapping
   9. Text Shadow and Word Wrap
4. Colors, Gradients, Background Images, and Masks
   1. Colors, Gradients, Background Images, and Masks
   2. Color
   3. The opacity Property
   4. Using HSL & Opacity
   5. Backgrounds
   6. Multiple Background Images with background-clip,
   7. background-origin, and background-size
5. Borders and Box Effects
   1. Borders and Box Effects
   2. Image Borders
   3. Image Borders
   4. Rounded Corners
   5. Box Shadow
   6. Rounded Corners & Drop Shadow
6. Transitions, Transforms, and Animations
   1. Transitions & Transforms
   2. Transitions
   3. Transitions
7. Layout: Columns and Flexible Box
   1. Columns
   2. Columns
   3. Flexible Box Layout Module
   4. Examples
   5. Flexible Box Layout
8. Vendor Prefixes
   1. What are Vendor Prefixes?
   2. Maybe They Ain't So Bad
   3. Strategies
   4. Autoprefixer
   5. Autoprefixer with Gulp
9. Embedding Media
   1. Embedding Media
   2. Video Formats
   3. Styling Video
   4. Styling Video
10. Accessibility Features
    1. Web Accessibility
    2. The CSS Speech Module
11. Media Queries
    1. Media Queries
    2. Targeting Widths and Devices with CSS Media Queries
    3. Responsive Images & the viewport Metatag
    4. Responsive Design
12. Sass
    1. Preprocessors
    2. Sass
13. Frameworks
    1. Frameworks
    2. Bootstrap
    3. Setting up Bootstrap
    4. Display Utility Classes
    5. Foundation
    6. Setting Up Foundation
    7. UIkit
    8. Setting Up UIkit
    9. Bootstrap
14. Grid Layout
    1. CSS Grid Layout
    2. Styling the Parent Element
    3. Grid Layout
    4. Styling Grid Children Elements
    5. Controlling Grid Line Size: Gaps
    6. Creating Modern Art
    7. Grid Layout for Page Layout
    8. Grid Layout and Media Queries
    9. Page Layout with Grid Areas
15. CSS Level 4 Selectors
    1. CSS Level 4 Selectors
    2. Logical Combinations
    3. :matches()
    4. Case Insensitivity
16. Going Forward/Additional Resources
    1. Going Forward/Additional Resources
    2. What's Next?
    3. Online Resources
    4. Get Involved
    5. Testing CSS

Each student receives a comprehensive set of materials, including course notes and all class examples.

Experience in the following is required for this CSS class: