ONLINE UI or FRONT END TECHNOLOGIES (ANGULAR) TRAINING COURSE
Apply For Course
DURATION : 95 WORKING DAYS
FACULTY : Mr.SIVA(12+Years of Experience)
COURSE MODULES
- HTML / XHTML , CSS, JAVASCRIPT(BASIC & ADVANCED)
- HTML5,6, CSS3,4, POLLYFILLS
- BOOTSTRAP 5
- JQUERY, AJAX, JSON
- SCSS (SASS)
- ECMASCRIPT6
- TYPESCRIPT
- ANGULAR
- FACEBOOK, TWITTER, GOOGLE MAP, YOUTUBE
- SEARCH ENGINE OPTIMIZATION (On-Page)
- GOOGLE ANALYTICS INTEGRATION
- Developer Tools:Firebug,Chrome,IE Developer Tools
- DOMAIN & WEB HOSTING
- MINI PROJECT ON HTML 4 FORMS
- MINI PROJECT ON JAVASCRIPT FORM VALIDATION
- MAJOR PROJECT ON HTML AND CSS (INCLUDES HTML5,6, CSS3,4)
- MAJOR PROJECT ON JQUERY, JQUERY UI, THIRD PARTY PLUGINS
- MAJOR PROJECT ON BOOTSTRAP RESPONSIVE LAYOUT
- ANGULAR MATERIAL
- BOOTSTRAP INTEGRATION
- DEPLOYMENT
- MAJOR PROJECT ON ANGULAR 12
- Introduction to Mongo DB, Express JS, Node JS, CRUD, LOGIN and LOGOUT and SIGNUP, Authentication and Authorization, REACT JS
- BITBUCKET (GIT)
- CREATE BRANCHES and PR
- JIRA
- SLACK
- REALTIME ENVIRONMENT TERMINOLOGY
- TIPS AND TRICKS TO SERVIVE IN COMPANIES
- DISCUSSION ON MOST COMMONLY ASKED INTERVIEW QUESTIONS AND SYSTEM TASKS
- MEETINGS
- DAILY ACTIVITIES REPORT
- MOST COMMONLY USED REALTIME ENVIRONMENT TOOLS
- RESUME PREPARATION
- INTERVIEW QUESTIONS
- FREE COURSE COMPLETION CERTIFICATE
- LIVE PROJECTS TRAINING ALSO AVAILABLE
Our ONLINE TRAINING HIGHLIGHTS
- LIVE INTERACTIVE SESSIONS
- REALTIME TRAINING with WORKING EMPLOYEES
- LIFE LONG ACCESS to RECORDING SESSIONS
HTML
- Internet
- Types of Webpages
- Static Webpage
- Dynamic Webpage
- Server Webpage
- Introduction To HTML
- Structure Of HTML
- Tag
- Editors
- Basic Tags
- Meta Tags
- Attributes & Parameters
- Formatting Tags
- Quotation and Citation Elements
- Paragraph tag
- Computer Code
- abbr & acronym
- Comments
- Iframe
- Entities and Symbols
- Charset
- Image tag
- Link Tags
- Image Link
- Text Link
- Email Link
- Colors
- List
- Ordered List
- Unordered List
- Nested List
- Description List
- Table Tag
- Form tags
- XHTML
- Difference Between HTML & XHTML
- Doctypes:DTD
- W3C
- Introduction To HTML 5
- Deprecated tags
- center
- font
- s
- strike
- u
- acronym
- frame
- frameset
- embed
- marquee
- big
- dir
- noframes
- Deprecated Attributes
- align-caption, iframe, img, input, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, td,
th, and tr.
- hspace-img
- vspace-img
- width-hr, table, td, th, pre.
- background-body
- bgcolor-table, tr, td, th and body.
- rules-table
- border table
- cellpadding-table
- cellspacing-table
- size-hr
- type-li, ol and ul
- noshade-hr
Cascading Stylesheets(CSS)
- CSS
- Introduction
- Syntax
- Comments
- Types of StyleSheets
- Internal StyleSheets
- External StyleSheets
- Inline StyleSheets
- Compound StyleSheet
- !important
- Types of Selectors
- Universal or Global
- Element or Tag
- Class
- Id
- Descendant
- Grouping
- Attribute
- Specifity
- Units
- Div's & Span tags
- display
- Block & Inline
- inline-block
- Colors
- CSS UNITS
- Box Model
- Border
- border-bottom
- border-bottom-color
- border-bottom-style
- border-bottom-width
- border-color
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-style
- border-top
- border-top-color
- border-top-style
- border-top-width
- border-width
- outline
- outline-style
- outline-width
- outline-color
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
- Background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
- Image Sprites
- Font
- font-family
- color
- font-size
- Set Font Size With Pixels
- Set Font Size With em
- font-style
- font-variant
- font-weight
- font
- Text
- Color
- letter-spacing
- Word-spacing
- line-height
- text-align
- text-decoration
- text-indent
- text-transform
- vertical-align
- White-space
- Direction
- unicode-bidi
- Images
- border
- width
- height
- opacity
- FORMS
- Links
- a:link
- a:visited
- a:hover
- a:active
- cursor
- Lists
- list-style
- list-style-type
- list-style-position
- list-style-image
- Tables
- border
- border-collapse
- width
- height
- text-align
- vertical-align
- padding
- Dimension
- height
- width
- max-height
- min-height
- max-width
- min-width
- Display / Visibility
- Positioning
- bottom
- clip
- left
- overflow
- absolute
- fixed
- relative
- static
- right
- top
- z-index
- float & clear
- Pseudo-class
- Pseudo-element
- Combinators
- descendant selector (space)
- child selector (<)
- adjacent sibling selector (+)
- general sibling selector (~)
- Navigation Bar
- Dropdown Navigation Bar
- CSS Validations(W3C)
CSS 3.0
- CSS 2.0 vs CSS 3.0
- Introduction to css3
- whats new in css3.0
- border
- box-shadow
- border-image
- border-radius
- Image Reflection
- background
- background-clip
- background-origin
- background-size
- Multiple Background Images
- Gradients
- Linear Gradients
- Top to Bottom
- Left to Right
- Diagonal
- Angles
- Multiple Color Stops
- Transparency
- repeating-linear-gradient
- Radial Gradients
- Evenly Spaced Color Stops
- Differently Spaced Color Stops
- Set Shape
- Use of Different Size Keywords
- closest-side
- farthest-side
- closest-corner
- farthest-corner
- repeating-radial-gradient
- text effects
- @FONT Face
- Browser Support
- Font Formats
- Browser Support for Font Formats
- Using The Font
- Working with third party plugins
- Google fonts
- 2D Transforms
- Browser Support for 2D Transforms
- transform
- transform-origin
- translate(x,y)
- translateX(n)
- translateY(n)
- scale(x,y)
- scaleX(n)
- scaleY(n)
- rotate(angle)
- skew(x-angle,y-angle)
- skewX(angle)
- skewY(angle)
- 3D Transforms
- rotateX()
- rotateY()
- rotateZ()
- RGBA
- Box Resize
- Box Sizing
- Outline
- Transitions
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- Animations
- @keyframes
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- Multiple Columns
- column-count
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- User Interface
- Variables
- Box-sizing
- object-fit
- object-position
- Flex Container
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
- Flex Items
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
- Flex Responsive
- Media Queries
- Math Functions
- Counters
- Buttons
- Masking
- Image Reflection
- Overview of CSS 3.0 compatabilities for Internet Explorer
CSS POLYFILLS FOR CROSS BROWSER COMPATIBILITY
***Content will be updated as per latest updations.
JAVASCRIPT & ECMASCRIPT(ES6)
- Introduction to javascript
- Syntax
- Statements
- Comments
- Outputs
- innerHTML
- document.write() / document.writeln()
- window.alert()
- console.log
- White Space
- Semicolons
- Code Blocks
- JavaScript Identifiers / Names
- A letter (A-Z or a-z)
- A dollar sign ($)
- underscore (_)
- Popup Boxes
- Variables
- Operators
- Arithmetic
- + Addition
- - Subtraction
- * Multiplication
- ** Exponentiation (ES2016)
- / Division
- % Modulus (Division Remainder)
- ++ Increment
- -- Decrement
- Assignment
- += Addition
- -= Subtraction
- *= Multiplication
- **= Exponentiation (ES2016)
- /= Division
- %= Modulus (Division Remainder)
- String Operators
- Comparison
- == equal to
- === equal value and equal type
- != not equal
- !== not equal value or not equal type
- > greater than
- < less than
- >= greater than or equal to
- <= less than or equal to
- ? ternary operator
- Logical
- && logical and
- || logical or
- ! logical not
- Type Operators
- typeof
- instanceof
- type conversion
- Datatypes
- Conditional Statements
- if
- if...else
- if...else if...else
- Switch
- Loops
- while
- do...while
- for
- for...in
- for...of(iterables)
- Break
- Continue
- Functions
- User-defined Functions
- Function Syntax
- Function Invocation(Calling)
- Function with Arguments
- Returning Values from Functions
- Closures
- Local and Global Variables
- Scope (ES6)
- Block scope
- Function scope
- Global scope
- Hoisting
- use strict
- Events
- Introduction
- Mouse Events
- Keyboard Events
- Form Events
- Document/Window Events
- Event Handlers : page loads, user clicks a button, user inputs data......
- Page redirection
- Page Printing
- Objects (we will cover indepth in Angular or React JS)
- Built-in Objects
- Introduction
- Number
- exponent
- Integer Precision
- Floating Precision
- Adding Numbers and Strings
- Numeric Strings
- NaN - Not a Number
- Infinity
- Methods and Properties
- toString()
- toFixed()
- toPrecision()
- Number()
- parseInt()
- parseFloat()
- MAX_VALUE
- MIN_VALUE
- POSITIVE_INFINITY
- NEGATIVE_INFINITY
- NaN
- Number Properties Cannot be Used on Variables
- Strings
- Escape Character
- Breaking Long Code Lines
- Methods and Properties
- length
- slice(start, end)
- substring(start, end)
- substr(start, length)
- replace()
- replace() using regular expression
- toUpperCase()
- toLowerCase()
- concat()
- trim()
- String Search
- indexOf()
- lastIndexOf()
- startsWith()
- endsWith()
- split()
- slice()
- search()
- replace()
- repeat()
- match()
- includes()
- fromCharCode()
- padStart() and padEnd()
- Extracting String Characters
- charAt(position)
- charCodeAt(position)
- Property access [ ]
- split()
- toFixed()
- Template Literals
- Deprecated methods
- anchor()
- big()
- blink()
- bold()
- fixed()
- fontcolor()
- fontsize()
- italics()
- link()
- small()
- strike()
- sub()
- sup()
- Math
- Properties(constants)
- E
- LN2
- LN10
- LOG2E
- LOG10E
- PI
- SQRT1_2
- SQRT2
- Methods
- abs(x)
- acos(x)
- acosh(x)
- asin(x)
- asinh(x)
- atan(x)
- atan2(y, x)
- atanh(x)
- cbrt(x)
- ceil(x)
- clz32(x)
- cos(x)
- cosh(x)
- exp(x)
- expm1(x)
- floor(x)
- fround(x)
- log(x)
- log10(x)
- log1p(x)
- log2(x)
- max(x, y, z, ..., n)
- min(x, y, z, ..., n)
- pow(x, y)
- random()
- round(x)
- sign(x)
- sin(x)
- sinh(x)
- sqrt(x)
- tan(x)
- tanh(x)
- trunc(x)
- Arrays
- Syntax
- Syntax : using new keyword
- Accessing Array Elements
- Access the Full Array
- Looping Array Elements
:for and forEach
- Array Properties and Methods
- Changing Elements
- delete
- length
- push()
- pop()
- shift()
- unshift()
- join()
- concat()
- slice()
- splice()
- copyWithin()
- fill()
- find()
- every()
- isArray()
- reverse()
- sort() : ASC and DESC
- Numeric Sort
- Iteration
- forEach()
- map()
- reduce()
- reduceRight()
- filter()
- every()
- some()
- indexOf()
- lastIndexOf()
- findIndex()
- from()
- entries()
- keys()
- includes()
- Associative Arrays
- Difference Between Arrays and Objects
- When to Use Arrays. When to use Objects.
- Date
- new Date()
- Methods
- getDate()
- getDay()
- getFullYear()
- getHours()
- getMilliseconds()
- getMinutes()
- getMonth()
- getSeconds()
- getTime()
- getTimezoneOffset()
- getUTCDate()
- getUTCDay()
- getUTCFullYear()
- getUTCHours()
- getUTCMilliseconds()
- getUTCMinutes()
- getUTCMonth()
- getUTCSeconds()
- getYear()
- now()
- parse()
- setDate()
- setFullYear()
- setHours()
- setMilliseconds()
- setMinutes()
- setMonth()
- setSeconds()
- setTime()
- setUTCDate()
- setUTCFullYear()
- setUTCHours()
- setUTCMilliseconds()
- setUTCMinutes()
- setUTCMonth()
- setUTCSeconds()
- setFullYear()
- toDateString()
- toISOString()
- toJSON()
- toLocaleDateString()
- toLocaleTimeString()
- toLocaleString()
- toString()
- toTimeString()
- toUTCString()
- UTC()
- valueOf()
- Boolean
- Regular expressions
- constructor
- prototype
- Sets
- Maps
- Advanced javascript
- Error handling
- Debugging
- HTML DOM
- Introduction
- Methods
- Document
- Elements
- HTML
- FORMS
- CSS
- Events
- EventListener
- Nodes
- Collections
- Nodelist
- Browser BOM
- Window
- Screen
- Location
- History
- Navigator
- Popup Alert
- Timing
- Cookies
- Creating a JavaScript Object
- JavaScript Keyword new
- Using an Object Constructor
- Adding methods to an object
- CLOSURES
- Form Validations
- Basics of Form Validation
- Validating Radio Buttons
- Validating Checkboxes
- Validating Select Menus
- Validating Text & Textareas
- Validating Through Regular Expressions : Alphabetical, Alphanumeric, Email, Date, Image, Password and so on
- Classes (Object Oriented Concepts-OOPS)
JQUERY
- Introduction
- What is jQuery
- Downloading and Installing jQuery
- Creating a Simple Page in jQuery
- Overview of jQuery Features
- The Document Ready Function
- How to use Custom Scripts?
- Selectors
- How to use Selectors?
- Name
- #ID
- .Class
- Universal (*)
- Multiple Elements E, F, G
- Attribute Selector
- JQUERY EFFECTS
- hide/show
- fade
- slide
- animate
- toggle
- stop
- Callback
- Chaining
- DOM TRAVERSING
- Ancestors
- Descendants
- Siblings
- Filtering
- Form Selectors
- HTML
- Get
- Set
- Add
- Remove
- CSS Classes
- css()
- Dimensions
- jQuery Events
- noConflict() Method
- AJAX Methods
- load( )
- $.get( )
- $.post( )
- $.getScript( )
- $.getJSON( )
- $.ajax( )
- AJAX Events
- ajaxComplete( )
- ajaxStart( )
- ajaxError( )
- JQUERY UI LIBRARY Overview
- Jquery Theme Roller
HTML 5
- What is HTML 5
- Overview of HTML 5
- Browser Support
- W3C and Web Hypertext Application Technology Working Group (WHATWG). Specifications
- Power of HTML5 in web & mobile Domains
- Overview of updated new features
- HTML5 Syntax
- The DOCTYPE
- Character Encoding
- The <script> tag
- The <link> tag
- HTML5 Document
- Forms
- color
- date
- datetime
- datetime-local
- email
- month
- number
- range
- search
- time
- url
- week
- Form Elements
- New attributes for <form>
- New attributes for <input>
- autocomplete
- autofocus
- form
- formaction
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp)
- placeholder
- required
- step
- Video and Audio
- Media
- <audio>
- <video>
- <source>
- <embed>
- plugins
- youtube
- Types of Elements
- Semantic Elements
- Structural Elements
- HTML5 NEW ELEMENTS
- <article>
- <aside>
- <canvas>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <hgroup>
- <main>
- <mark>
- <meter>
- <nav>
- <section>
- <summary>
- <time>
- Migration from HTML4 to HTML5
- HTML5 Browser Support
- HTML5 Elements as Block Elements
- Adding New Elements to HTML
- Problem With Internet Explorer
- Complete Shiv Solution
- HTML5 Skeleton
- HTML5 DEPRECATED TAGS
- <acronym>
- <center>
- <font>
- <frame>
- <frameset>
- <s>
- <u>
- HTML5 DEPRECATED ATTRIBUTES
- align-caption, iframe, img, input, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, td, th, and tr.
- background-body
- bgcolor-table, tr, td, th and body.
- border table
- cellpadding-table
- cellspacing-table
- hspace-img
- vspace-img
- noshade-hr
- rules-table
- size-hr
- type-li, ol and ul
- width-hr, table, td, th, pre.
- Web Storage
- Local Storage
- Session Storage
- Web Workers
- MathML
- Introduction
- Browser Support
- MathML Characters
- Matrix Presentation
- Math Formulas
- Drag and Drop API
- Browser Support
- Make an Element Draggable
- What to Drag - ondragstart and setData()
- Where to Drop - ondragover
- Do the Drop - ondrop
- Drag image back and forth
- Canvas Overview
- Lines
- Curves
- font
- Image
- Paths
- Shapes
- Color, gradients
- SVG
- What is SVG?
- SVG Advantages
- Differences Between SVG and Canvas
- Rectangle
- Circle
- Ellipse
- Line
- Polygon
BOOTSTRAP 5
- Get Started?
- What is Bootstrap?
- Bootstrap History
- Why Use Bootstrap?
- What Does Bootstrap Include?
- HTML File
- Adding Bootstrap to Your Web Pages
- Downloading Bootstrap
- Bootstrap CDN
- Put Your HTML Elements Inside Containers
- Bootstrap Browser/Device Support
- Typography
- Colors
- Tables
- Images
- Jumbotron
- Alerts
- Buttons
- Button Group
- Button Dropdown
- Badges
- Progressbars
- Pagination
- List Groups
- Cards
- Collapse
- Navbar
- Forms
- Inputs
- Carousel
- Modal
- Tooltip
- Popover
- Scrollspy
- Utilities
- Grid Sytem
- BOOTSTRAP RESPONSIVE LAYOUT PROJECT
SCSS(SASS)
- Variables
- Nesting
- Partials
- Modules
- Mixins
- Extend/Inheritance
- Operators
ECMASCRIPT 2020 OR ES2020
- Introduction
- Environment
- Syntax
- Variables, Operators, Decision Making, Loops, Functions, Events, Page Redirect, Dialog Boxes, Void, Page Printing, Objects, Number, Boolean, Strings, Arrays, Date, Math, Regular Expressions, DOM
- Iterator
- Collections
- Classes : Object-Oriented Programming Concepts
- Declaring a Class
- Creating Objects
- Accessing Functions
- Setters and Getters
- The Static Keyword
- instanceof operator
- Class Inheritance
- Method Overriding
- Super Keyword
- Promises
- let and const
- Variable Hoisting
- Arrow Functions
- Fat Arrow Functions
- Advanced Use of Arrow Functions
- When to use Arrow Functions
- When to use Arrow Functions Continued
- Array Helper Methods
- forEach
- map
- filter
- find
- every
- some
- reduce
- Modules
- Error Handling
- Validations
- Animations
- Debugging
- ES7 NEW FEATURES
- ES8 NEW FEATURES
- ES9 NEW FEATURES
TYPESCRIPT
- Home
- Overview
- Environment Setup
- Basic Syntax
- Types
- Variables
- Operators
- Decision Making
- Loops
- Functions
- Numbers
- Strings
- Arrays
- Tuples
- Union
- Interfaces
- Classes
- Objects
- Namespaces
- Modules
- Ambients
ANGULAR 12
- Introduction
- Getting Started
- Architecture
- Environment Setup
- Using Angular CLI
- Project Setup and First App
- Project File Structure
- Editing the First App
- How an Angular App gets Loaded and Started
- Components
- What is a component
- Component Layout
- Why use components
- Structure of a component
- Generating components with Angular-CLI
- Working with Component Templates
- Working with Component Styles
- Fully Understanding the Component Selector
- What is Data Binding
- One-way databinding
- String Interpolation
- Property Binding
- Event Binding
- Two-way databinding
- Combining all Forms of Databinding
- Directives
- Component Directives
- Structural Directives
- *ngIf
- *ngIf else
- *ngFor
- *NgSwitch
- Attribute Directives
- *ngClass
- *ngStyle
- Debugging
- Module
- Adding Types and Properties
- Object Interfaces
- Templates
- Pipes
- Date
- Lowercase
- Uppercase
- Currency
- Percent
- Json
- Decimal
- Slice
- Creating Custom pipes
- Event Binding
- Routing
- Services
- HTTP Service
- Handling Forms
- Data flow in forms
- Template-Driven (TD) vs Reactive Approach
- Template-Driven
- Reactive Approach
- Animations
- Animations Triggers and State
- Switching between States
- Transitions
- Advanced Transitions
- Transition Phases
- The void State
- Using Keyframes for Animations
- Grouping Transitions
- Using Animation Callbacks
- ANGULAR Material
- FORM CONTROLS
- NAVIGATION
- LAYOUT
- BUTTONS AND INDICATORS
- POPUPS AND MODALS
- DATA TABLE
- DEPLOYMENT
- Deployment Preparation & Steps
- Using Environment Variables
- Deployment Example Firebase Hosting
- Heroku and Netlify
- Angular Changes & New Features
- Introduction to Mongo DB, Express JS, Node JS, CRUD, LOGIN and LOGOUT and SIGNUP, Authentication and Authorization, REACT JS
- MAJOR PROJECT