Angular 2+: Angular Styling and Animations Video Course

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