Modernizing Your CSS Skills

See Course Outline

Training for your Team

2
Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

Training for Yourself

$790.00
or 2 vouchers
  • Live Online Training
  • For Individuals
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

Upcoming Classes

  • See More Classes

Please select a class.
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.

Goals
  1. Learn new selectors, pseudo class, and pseudo elements to style elements.
  2. Learn font and text effects, including @font-face.
  3. Learn new gradient, mask, and background image techniques.
  4. Learn how to implement animations, transitions, and 2D and 3D transforms.
  5. Learn how to use media queries to render content appropriately for mobile and tablet devices.
  6. Learn about vendor-specific prefixes and browser support for various CSS techniques.
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 in our Live Online and our Onsite classes receives 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:

Preparing for Class

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

59,394

Students who have taken Instructor-led Training

11,600

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.38

Students rated our trainers 9.38 out of 10 based on 11,392 reviews

The teacher more than met my expectations. I would recommend to others.

Hakim Hazaimeh, BAKERHUGHES
Suger Land TX

The instructor did an unbelievable job helping me learn many aspects of the Exchange Environment.

Will Jenkins, United Shore Financial Services
Troy MI

Great course. I'd recommend this course to anyone using Excel.

Charlie Bowering, Veyance Technologies
Bowmanville ON

Webucator went above and beyond my expectations for an online course. I would highly recommend them to anyone.

Liana Hoffman, Sierra Lobo, Inc.
Milan OH

Contact Us or call 1-877-932-8228