Angular Styling & Animations (for Angular 2+)

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Introduction

Lecture 2: Join our Online Learning Community

Lecture 3: Understanding the Prerequisites

Lecture 4: Important: Creating a Project with the Angular CLI

Lecture 5: Creating a Project (Course Setup)

Lecture 6: Our First Project

Lecture 7: The Structure of This Course

Lecture 8: How to get the Most out of this Course

Chapter 2: Styling Angular Apps Dynamically

Lecture 1: Module Introduction

Lecture 2: Adding Application-wide Styles

Lecture 3: Let's Practice Application-wide Styles

Lecture 4: Adding CSS Frameworks or External Styles to Your App

Lecture 5: How to Add Global Styles in a CLI Project

Lecture 6: How to use NPM to install CSS Frameworks

Lecture 7: Understanding Component-scoped Styles

Lecture 8: Using Component-Scoped Styles

Lecture 9: Using Inline Styles in Components

Lecture 10: Using <style> Tags in Component Templates

Lecture 11: The Theory Behind Angular's View Encapsulation

Lecture 12: How Angular Emulates the Shadow DOM

Lecture 13: Changing the View Encapsulation Behavior

Lecture 14: Using the Native Shadow DOM

Lecture 15: How to Turn Off View Encapsulation

Lecture 16: Special CSS Selectors: :host

Lecture 17: Using the Function Form of :host

Lecture 18: Styling Components by Using their Selector

Lecture 19: Special CSS Selectors: :host-context

Lecture 20: Special CSS Selectors: /deep/

Lecture 21: Understanding ngClass Syntax

Lecture 22: Using ngClass to Add CSS Classes Dynamically

Lecture 23: Understanding ngStyle Syntax

Lecture 24: Using ngStyle to Dynamically Adjust CSS Styles

Lecture 25: ngStyle: camelCase vs 'real-name'

Lecture 26: Using the Angular Renderer to Adjust CSS Styles

Lecture 27: Project: Introduction to the Course Project

Lecture 28: Project: Adding Bootstrap Styling (CSS Framework)

Lecture 29: Project: Planning the Next Steps

Lecture 30: Project: Adding Margin (Component-scoped)

Lecture 31: Project: Styling Items in A List

Lecture 32: Project: Dynamically Mark Items

Lecture 33: Project: Challenge – Style Status Changes

Lecture 34: Project: Let's Style Status Labels

Lecture 35: Project: Styling Inactive Items & Finishing Touches

Chapter 3: Moving Things with CSS Animations

Lecture 1: Module Introduction

Lecture 2: Understanding the CSS Transition Property

Lecture 3: Using the Transition Property to Add Transitions

Lecture 4: More About the CSS Transition Property & Timing Functions

Lecture 5: Configuring Multiple Transitions

Lecture 6: Understanding the CSS Animation Property

Lecture 7: More About the CSS Animation Property

Lecture 8: Using the Animation Property to Add Animations

Lecture 9: Project: Your Challenge!

Lecture 10: Project: Implementing an Animated Loading Bar

Lecture 11: Project: Transitioning Border Colors

Lecture 12: Project: Animating the Selection ("marked") of List Items

Lecture 13: Transitions vs Animations vs Angular Animations

Chapter 4: Diving into the Angular Animation Package

Lecture 1: Want to use Angular 2 instead of Angular 4?

Lecture 2: Module Introduction

Lecture 3: How Animations work in Angular

Lecture 4: Browser Support & Polyfills

Lecture 5: Unlocking Animations with the Right Module

Lecture 6: Getting Started with Triggers and States

Lecture 7: Which Properties are Animatable?

Lecture 8: Assigning Triggers to Elements in the Template

Lecture 9: Switching Trigger States Dynamically

Lecture 10: Adding Transitions between States

Lecture 11: Using Multiple Transitions

Lecture 12: Build more Complex Triggers with More States

Lecture 13: Configuring Elegant Transitions When Using Many States

Lecture 14: Understand the Re-Usability of Triggers

Lecture 15: Using Multiple Triggers

Lecture 16: Creating Multi-Step Transitions

Lecture 17: Multi-Step Transitions and Temporary Styles

Lecture 18: A Bug in Angular 4 Animations

Lecture 19: Styling States and Animations Correctly

Lecture 20: CSS Animations vs Angular Animations

Lecture 21: Outsourcing Animations

Lecture 22: Project: Your Challenge!

Lecture 23: Project: Setting Up Animations

Lecture 24: Project: Adding Triggers and States

Lecture 25: Project: Adding Transitions

Lecture 26: Project: Using Multi-Step Transitions

Lecture 27: Project: Cleaning Up Some CSS

Lecture 28: Project: Using Temporary Styles in Transitions

Chapter 5: Becoming an Angular Animations Pro

Lecture 1: Module Introduction

Lecture 2: Animations We Can't Create As Of Now

Lecture 3: Using the "void" State in Transitions

Lecture 4: Using the "*" Wildcard State in Transitions

Lecture 5: Using Dynamic Dimensionial Properties

Lecture 6: Animating Lists

Lecture 7: Using Animation Groups for Parallel Animations

Lecture 8: Understanding Timing Functions (ease-in etc)

Lecture 9: Control Everything with Animation Keyframes

Lecture 10: Multi-Step Transitions vs Animation Groups vs Keyframes

Lecture 11: Reacting to Animation Events