Modernizing Your CSS Skills

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

Training for your Team

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

Training for Yourself

$790.00 or 2 vouchers

Upcoming Classes

  • See More Classes

Please select a class.
  • Live Online Training
  • For Individuals
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

What people say about our training

I went from knowing nothing to knowing enough to create forms with confidence. The instructor was patient and went at a good pace. She also speaks very clearly.
Anne Mahoney
Watermark Estate Management Services, LLC
This is a great course to learn the basic foundation of VBA.
Vell Lyles
Community College of Baltimore County
The instructor did an amazing job of teaching us the basics of CSS, HTML and Wordpress. I'd highly recommend using her for your businesses web training.
Aaron Wilson
Novak Birch
The format that Webucator uses enables me to learn at my own pace. I also gain knowledge of shortcuts and ways to make me more efficient at my job and maximize my time within the Microsoft programs. This in turn makes me more productive in my day to day jobs.
Cortney Churchill
W.W. Grainger

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

61,268

Students who have taken Instructor-led Training

11,739

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.26

Students rated our Modernizing Your CSS Skills trainers 9.26 out of 10 based on 3 reviews

Contact Us or call 1-877-932-8228