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:
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
-
Download Free Web Development Courses Angular 2+: Angular Styling and Animations Testing Engine Demo
Experience Testking Web Development Courses Angular 2+: Angular Styling and Animations exam Q&A testing engine for yourself.
Simply submit your e-mail address below to get started with our interactive software demo of your Web Development Courses Angular 2+: Angular Styling and Animations exam.
- Customizable, interactive testing engine
- Simulates real exam environment
- Instant download
* Our demo shows only a few questions from Web Development Courses Angular 2+: Angular Styling and Animations exam for evaluating purposes