UI Devlopment Advanced

Introduction to WEB

• W3C and W3C Members
• Why WHATWG?
• What is Web?

HTML Basics

• Introduction
• Parts in HTML Document
• Editors
• Basic
• Elements
• Attributes
• Headings
• Basics
• Paragraphs
• Formatting
• Links
• Head
• CSS
• Images
• Tables
• JavaScript
• HTML XHTML
• HTML4 Drawbacks

HTML5 Introduction

• HTML5 HISTORY
• New Features and groups
• Backward Compatibility
• Why HTML5?
• Power of HTML5:
• Common Terms in HTML5

HTML5 Syntax

• The DOCTYPE:
• Character Encoding:

Obsolete Elements/Deprecated Elements

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <isindex>
• <noframes>
• <s>
• <strike>
• <tt>
• <u>
• <xmp>

HTML5 New Elements

• New Semantic/Structural Elements
• <article>
• <aside>
• <bdi>
• <command>
• <details>
• <dialog>
• <summary>
• <figure>
• <figcaption>
• <footer>
• <header>
• <mark>
• <meter>
• <nav>
• <progress>
• <ruby>
• <rt>
• <rp>
• <section>
• <time>
• <wbr>

HTML5 Canvas

• What is Canvas?
• Create a Canvas
• Canvas Coordinates
• Canvas – Paths
• Canvas – Text
• Canvas – Gradients
• Canvas – Images

HTML5 SVG

• What is SVG?
• SVG Advantages
• Differences Between SVG and Canvas
• Comparison of Canvas and SVG

HTML5 Drag/Drop

• Introduction
• Make an Element Draggable
• What to Drag?Where to Drop?

HTML5 Geo location

• Introduction
• Locate the User’s Position+
• Handling Errors and Rejections
• The getCurrentPosition()
• Geolocation object

HTML5 Video

• Introduction
• Video on the Web
• How It Works?
• Video Formats and Browser Support
• HTML5 Video Tags

HTML5 Audio

• Introduction
• Audio on the Web
• How It Works?
• Audio Formats and Browser Support
• HTML5 Audio Tags

HTML5 Input Types

• Introduction
• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

HTML5 Form Elements

• <datalist>
• <keygen>
• <output>

HTML5 Form Attributes

• New attributes for <form> and <input> New attributes for <form>:
• autocomplete
• novalidate

New attributes for <input>

• autocomplete
• autofocus
• form, formaction
• formenctype,formmethod
• formnovalidate
• formtarget
• height and width
• list, min and max
• multiple
• pattern (regexp)
• placeholder
• required, step

HTML5 Semantic

• Introduction
• What are Semantic Elements?
• non-semantic elements: <div> and <span>
• semantic elements: <form>, <table>, and <img>

• New Semantic Elements in HTML5

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

HTML5 Web Storage

• What is HTML5 Web Storage?
• Browser Support
• The localStorage Object
• The sessionStorage Object

HTML5 App Cache

• What is Application Cache?
• Cache Manifest Basics
• HTML5 Cache Manifest

HTML5 Web Workers

• What is a Web Worker?
• Check Web Worker Support
• Create a Web Worker File
• Terminate a Web Worker

HTML5 SSE

• One Way Messaging
• Browser Support
• The EventSource Object

HTML Media

• New Media Elements
• <audio>
• <video>
• <source>
• <embed>
• <track>

HTML Multimedia

• What is Multimedia?
• Browser Support
• Multimedia Formats
• Video Formats
• Sound Formats

CSS 1.0 and 2.0

• CSS Basics
• CSS Introduction
• CSS Syntax,CSS Id, Class and CSS Styling,Styling Backgrounds
• Styling Text,Styling Fonts, Links, Styling Lists and Styling Tables
• CSS Border

CSS3

• Introduction
• CSS3 Modules
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

Borders

• border-radius
• box-shadow
• border-image

CSS3 Backgrounds

• background-size
• background-origin

CSS3 Text Effects

• text-shadow
• word-wrap

CSS3 Fonts

• @font-face Rule
• font-stretch
• font-weight

CSS3 2D Transforms

• How Does it Work?
• Browser Support
• 2D Transforms
• translate()
• rotate()
• scale()
• skew()
• matrix()

CSS3 3D Transforms

• rotateX()
• rotateY()

CSS3 Transitions

• How does it work?
• transition-property, duration and delay

CSS3 Animations

• CSS3 @keyframes Rule
• Browser Support
• Animation, animation-duration

CSS3 Multiple Columns

• column-count
• column-gap
• column-rule

CSS3 User Interface

• resize
• box-sizing
• outline-offset

Introduction to javascript

• Introduction of client side script
• Introduction of javascript
• Cross browser issues.
• Declaration syntax of javascript
• Statements
• Comments
• Popup Boxes
• Alert
• Confirm
• Prompt
• Variables, Arrays and Operators
• Variables
• Operators
• Arithmetic
• Assignment
• Comparison
• Logical

Document object model

• Functions and types
• Conversion functions

Conditional statements

• if
• if…else
• if…else if…else
• Switch

Loops

• while
• do…while
• for
• for…in Statement
• Break
• Continue

Window object Document object Arrays

• Associative Arrays
• Array Properties and Methods

Advanced JavaScript

• Date object
• This object
• Event object
• State managament
• Cookie
• Form validation
• Expressions
• Email validation
• Dynamic functionalities of html controls

Utilities

• Borders
• Clearfix
• Close icon
• Display
• Embeds
• Float
• Flexbox
• Horizontal align
• Image replacement
• Overflow
• Position
• Screenreaders
• Sizing
• Spacing
• Stretched link
• Text
• Vertical align
• Visibility

Typescript Deep Dive-Type Script Architecture

• Basic types
• Variable declarations
• Interfaces
• Classes
• Functions
• Generics
• Enums
• Type inference
• Type compatibility
• Advanced types
• Symbols
• Iterators
• Modules
• Namespaces
• Namespaces vs modules
• Module resolution declaration merging
• Decorators

Introduction To Angular

• Evolution of client side technologies
• What is Angular JS?
• What is Angular?
• Angular vs Angular JS
• Various versions of angular
• Angular architecture
• MVC and MVW Overview
• SPA Overview
• Angular Versions
• New Features added for Angular8
• IVY
• Angular Universe
• PWI : Progressive WebApps Introduction
• Performance Improvement Overview

Setting Up Environment For Angular

• Installing node
• GIT
• Yarn
• Angular

Angular Architecture

• Basic building blocks of angular application
• Intro to modules
  • – NgModule meta data
  • – NgModules & components
• NgModules & javascript modules
  • – Angular libraries

Introduction to components

• Component meta data
• Templates&views
• Template syntax
• Data binding
• User input
• String interpolation
• Component styles
• Angular element
• Angular directives
• Structural Type Directives
• Attribute Type Directives
• HostsListeners
• HostBinding
• Attribute
• Property& Attribute binding
• Property Binding vs Interpolation
• Class binding
• Event binding
• Custom event
• Nested components
• Communication Between components
• Component life cycle
• LifeCycleHooks

Angular Pipes

• What is pipe?
• Built-in angular pipes
• Creating custom pipes
• Registering & Integrating pipes

Angular Services

• Introduction to service & dependency injection
• Providing service
• Creating custom service
• Consuming ®istering service

Angular Forms

• Intro to forms in angular
• Various types of forms in angular
• Difference between template driven & reactive forms
• Common foundation
• Form model setup
• Setup in template driven forms
• Data flow in forms
• Form validation
• Dynamic forms
• Validating reactive & template driven
• Form state validation
• Input state validation
• Custom validation

Observables&Rxjs

• About observables
• RXJS library
• Use of observable in angular
• Compare RXJS with other techniques

NG Modules

• JS modules vs ng modules
• Frequently used ng modules
• Single ton service
• Lazy loading feature modules
• Sharing ng modules
• Ng module API

Dependency Injection

• Angular dependency injection
• Hierarchical injection
• DI providers
• DI in action

Httpclient

• Set up HTTP client
• Consume serice form onther technologies
• Creating API(REST API)
• Using node js
• Create API in node js
• Handling communalization using MEAN
• Mongo data base
• Express middleware
• Angular client APP
• Node js server side
• Creating and end to end app
• Handling CRUD operations

Routing & Navigation

• Router imports
• Router configuration
• Router outlet
• Router links
• Routing Resolvers
• Routing Guards
• Nested Routes
• Active router links
• Router state
• Router events

Angular Animations

• Transition & Triggers
• Complex sequences
• Roote transition animations

Angular Materials

• Tables
• Forms
• Tabs
• Grid Layout
• List Layout

Unit Testing In Angular

• Karma with jasmine
• Create unit tests
• Testing angular app

Advanced Topics

• JWT Tokens
• Optimization Concepts
• Lazy Loading Overview
• Angular Universal

Introduction To Web Technologies

• What is Web
• What are the Requirements to build End to End Web Application?
• What are the Challenges in modern web development?
• What is a Stack?

Typescript Deep Dive-Type Script Architecture

• Basic types
• Variable declarations
• Interfaces
• Classes
• Functions
• Generics
• Enums
• Type inference
• Type compatibility
• Advanced types
• Symbols
• Iterators
• Modules
• Namespaces
• Namespaces vs modules
• Module resolution declaration merging
• Decorators

Introduction To Angular

• Evolution of client side technologies
• What is Angular JS?
• What is Angular?
• Angular vs Angular JS
• Various versions of angular
• Angular architecture
• MVC and MVW Overview
• SPA Overview
• Angular Versions
• New Features added for Angular8
• IVY
• Angular Universe
• PWI : Progressive WebApps Introduction
• Performance Improvement Overview

Setting Up Environment For Angular

• Installing node
• GIT
• Yarn
• Angular

Angular Architecture

• Basic building blocks of angular application
• Intro to modules
  • – NgModule meta data
  • – NgModules & components
• NgModules & javascript modules
  • – Angular libraries

Introduction to components

• Component meta data
• Templates&views
• Template syntax
• Data binding
• User input
• String interpolation
• Component styles
• Angular element
• Angular directives
• Structural Type Directives
• Attribute Type Directives
• HostsListeners
• HostBinding
• Attribute
• Property& Attribute binding
• Property Binding vs Interpolation
• Class binding
• Event binding
• Custom event
• Nested components
• Communication Between components
• Component life cycle
• LifeCycleHooks

Angular Pipes

• What is pipe?
• Built-in angular pipes
• Creating custom pipes
• Registering & Integrating pipes

Angular Services

• Introduction to service & dependency injection
• Providing service
• Creating custom service
• Consuming ®istering service

Angular Forms

• Intro to forms in angular
• Various types of forms in angular
• Difference between template driven & reactive forms
• Common foundation
• Form model setup
• Setup in template driven forms
• Data flow in forms
• Form validation
• Dynamic forms
• Validating reactive & template driven
• Form state validation
• Input state validation
• Custom validation

Observables&Rxjs

• About observables
• RXJS library
• Use of observable in angular
• Compare RXJS with other techniques

NG Modules

• JS modules vs ng modules
• Frequently used ng modules
• Single ton service
• Lazy loading feature modules
• Sharing ng modules
• Ng module API

Dependency Injection

• Angular dependency injection
• Hierarchical injection
• DI providers
• DI in action

Httpclient

• Set up HTTP client
• Consume serice form onther technologies
• Creating API(REST API)
• Using node js
• Create API in node js
• Handling communalization using MEAN
• Mongo data base
• Express middleware
• Angular client APP
• Node js server side
• Creating and end to end app
• Handling CRUD operations

Routing & Navigation

• Router imports
• Router configuration
• Router outlet
• Router links
• Routing Resolvers
• Routing Guards
• Nested Routes
• Active router links
• Router state
• Router events

Angular Animations

• Transition & Triggers
• Complex sequences
• Roote transition animations

Angular Materials

• Tables
• Forms
• Tabs
• Grid Layout
• List Layout

Unit Testing In Angular

• Karma with jasmine
• Create unit tests
• Testing angular app

Advanced Topics

• JWT Tokens
• Optimization Concepts
• Lazy Loading Overview
• Angular Universal