Modernizing Your CSS Skills

Modernizing Your CSS Skills (CSS301)

Course Length: 2 days
Delivery Methods: Available as private class only
Course Overview

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.

Course Benefits
  • Learn new selectors, pseudo class, and pseudo elements to style elements.
  • Learn font and text effects, including @font-face.
  • Learn new gradient, mask, and background image techniques.
  • Learn how to implement animations, transitions, and 2D and 3D transforms.
  • Learn how to use media queries to render content appropriately for mobile and tablet devices.
  • Learn about vendor-specific prefixes and browser support for various CSS techniques.
Course Outline
  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
Class Materials

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

Class Prerequisites

Experience in the following is required for this CSS class:

  • HTML
  • Advanced level of CSS
Prerequisite Courses

Courses that can help you meet these prerequisites:

Live Private Class
  • Private Class for your Team
  • Live training
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Proposal