Angular Workshop Introduction 2 Tasks
Slides PDF
1 Install Chrome, Node, IDE
ca. 30 min
Preparation
2 Introduction of participants
ca. 15 min
Remote Workshop Introduction 3 Tasks
1 Install current version of Zoom
ca. 10 min
Preparation
2 Prepare your Headset / Headphones
ca. 10 min
Preparation
3 Ensure you have a stable internet connection
ca. 10 min
Preparation
TypeScript for Angular 1 Tasks
Slides PDF
1 Test your knowledge
ca. 10 min
Angular Basics 14 Tasks
Slides PDF
1 Explain the Nutshell
ca. 15 min
2 Create a new project
ca. 10 min
3 Generate two Submodules
ca. 15 min
4 Generate a Navigation Component
ca. 15 min
5 Create an Info-Box
ca. 15 min
6 Output mouse cursor position
ca. 15 min
7 Create a title @Input
ca. 15 min
8 Add a (titleClicked) @Output
ca. 10 min
9 Use *ngFor
ca. 10 min
10 Create a BookData service
ca. 15 min
11 Create an Observable
ca. 10 min
12 Load data from local API
ca. 10 min
13 Component LifeCycle Basic
ca. 10 min
14 Use the async pipe
ca. 10 min
Angular Routing 4 Tasks
Slides PDF
1 Add basic routing
ca. 15 min
2 Add BookDetail Route
ca. 15 min
3 Use Lazy Loading for BookModule
ca. 15 min
4 Build a canDeactivate Guard
ca. 10 min
Angular Forms 4 Tasks
Slides PDF
1 Create a BookEdit Component
ca. 15 min
2 Extend the BookEdit Component
ca. 15 min
3 Add a BookNew Form and Route
ca. 15 min
4 Extend BookData Service
ca. 15 min
HTML & CSS Basics 17 Tasks
Slides PDF
1 Website Police
ca. 5 min
2 Get familiar with codesandbox
ca. 5 min
3 Basic Structure
ca. 10 min
4 Food Blog Content
ca. 8 min
5 Basic Selectors
ca. 10 min
6 CSS Shopping
ca. 10 min
7 Combinators and Pseudo-classes
ca. 10 min
8 Pseudo-Elements
ca. 5 min
9 What will it look like? 🧐
ca. 10 min
10 Cascade, Inheritance and Normalize
ca. 5 min
11 BEM
ca. 10 min
12 Position
ca. 10 min
13 Flexbox
ca. 15 min
14 Length Units
ca. 10 min
15 Media Queries
ca. 10 min
16 Transform and Transitions
ca. 15 min
17 Custom Properties
ca. 10 min
Angular State Management (NgRx) 15 Tasks
Slides PDF
1 Setup
ca. 5 min
2 Dispatch an Action
ca. 10 min
3 Reducer
ca. 10 min
4 Store Select
5 Selector
ca. 5 min
6 Selectors with Parameters
7 ActionReducerMap<T>
ca. 5 min
8 Effects I
9 Effects II
ca. 15 min
10 Effects III
11 Router Store
ca. 15 min
12 Entity
13 Test | Mock Selector
ca. 10 min
14 Test | Action - Effect - Reducer - Selector
ca. 15 min
15 Test | Reducer
ca. 10 min
Angular A11y 8 Tasks
Slides PDF
1 Preparation for a11y tasks
ca. 5 min
Preparation
2 Check your page for color-blindness
ca. 5 min
3 Make your app accessible by keyboard
ca. 5 min
4 Use VoiceOver and fix missing html attributes
ca. 10 min
5 Run Codelyzer on your project
ca. 10 min
6 Run a lighthouse cli check
ca. 10 min
7 Write an axe unit test
ca. 20 min
8 Create and run an axe integration test
ca. 20 min
Parking Tasks 20 Tasks
1 Refactor App into screen and component files
ca. 10 min
2 Test setup
3 Pictorio: Create screen and header component
4 Create ColoredButtonsScreen
5 Add interactivity to the ColoredButtonsScreen (Event handling)
6 Test your knowledge
ca. 10 min
7 Add types and fix the errors
ca. 10 min
8 Create a HTML file
ca. 5 min
9 Fat Arrow Functions
ca. 15 min
10 Add basic background
ca. 5 min
11 Child Routing
12 Use Array Functions and Destructuring
ca. 15 min
13 Install VSCode with LiveShare
ca. 15 min
Preparation
14 Closures in Action
ca. 20 min
15 Add first script tag
ca. 5 min
16 Use your first function
ca. 5 min
17 Add bird as Image
ca. 5 min
18 The first test
19 Move bird forward
ca. 5 min
20 Read and Use BookDetail Parameters