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:

Training for your Team

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

Training for Yourself

$890.00 or 2 vouchers

Upcoming Live Online 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 feel like I know GA inside and out now. I am excited to bring my knowledge back and start applying within my organization.
Kate Ludwig
None
Instructor was awesome. Communication strategies she taught will come in handy for any implementation and for all types of personalities. Change management transition strategies were well put. Lots of examples were used to reinforce the concepts.
Mahalakshmi Dhevarajan
n/a
Very informative, hands on learning.
Debbi Smith
First Street Management
The instructor was informative, patient and truly taught the class where I feel I can use PowerPoint and even as a beginner.
Jasmine Borrego
TELACU Residential Management

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

62,326

Students who have taken Instructor-led Training

11,815

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