• Web Introduction
• Client-side Technologies overview
• Different Types of Web Apps overview
• Web Designer vs Web Developer
• HTML Introduction
• Structure of HTML
• Tag vs Element
• Semantic vs Non-semantic elements
• Block level elements vs Inline elements
• HTML Elements deep dive
• HTML Forms & its Attributes
• HTML Input Elements
• HTML Global Attributes
• HTML Element Specific Attributes
• HTML5 Validations

Real-time Practicals

• Create a Registration form with all possible input elements and implement the below things,

• What is CSS?
• Understanding the CSS Syntax.
• CSS Selectors.
• How To Add CSS in HTML.
• Cascading Order.
• CSS Colors.
• CSS Backgrounds.
• CSS Borders
• CSS Margins
• CSS Padding
• CSS Height and Width
• CSS Text
• CSS Fonts
• CSS Links
• CSS Tables
• CSS – Display Property
• CSS – Position Property
• CSS – Overflow Property
• CSS – Float and Clear
• The display: inline-block Value
• CSS Attribute Selectors
• CSS Box Sizing

Real-time Practicals

• Implement all the above CSS concepts in real-time.
• Create a Nice template with mobile responsiveness.

• Bootstrap Introduction
• Get Start with Bootstrap
• Containers
• Grid System
• Structure of a Bootstrap Grid
• Bootstrap Colors
• Bootstrap Tables
• Bootstrap Jumbotron
• Bootstrap Alerts
• Bootstrap Buttons
• Bootstrap Navs
• Navigation Bars
• Bootstrap Forms
• Bootstrap Modal

Real-time Practicals

• Apply All above Bootstrap classes in real-time.
• Create a Mobile responsive Template with header, navs, footer, etc.,

• Introduction to Client Side Scripting
• Introduction to JavaScript
• Variables in JavaScript
• Rules to create variables in JS<
• What is varibale declaration and What is variable definition?
• Variable Scopes
• List of Data Types in JavaScript

• What is Event in JS ?
• Onload, Onunload, Onsubmit, OnFocus, Onchange Event, Onblur Event, Onmouseover, Onclick, Ondbclick Events, etc.,

• What is function?
• How to define Functions in JS?
• What are the functions available in JS?
• Function Invocation Types.
• How to pass Arguments & Parameters in Function?

• String inbuilt methods
• Number and Math inbuilt methods
• Array inbuilt methods

• Array Overview.
• How to Manipulate (Add, Edit, Delete) Array Elements ?
• Array Sort.

• JS Object Overview.
• Object Structure in JS.
• Object Properties and Methods.
• How to add New Properties and Methods in Existing Object ?
• Object Creation ways in JS

• Conditions Statements (If, If Else, Switch)
• JavaScript Loops (For Loop, While Loop, Do While Loop and for in loop)

• DOM Introduction.
• Methods of Finding HTML Elements.
• Methods of Finding HTML Elements.
• Methods of Changing HTML Elements.
• Methods of Add/Delete HTML Elements.
• Event Listener Overview.

• What is timer function?
• setTimeout() – overview
• setInterval() – Overview

• Client-side Storage Overview
• What is Local Storage?
• What is Session Storage?
• Difference between Local Storage & Session Storage
• Set, Get, Remove methods in Local Storage & Session Storage

• What is JSON?
• Purpose of the JSON
• How to convert JS object into JSON object?
• How to convert JSON object into JS object?
• How to parse complex JSON Data Structure.

• What is AJAX?
• Synchronous vs Asynchronous.
• What is XMLHttpRequest Object?
• What are the properties and methods available in XMLHttpRequest Object?
• How to receive HTTP response?

Learning Objective: Here you will learn about JavaScript vs TypeScript, and the pros and cons of TS. Understand the process of how to compile TS into JS, Why we need to move to TS instead of JS, etc.,

• What is TypeScript?
• Features of TypeScript.
• How to compile TypeScript into JS?
• What is Transpilation?

Learning Objective: Here you understand importance of Node JS and its NPM types. How to install NPMs as a globally and locally. You can realize the benefits of NPMs and its features.

• What is Node?
• Node Environment setups.
• A Brief Node Introduction.
• What is Node Modules?
• What are the Types of Node Modules available?
• What is Local & Global Module?

Learning Objective: Write your own 1st TypeScript code, compile into JavaScript and see the output in browser as well as cmd terminal.

• Install TypeScript Engine in Node.
• Execute the 1stTypeScript code.
• What is watcher?
• Introduction of ts-node NPM.

Learning Objective: Learn here that How variables are strongly specified and also get knowledge in Static vs Dynamic type checking.

• Difference between Static & Dynamic type checking.
• How to Declare & Define Variables in TS?
• What is any in TS?
• Difference between let & var.
• Template string introduction.

Learning Objective: Understand different Data Types and their features in TS and ECMA script. Learn, How these variables are very much needed in the real-time project.

• Brief Introduction of below types,
  – String
  – Number
  – Boolean
  – Array
  – Object
  – Tuple
  – Enum
  – Any
  – Void
  – Never
  – Null
  – Undefined

Learning Objective: Explore the difference between the JS & TS Parameter and different list of Parameters available in TS & how it works.

• Difference between JS parameter & TS Parameter.
• Let vs var vs const
• Passing Parameters to the functions.
• How to pass optional parameter?
• What is Default Parameter?
• How to use default parameter before required parameter?
• Rest Parameter overview.

Learning Objective: Explore the features of TS and how it differs from JS. You can understand that how these features are simplifying our JS works.

• Arrow functions.
• Where to use Arrow functions?
• Destructing an Array.
• Destructing and Object.

Learning Objective: Learn OOPS concepts in TypeScript. It is one of the main and important feature in TS. You can learn how to write JavaScript with OOPS concepts and build your Application with Programing structure, Reusability and Code maintainability.

• What is Class?
• What is Class definition? ?
• What is Object? ?
• How to Create Object?
• Brief introduction about,
  – Property
  – Method
  – Constructor
• What is Inheritance?
• Different types of Inheritance in TS. ?
• Access modifiers in TS. ?
• Readonly in TS. ?
• Static Property & Methods in TS.
• Interface in TypeScript.

Learning Objective: In this section, you will learn about How the Angular framework was invented and its version history, SPA vs Traditional App, etc., Also you can gain knowledge of how MVC works in both front-end & back-end.

• What is Angular?
• Difference between Framework & Library?
• History of Angular and its versions.
• Why Angular?
• Features of Angular.
• What is Single Page Application?
• Difference between SPA & Traditional Application.
• What is MVC?
• How MVC works in Client & Server sides?

Learning Objective: In this section, you will learn about How the Angular framework was invented and its version history, SPA vs Traditional App, etc., Also you can gain knowledge of how MVC works in both front-end & back-end.

• What is Angular CLI?
• Purpose of the CLI.
• Angular CLI installation.
• CLI vs Without CLI Overview.
• Create an Angular App by using CLI.
• Compiling the Angular App & Open it in a browser.
• Angular app Bootstrapping process.
• Angular libraries
• Brief explanation about the structure of the Angular App.

Learning Objective: Here you can understand the pillers of Angular. You came to know that how an Angular app structured with these main building blocks.

• An Overview of the below Main Building blocks of Angular
  – Modules
  – Components
  – Decorator
  – MetaData
  – Templates
  – Data binding
  – Directives
  – Services
  – Dependency Injection.

Learning Objective: Here, gain deep knowledge of why Angular Modules are very much important & Why its very much needed, How to Create & Utilize the Modules and explore what are the different types of Modules Available.

• Angular Module Overview.
• Importance of the Module.
• Why Modules?
• Root Module, Core Module, Feature Module and Shared Module – Overview.
• How to create Angular Modules?
• @NgModule Decorator & its Meta data properties – Overview.
• How to Import & Export Module?

Learning Objective: Learn how to render a template in the browser by using Components and what are the ways to bring the components into view. Also, know how to use styles and their scope.

• Angular Component – Overview.
• @Component decorator & its Meta data properties.
• Root Component – Overview
• How to create a Component manually and through CLI?
• Component’s Structure overview.
• Component in an Action
• What is Instance of the Component?
• What are the ways to render a Component in the view?
• Component Lifecycle Hooks.
• Nested or Parent & Child Component – Overview
• Components Interactions overview.
• How to pass Data from Parent to Child & Child to Parent?

Learning Objective: Here you can learn how to bind the application data into the view by using different types of Bindings. Also you can understand the 2-way Data binding that is the main feature of Angular.

• Data Binding Introduction
• String Interpolation.
• Property Binding – Overview.
• Custom Property Binding.
• Overview of Event Binding.
• String Interpolation VS Property Binding
• Two-way Data Binding – Deep dive.
• Implementing the 2-way Data Binding and understanding the process.
• Style Binding, Class Binding.
• Element reference and $event service in Angular.
• Event Filtering

Learning Objective: Explore the importance of Services, Difference between Singleton Object vs Regular Object. Also you can understand how to maintain the data throughtout the application and Globalization methods.

• Service – Introduction.
• Importance of Service.
• How to create Services in Angular?
• What are the ways to Provide Services in Angular?
• Dependency Injection – Overview.
• How to use Dependency Injection?
• Singleton Object – Overview
• Singleton Obj VS Regular Obj
• What is Providers?
• What is @Injectable()?
• Registering a Service in Providers VS @Injectable() Decorators
• What is Hierarchical DI?

Learning Objective: Understand the power of Directives and how it’s reducing the multiline code which we used for DOM manipulations. You can able to create your custom Directive.

• Directives – Introduction.
• Component VS Directives
• What are the Different kind of Directives available in Angular?
• Difference between Structural & Attribute Directives.
• Overview of All Structural & Attribute Directives.
– ngIf
– ngFor
– ngSwitch
– hidden
– ngClass
– ngStyle
– ngNonBindable
– ngTempate
– ngContent
– ng-container
– ng-template
• Difference between ngIf & hidden directives.
• How to create Custom Directives?
• @Directive Decorator and its Meta data properties.
• How to pass Input property to the custom directive?
• How to receive Input property from the outside of the directive?
• @Input decorator and its methods.
• What is ElementRef and its purpose?
• @HostListner decorator overview.

• What is Pipe in Angular?
• Purpose of the Pipes.
• Difference between Pipes & Directives.
• Detailed explanation of the below Pipes,
  – Lowercase
  – Uppercase
  – Titlecase
  – Slice
  – Json
  – Number
  – Percent
  – Currency
  – Date
• What is Pure Pipe & Impure Pipe?
• How to create Custom Pipes?
• What is chaining Pipes?
• What is Parameterized Pipe?

• Overview of Components Interaction.
• Share data between components by using Service.
• Component Interaction from Parent to Child.
• Component Interaction from Child to Parent.
• @ViewChild decorator overview
• @Input & @Output decorator overview
• Custom Event Binding
• Components Interaction by using Event Emitter & Subject and observable

• What is Event Emitter?
• When to use Event Emitter?
• How to transfer data with Event Emitter?
• How to create Custom Events and Trigger?
• View Encapsulation Overview.
• What is ng-content and its purpose?
• ng-container Directive overview.

• What is Template Driven Form?
• Purpose of Form in Angular.
• How to setup a form in Angular?
• What is form control and how to set it?
• What is ngForm?
• How to Access form values?
• What are the form states available in Angular?
• TD form Validations.
• HTML5 Validation vs Angular form Validation.
• How to set prepopulate values in form fields?
• Setup One-way data binding in Angular.

• What is Reactive Form?
• Difference between Template Drive & Reactive Form
• What is form group & form control?
• How to sync view & Reactive form TS?
• What is Patch Values & Set Values?
• How to attach Dynamic Validations?
• How to get Reactive from Values?
• Create Dynamic Form by using Reactive Form

• What is Service in Angular?
• Create & configure Service in Angular.
• How to do Dependency Injection in Angular?
• What is Singleton Object?
• Multiple DI in single Class.

<
• What is Routing?
• How Routing makes our App into SPA?
• How to configure Routing in an Application?
• Load our components dynamically based on url path.
• How to create Child Route?
• Navigating to other links programmatically.
• Passing Parameter to the Routes.
• Static Route vs Dynamic Route.
• Fetching Route Params.
• Router Directives overview
• Client-side authorization using Route Guard

• HTTP Client in Angular.
• REST API Overview
• How to establish HTTP request to Server side.
• How HTTP Mechanism works?
• What are the methods available in HTTP?
• What is Observable & Observer?
• What are the call back methods available in Observable?
• How to create a Custom Observable?
• What is next(), error() and complete() ?
• How to send Query Params & Custom Headers?
• How to connect any backend & APIs?
• What is CORS?
• How to resolve CORS errors?

• Client side Authorization vs Server side Authorization.
• Server side Authorization by using JWT Token.
• Set JWT Key Expiry time.
• HTTP interceptors – Overview.
• How to configure HTTP interceptors?

• Angular form setups for File Upload.
• FormData() in Angular
• Server side setups for File Upload.
• Multer NPM in Node.
• How to use Multer NPM as middleware in Node?
• Attach the Multer middleware in server-side routing.

During the course we will take one Real-time E-commerce application and apply all the above sections into the project. In the project Front-end will be in Angular and Back-end will be in Node JS. On top of the Node JS we will write Express JS as a REST Api. For Database, we choosed MongoDB for CURD Operations.