Java UI Course Content
- 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