McAfee-Secured Website

Course name Web Development Courses Angular 2+: Angular Styling and Animations: Angular 2+: Angular Styling and Animations

Angular 2+: Angular Styling and Animations Video Course

Angular 2+: Angular Styling and Animations Video Course is developed by Web Development Courses Professionals to help you pass the Angular 2+: Angular Styling and Animations exam.

You Will Learn:

Was 21.99 USD
Now 19.99 USD

Description

This course will improve your knowledge and skills required to pass Angular 2+: Angular Styling and Animations exam.

Curriculum For This Course

  • 1. Getting Started 6 Videos 00:22:09
    • Introduction 02:12
    • Understanding the Prerequisites 02:56
    • Creating a Project (Course Setup) 03:46
    • Our First Project 09:38
    • The Structure of This Course 01:48
    • How to get the Most out of this Course 01:50
  • 2. Styling Angular Apps Dynamically 34 Videos 01:46:56
    • Module Introduction 01:21
    • Adding Application-wide Styles 01:57
    • Let's Practice Application-wide Styles 05:50
    • Adding CSS Frameworks or External Styles to Your App 04:30
    • How to Add Global Styles in a CLI Project 02:58
    • How to use NPM to install CSS Frameworks 03:11
    • Understanding Component-scoped Styles 01:09
    • Using Component-Scoped Styles 03:01
    • Using Inline Styles in Components 01:41
    • Using 'style' Tags in Component Templates 02:11
    • The Theory Behind Angular's View Encapsulation 06:12
    • How Angular Emulates the Shadow DOM 03:03
    • Changing the View Encapsulation Behavior 01:57
    • Using the Native Shadow DOM 03:25
    • How to Turn Off View Encapsulation 01:49
    • Special CSS Selectors: :host 03:53
    • Using the Function Form of :host 01:46
    • Styling Components by Using their Selector 02:09
    • Special CSS Selectors: :host-context 04:36
    • Special CSS Selectors: /deep/ 03:58
    • Understanding ngClass Syntax 02:02
    • Using ngClass to Add CSS Classes Dynamically 03:42
    • Understanding ngStyle Syntax 02:01
    • Using ngStyle to Dynamically Adjust CSS Styles 02:40
    • Using the Angular Renderer to Adjust CSS Styles 07:04
    • Project: Introduction to the Course Project 03:36
    • Project: Adding Bootstrap Styling (CSS Framework) 02:54
    • Project: Planning the Next Steps 02:39
    • Project: Adding Margin (Component-scoped) 01:37
    • Project: Styling Items in A List 04:18
    • Project: Dynamically Mark Items 04:47
    • Project: Challenge - Style Status Changes 01:51
    • Project: Let's Style Status Labels 03:25
    • Project: Styling Inactive Items & Finishing Touches 03:45
  • 3. Moving Things with CSS Animations 11 Videos 00:34:01
    • Module Introduction 01:00
    • Understanding the CSS Transition Property 01:45
    • Using the Transition Property to Add Transitions 03:40
    • Configuring Multiple Transitions 03:10
    • Understanding the CSS Animation Property 02:19
    • Using the Animation Property to Add Animations 07:15
    • Project: Your Challenge! 01:30
    • Project: Implementing an Animated Loading Bar 04:41
    • Project: Transitioning Border Colors 01:54
    • Project: Animating the Selection ("marked") of List Items 02:27
    • Transitions vs Animations vs Angular Animations 04:24
  • 4. Diving into the Angular Animation Package 25 Videos 01:28:44
    • Module Introduction 01:08
    • How Animations work in Angular 04:05
    • Browser Support & Polyfills 03:42
    • Unlocking Animations with the Right Module 01:50
    • Getting Started with Triggers and States 07:49
    • Assigning Triggers to Elements in the Template 02:47
    • Switching Trigger States Dynamically 03:45
    • Adding Transitions between States 05:57
    • Using Multiple Transitions 02:03
    • Build more Complex Triggers with More States 03:41
    • Configuring Elegant Transitions When Using Many States 02:35
    • Understand the Re-Usability of Triggers 02:22
    • Using Multiple Triggers 06:41
    • Creating Multi-Step Transitions 06:07
    • Multi-Step Transitions and Temporary Styles 03:08
    • Styling States and Animations Correctly 04:36
    • CSS Animations vs Angular Animations 03:34
    • Outsourcing Animations 03:05
    • Project: Your Challenge! 02:55
    • Project: Setting Up Animations 01:58
    • Project: Adding Triggers and States 05:43
    • Project: Adding Transitions 02:15
    • Project: Using Multi-Step Transitions 02:22
    • Project: Cleaning Up Some CSS 02:23
    • Project: Using Temporary Styles in Transitions 02:19
  • 5. Becoming an Angular Animations Pro 24 Videos 01:53:07
    • Module Introduction 00:54
    • Animations We Can't Create As Of Now 05:51
    • Using the "void" State in Transitions 03:19
    • Using the "*" Wildcard State in Transitions 03:52
    • Using Dynamic Dimensionial Properties 07:03
    • Animating Lists 03:51
    • Using Animation Groups for Parallel Animations 05:25
    • Understanding Timing Functions (ease-in etc) 06:16
    • Control Everything with Animation Keyframes 08:24
    • Multi-Step Transitions vs Animation Groups vs Keyframes 04:43
    • Reacting to Animation Events 04:37
    • A First Summary 01:24
    • Project: Next Steps & Your Challenge 01:45
    • Project: Adding a Basic List Animation 05:33
    • Project: Creating a Better List Animation with Keyframes 05:17
    • Project: Creating a Staggered List 06:14
    • Project: Sliding Things Around 04:51
    • Project: Sliding List Items Around 05:28
    • Project: Synchronizing Animations 03:27
    • Project: Animating a Button depending on Form Validity 07:24
    • How to Animate Routing 02:27
    • Project: Creating a Basic Route Animation (Fade-in-out) 09:32
    • Project: Getting Fancy: A Slide-down Route Animation 04:24
    • Project Wrap Up 01:09
  • 6. New Animation Features with Angular 4.2 14 Videos 00:58:31
    • Module Introduction 02:25
    • Using the new query() Method 06:20
    • More on query() 02:40
    • Special Selectors for query() 05:35
    • query() Options 01:45
    • Combining query() Selectors 02:05
    • Adding Query to the Course Project 06:40
    • Fixing a Small Bug with query() and the Course Project 00:41
    • Easy Staggering Animations with stagger() 08:11
    • Creating Re-Usable Animations 04:23
    • Creating and Running Animations Programmatically 04:44
    • Improved Route Animations 10:43
    • An Issue with Route Animations 01:45
    • Wrap Up 00:39