1. UI
COURSE CONTENT
(HTML,CSS,BOOTSTRAP, JAVASCRIPT, ES6)
Session-1 - 60 mins
UI Technologies Course Content
• Introduction of UI Technologies
• UI Developer roles and Responsibilities
• Technologies around HTML
Basics of HTML & CSS
• Document Object Model (DOM)
• Structure of HTML Page
• Mandatory tags in the HTML page (HTML, head, body)
• What is CSS
• Different ways of applying CSS for elements, and priority chain of CSS
• Heading tags(H1…H6), Tags and attributes(Class, Id, style..etc)
• Inline and block-level elements
HTML Tags
• Including external page links in a page using anchor tags and its properties
• Working with row and column data using table tags
• Hiding and unhiding elements using display property
• image tag, p tag, ul and ol tags, li, nobr, hr, br etc
• Layouts, forms, buttons
• Input fields ( text box, radio button, checkbox, dropdown, text area etc)
HTML5
• List of Browsers support HTML5
• Media tags (audio and video tags)
• Graphics using Canvas tag
• Drag and Drop features
• Working on locations lat and long using Geolocation
• Storing user preferences using LocalStorage.
Form Elements
• Get & Post
• Validating input values in a form
• Form action and type
Session-2 - 60mins
CSS properties
• Adding borders, font, pseudo classes
• Positioning elements (absolute, relative, fixed and static)
• Box model (margins, padding)
• Floating elements (float left, right etc.)
• Including external resources
• Absolute and Relative Paths
• Including external resources like CSS, images etc
CSS 3
• Difference between CSS2 and CSS3
2. • Adding borders and backgrounds
• Advanced text effects(shadow)
• Adding Transitions to elements
• Responsive Designs
• Difference between multiple devices, making a page to work on multiple devices
• Media queries
Bootstrap
• What is Bootstrap Framework
• Advantages of Bootstrap Framework
• What is Responsive web page
• What is Mobile-First Strategy
• Setting up Environment
• How to apply Bootstrap to Applications
Bootstrap Grid
• What is Bootstrap Grid & How to apply Bootstrap Grid
• What is Container
• What is Offset Column
• How to change class properties
• How to use Typography
• What is Bootstrap Tables
• What is Bootstrap Form Layout
• How to hide or show the text in Bootstrap
Bootstrap Components
• Why Bootstrap Components & Advantages
• What are the different types of Bootstrap Components
• How to use Glyphicons Component
• What is Bootstrap Dropdown Menu Component
• How to use Button Groups and Button Toolbar
• What are different Input Groups Components
• What is Navigation Pills & Tabs Components
• How to build a Responsive Navbar
• How to Add Forms and other controls toNavbar
• What is Jumbotron / Page Header Components
• How to Create Progress Bar
• What is Media Objects Component
• What is Bootstrap List Group Component
• What is Bootstrap Panel Component
Session-3 & 4 - 90 mins
JavaScript
• Introduction
• Data types and data structures in Js
• Control structures, if, if-else, while, for, switch case statements
• Dynamic creation and manipulation of DOM elements using JS
• Adding dynamic event listeners to DOM elements
• Event capturing and event bubbling
• Validations using key char codes
• JavaScript Supported Data structures
• Arrays & Objects
3. • Predefined methods in arrays
• Strings and predefined methods
Session-4 & 5 - 90 mins
Advanced JavaScript ES6
• Adding methods for an object
• Module Introduction
• Understanding "let" and "const"
• Arrow Functions
• Exports and Imports
• Understanding Classes
• Classes, Properties and Methods
• The Spread & Rest Operator
• Destructuring
• Reference and Primitive Types Refresher
• Refreshing Array Functions
• Wrap Up
• Next-Gen JavaScript - Summary
• JS Array Functions
(300 mins - 5 HRS)
4. ANGULAR COURSE CONTENT -
(1200mins - 20HRS)
1: Getting Started
40min
Course Introduction - What is Angular?
Angular vs Angular 2 vs Angular 9
CLI Deep Dive & Troubleshooting
Project Setup and First App
Brief about Typescript
TypeScript
30min
Types
Classes
Interfaces
Generics
Modules
2: The Basics
90min
Getting Started with Angular
Importance of Components
Creating a New Component
Understanding the Role of AppModule and Component Declaration
Using Custom Components
Creating Components with the CLI & Nesting Components
Working with Component Templates
Working with Component Styles
Fully Understanding the Component Selector
Data binding
String Interpolation
Property Binding
Event Binding
Two-Way-Data binding
FormsModule & Two-Way-Binding
Passing and Using Data with Event Binding
5. Understanding Directives
Using ngIf to Output Data Conditionally
Enhancing ngIf with an Else Condition
Styling Elements Dynamically with ngStyle
Applying CSS Classes Dynamically with ngClass
Outputting Lists with ngFor
Getting the Index when using ngFor
3: Debugging
15min
Understanding Angular Error Messages
Debugging Code in the Browser Using Source maps
Using Augury to Dive into Angular Apps
4: Components & Data binding
75min
Module Introduction
Defining Apps into Components
Property & Event Binding
Binding to Custom Properties
Binding to Custom Events
Understanding View Encapsulation
More on View Encapsulation
Using Local References in Templates
@ViewChild() in Angular
Access to the Template & DOM with @ViewChild
Components with ng-content
Understanding the Component Lifecycle
Lifecycle Hooks in Action
Lifecycle Hooks and Template Access
@ContentChild() in AngularGetting Access to ng-content with @ContentChild
5: Directives Deep Dive
45min
ngFor and ngIf Recap
ngClass and ngStyle Recap
Creating a Basic Attribute Directive
Using the Renderer to build a Better Attribute Directive
More about the Renderer
Using HostListener to Listen to Host Events
Using HostBinding to Bind to Host Properties
Binding to Directive Properties
Structural Directives
Building a Structural Directive
Understanding ngSwitch
6: Services & Dependency Injection
45min
Creating a Service
Injecting Service into Components
Creating a Data Service
6. Understanding the Hierarchical Injector
Instances of Service
Injecting Services into Services
Using Services for Cross-Component Communication
Services in Angular
7: Routing
120min
Router
Setting up Routes
Navigating with Links
Navigation Paths
Styling Active Router Links
Navigating Programmatically
Relative Paths in Programmatic Navigation
Passing Parameters to Routes
Fetching Route Parameters
Fetching Route Parameters Reactively
Passing Query Parameters and Fragments
Retrieving Query Parameters and Fragments
Child (Nested) Routes
Handling of Query Parameters
Redirecting and Wildcard Routes
Introduction to Guards
Protecting Routes with canActivate
Protecting Child (Nested) Routes with canActivateChild
Using Auth Service
Controlling Navigation with canDeactivate
Passing Static Data to a Route
Resolving Dynamic Data with the resolve Guard
Understanding Location Strategies
8: Understanding Observables
30min
Angular Observables
Building a Custom Observable
Understanding Operators
9: Handling Forms in Angular Apps
120min
Template-Driven (TD) vs Reactive Approach
TD: Creating the Form and Registering the Controls
TD: Submitting and Using the Form
TD: Understanding Form State
TD: Accessing the Form with @ViewChild
TD: Adding Validation to check User Input
Built-in Validators & Using HTML5 Validation
TD: Using the Form State
TD: Outputting Validation Error Messages
TD: Set Default Values with ngModel Property Binding
7. TD: Using ngModel with Two-Way-Binding
TD: Grouping Form Controls
TD: Handling Radio Buttons
TD: Setting and Patching Form Values
TD: Using Form Data
TD: Resetting Forms
Reactive Forms : Setup
Reactive: Creating a Form in Code
Reactive: Syncing HTML and Form
Reactive: Submitting the Form
Reactive: Adding Validation
Reactive: Getting Access to Controls
Reactive: Grouping Controls
Reactive: Arrays of Form Controls(FormArray)
Reactive: Creating Custom Validators
Reactive: Using Error Codes
Reactive: Creating a Custom Async Validator
Reactive: Reacting to Status or Value Changes
Reactive: Setting and Patching Values
10: Pipes
30min
Using Pipes
Chaining Multiple Pipes
Custom Pipe
Creating a Filter Pipe
Pure and Impure Pipes
Understanding the "async" Pipe
11: Http Requests
90min
How Does Angular Interact With Backends?
The Anatomy of a Http Request
Backend Setup
POST Request
GETting Data
RxJS Operators to Transform Response Data
Types with the HttpClient
Loading Indicator
Service for Http Requests
Services & Components Working Together
DELETE Request
Handling Errors
Using Subjects for Error Handling
Using the catchError Operator
Error Handling & UX
Setting Headers
Adding Query Params
Different Types of Responses
Introducing Interceptors
Manipulating Request Objects
8. Response Interceptors
Multiple Interceptors
12: Authentication & Route Protection
90min
Authentication
Adding the Auth Page
Switching Between Auth Modes
Handling Form Input
Preparing the Backend
Preparing the Signup Request
Sending the Signup Request
Adding a Loading Spinner & Error Handling Logic
Improving Error Handling
Sending Login Requests
Login Error Handling
Creating & Storing the User Data
Reflecting the Auth State in the UI
Adding the Token to Outgoing Requests
Attaching the Token with an Interceptor
Adding Logout
Adding Auto-Login
Adding Auto-Logout
Adding an Auth Guard
13: Angular Modules & Optimisation
90 min
Modules
AppModule
Feature Modules
Routes to Feature Modules
Component Declarations
Understanding Shared Modules
Understanding the Core Module
Adding an Auth Feature Module
Lazy Loading
Modules & Services
Ahead-of-Time Compilation
14: Unit Testing in Angular Apps
60min
About this Section
Unit Tests
Testing Setup (as created by the CLI)
Running Tests (with the CLI)
Adding a Component and some fitting Tests
Testing Dependencies: Components and Services
Simulating Async Tasks
Using "fakeAsync" and "tick"
Isolated vs Non-Isolated Tests
9. 15: Deploying an Angular App
40min
Deployment Preparation & Steps
Using Environment Variables
Deployment Example: Firebase Hosting
Server Routing vs Browser Routing
16: NgRx with Angular (Optional)
120min
Application State
NgRx
Reducers
Actions
NgRx Store
State
Dispatching Actions
Multiple Actions
Preparing Update & Delete Actions
Expanding the State
Managing More State via NgRx
Removing Redundant Component State Management
One Root State
Setting Up Auth Reducer & Actions
Dispatching Auth Actions
Exploring NgRx Effects
Effects & Error Handling Login
via NgRx Effects Managing UI
State in NgRx Preparing
Other Auth Actions Adding
Signup
Further Auth Effects
Adding Auto-Login with NgRx
Adding Auto-Logout
Using the Store Dev tools
The Router Store
17: Angular Universal (Optional)
20min
Angular Universal & ModuleMapLoader
Adding Angular Universal
Adding Angular Universal with NestJS
Deploying Universal Apps
Getting Started with Angular Universal
Adding a Server-Side Build Workflow
Adding a NodeJS Server
Pre-Rendering the App on the Server
18: Angular Animations (Optional)
20min
Making Animations Work with Angular
Setting up the Starting Project
10. Animations Triggers and State
Switching between States
Transitions
Advanced Transitions
Transition Phases
The "void" State
Using Keyframes for Animations
Grouping Transitions
Using Animation Callbacks
19: Offline Capabilities with Service Workers (Optional)
30min
Service Workers
Caching Assets for Offline Use
Caching Dynamic Assets & URLs
Further Links
NODE JS (600mins - 10 HRS)
1: Node JS Introduction
30min
Node.js
Installing Node.js and Creating our First App
Working with the REPL vs Using Files
Using the Attached Source Code
2: Understanding the Basics
30min
Creating a Node Server
The Node Lifecycle & Event Loop
Controlling the Node.js Process
Understanding Requests
Sending Responses
Request & Response Headers
Routing Requests
Redirecting Requests
Parsing Request Bodies
Understanding Event Driven Code Execution
Blocking and Non-Blocking Code
Node.js - Looking Behind the Scenes
Using the Node Modules System
Useful Resources & Links
11. 3: Improved Development Workflow and Debugging
50min
Understanding NPM Scripts
Installing 3rd Party Packages
Global Features vs Core Modules vs Third-Party Modules
Using Nodemon for Auto restarts
Global & Local npm Packages
Understanding different ErrorTypes
Finding & Fixing Syntax Errors
Dealing with Runtime Errors
Logical Errors
Using the Debugger
Restarting the Debugger Automatically After Editing our App
Debugging Node.js in Visual Studio Code
Changing Variables in the Debug Console
4: Working with Express.js
60min
What is Express.js?
Installing Express.js
Adding Middleware
Express.js - Looking Behind the Scenes
Handling Different Routes
Parsing Incoming Requests
Limiting Middleware Execution to POST Requests
Using Express Router
Adding a 404 Error Page
Filtering Paths
Creating HTML Pages
Serving HTML Pages
Returning a 404 Page
Using a Helper Function for Navigation
Styling our Pages
Serving Files Statically
5: Working with Dynamic Content & Adding Templating Engines
60min
Sharing Data Across Requests & Users
Templating Engines
Installing & Implementing Pug
Outputting Dynamic Content
Converting HTML Files to Pug
Adding a Layout
Finishing the Pug Template
Working with Handlebars
Converting our Project to Handlebars
Adding the Layout to Handlebars
Working with EJS
Working on the Layout with Partials
12. 6: The Model View Controller (MVC)
40min
What is the MVC?
Adding Controllers
Finishing the Controllers
Adding a Product Model
Storing Data in Files Via the Model
Fetching Data from Files Via the Model
Refactoring the File Storage Code
7: SQL Introduction
50min
Choosing a Database
NoSQL Introduction
Comparing SQL and NoSQL
Setting Up MySQL
Connecting our App to the SQL Database
Basic SQL & Creating a Table
Retrieving Data
Inserting Data Into the Database
Fetching with the "where" Condition
8: Understanding Sequelize
60min
What is Sequelize?
Connecting to the Database
Defining a Model
Syncing JS Definitions to the Database
Inserting Data & Creating
findById() in Sequelize 5
9: Working with NoSQL & Using MongoDB
150min
What is MongoDB?
Relations in NoSQL
Setting Up MongoDB
Installing the MongoDB Driver
Creating the Database Connection
Finishing the Database Connection
Using the Database Connection
Creating Products
Understanding the MongoDB Compass
10: Working with Mongoose
60min
What is Mongoose?
Connecting to the MongoDB Server with Mongoose
Creating the Schema
Saving Data Through Mongoose
13. 11: Node.js as a Build Tool & Using npm
20min
npm & Node.js
Using npm
Versioning in package.json
Build Tool?
Using Node.js in Build Processes
Useful Resources & Links
12: Modern JavaScript & NodeJS
30min
Working with ES Modules & Node
More on ES Modules
Node Core Modules & Promises
Module Resources
13: NodeJS & TypeScript
60min
TypeScript Setup
Assigning Types
Type Inference & Type Casting
Configuring TypeScript
Working with Union Types
Using Object & Array Types
Working with Type Aliases & Interfaces
Understanding Generics
Node & TypeScript: Setup
Getting Started with Node and TypeScript
Writing TypeScript Express.js Code
Adding REST Routes with TypeScript
Finishing the REST Routes
Testing the API
Using Type Casting