Front End UI with React online training by real time faculty and well trained software specialists. Training will be provided globally in India, USA, UK, Canada and Australia etc... Free demo will be given before training. Live recording will be going on during the session soon after the session recording will be sent to you. Training will be provided in your comfortable time according to your time zone. Contact details: +1 416-834-6577 / +1 201-905-1656 WhatsApp : +91 9030990003/+91 9000444287 Mail : selfpacedtech@gmail.com/training@selfpacedtech.com Website : www.selfpacedtech.com

1. HTML
HTML Fundamentals Introduction
HTML Text
Headings
Demo: Headings
Block vs. Inline Elements
Demo: Block and Inline Elements
Whitespace
Demo: Whitespace
Additional Text Elements
Demo: Additional Elements
HTML Lists
List Types
Demo: Creating Lists
Demo: List Rendering
HTML Links
Link concepts
Demo: Linking Documents
Understanding Targets
Demo: Linking to Targets
Additional Link Attributes
HTML Tables
Table Elements
Demo: Structuring a Table
Table Data
Spanning Columns and Rows
Formatting Tables
Demo: Table Formatting
HTML Form And Form Elements
Introduction
HTTP Get Request
HTTP POST Request
Form Input Elements

2. HTML Forms Fundamentals
Form Basics
Demo: Form Basics
Form Settings
Demo: Form Settings
HTML Form Inputs
Text inputs
Demo: Text inputs
Selections
Demo: Selections
Input attributes
Demo: Input attributes
HTML Images And Objects
Image and Object Concepts
Demo: Adding Images
Demo: Adding Objects
HTML5
Introduction To HTML5
Limitations of HTML4
Introduction and Advantages of HTML5
First HTML5 Document
Overview of New Features of HTML5
Page Layout Semantic Elements
Header
Navigation
Section & Articles
Footer
Aside and more
Form Elements And Attributes
New Input Types
New Elements in Form
New Attributes in Form Tag
New Attributes in <input> Tag

3. Working With Canvas
Coordinates
Path and Curves
Drawing Lines, Rectangles and Circles
Text and Font
Color Gradiations
Drawing Images
Scalable Vector Graphics (SVG)
Understanding SVG
Benefits of SVG
Using SVG Tag
Comparing with Canvas
Media - Audio And Video
Audio and Source tags
Video and Source tags
Track tag
Mime types supported
Browser Compatibility
Programming using Javascript
Drag And Drop
Drag and Drop Events
Programming using JavaScript
Web Storage
Overview
Local Storage
Session Storage
Browser Compatibility
CSS
Working With CSS
Introduction to CSS
Understanding Document Object Model
Introduction to style sheets
CSS Syntax
CSS Comments

4. The CSS Rules
Ways to work with CSS
External style sheet
Internal style sheet
Inline style
CSS Selectors
The element Selector
The id Selector
The class Selector
Grouping Selectors
The CSS Cascade
Background Color
Background Image
Background Image – Repeat Horizontally or Vertically
Background Image – Set position and no-repeat
CSS Fonts & Typography
CSS Font Families
Font Style
Font Size
Text Color
Text Alignment
Text Decoration
Text Transformation
Working With Links And List
Styling Links
Common Link Styles
List Item Markers
Image as the List Item Marker
Working With Table
Table Borders
Collapse Borders
Table Width and Height
Text Alignment
Table Padding
Table Color

5. CSS Color & Positioning
Web colors
Hex colors
Color tools
CSS Box Model
Working with Content
Working with Padding
Working with Border
Working with Margin
CSS Display And Positioning
CSS Display and Visibility
How Elements Float
Turning off Float – Using Clear
Static Positioning
Fixed Positioning
Relative Positioning
Absolute Positioning
CSS3
Working With CSS3
Introduction to CSS3
Selectors
Box Model
CSS3 Borders
Working with border-radius
Working with box-shadow
Working with border-image
CSS3 Backgrounds
Background-size
Background-origin
CSS3 Gradients
Linear Gradients
Radial Gradients

6. CSS3 Text Effects
Text-shadow
Word-wrap
CSS3 Web Fonts
Creating custom fonts
Font Descriptors
CSS3 2D Transforms
Working with translate
Working with rotate
Working with scale
Working with skew
Working with matrix
CSS3 3D Transforms
Working with rotateX
Working with rotateY
CSS3 Transitions And Animations
Working with Animations
Working with Transitions
JavaScript
Variables
Arrays
Strings
Loops
If/else and equivalence
Object Literals
JSON
Functions
Scope and Hoisting
JQuerry
JQuery – Introduction
jQuery Library
First jQuery Example

7. Document Ready Function
How to escape a special character
JQuery - Selectors
Basic Selectors
Precise Selectors
Combination of Selectors
Hierarchy Selectors
Selection Index Filters
Visibility Filters
Forms Selectors
Forms Filters
Find Dropdown Selected Item
JQuery - Document Traversal
Getting a specific DOM element
JQuery - Event
Events Helpers
Attach Event
Detaching Events
Events Triggering
Live Events
JQuery – Effects
JQuery - HTML Manipulation
JQuery – UI
Working with UI frame work
Live examples
Bootstrap 3
Working With Bootstrap 3
Introduction to Bootstrap 3
Bootstrap History
Why Bootstrap ?
Embedding Bootstrap into page

8. Bootstrap Grid System
Importance of Grid System
Grid Classes
Bootstrap Stacked/Horizontal
Bootstrap Grid Small
Bootstrap Grid Medium
Bootstrap Grid Large
Bootstrap Grid Examples
Bootstrap Text/Typography
Working with Text
Working with Contextual Colors and Backgrounds
Bootstrap Images
Rounded Corners
Circle
Thumbnail
Bootstrap Jumbotron
Inside Container
Outside Container
Bootstrap Buttons
Button Styles
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link
Button Sizes
btn-lg
btn-md
btn-sm
btn-xs
Active/Disabled Buttons

9. BS Button Groups
Vertical Button Groups
Nesting Button Groups & Drop Down Menus
Bootstrap Glyphicons
Glyphicon Syntax
Badges
Progress Bars
Bootstrap Pagination
Basic Pagination
Active State
Disabled State
Pagination Sizing
Bootstrap Pager
Bootstrap List Groups
Bootstrap Forms
Bootstrap Inputs
Bootstrap Carousel
Bootstrap Plugins
Overview
Transition Plugin
Collapsible Plugin
Modal Dialog Plugin
Dropdown Plugin
Scrollspy Plugin
Tab Plugin
Tooltip Plugin
Popover Plugin
Alert Plugin
Button Plugin
Carousel Plugin
Affix Plugin

10. Angular JS
Introduction To Angular
Angular Architecture
Working with Angular
Angular Version and Tools
Angular Seed
Controllers And Markup
Introduction to AngularJS Controllers
Controllers and Scope
Creating Controllers
Working with border-image
Working With Colocations In AngularJS
Displaying Repeating Information
Demo with ng-repeat
Working With Events In AngularJS
Displaying Repeating Information
Demo with ng-repeat
Built-In Directives
Working with built in directives
Other Directives
Working With Expressions In AngularJS
Expressions
Working With Expressions In Filters
Understanding Filters
Built-in Filters
Two Way Binding In AngularJS
Impotence of two-way binding
Two Way Binding Demo

11. Validation
Importance of validation
Working example
Creating And Using Services
Introduction of services in AngularJS
Understanding importance of Services
Working with an Example
UNIX System Features
Multitasking, Multiuser, Easy Portability, Security, Communication.
React with Flux and Redux
o Setup boilerPlate
 SetUp Environment
 Auto Reloading
 Installation of NodeJs
 Setup package.json
 Editors to use
 Npm installation Packages
 Introduce npm Scripts
 Webpack Set up
 Use of Babel
 Use of Express
 Create Start Script
 Create Hello world
 Create Parallel Scripts
o Structure Initial App

12.  App Layout Creation
 Create First Components
 Adding Routing
 Styling React Component
 Adding Header
 Adding About Page
o Redux Intro
 Why Redux
 Core Redux Principles
 Redux Vs Flux
 Flow of Redux App
o 3 Principle of Redux
 Actions
 Store
 Reducers
 Immutability Concept
 Handling Immutability
o Adding Redux in React
 React-redux Introduction
 mapStateToProps
 mapDispatchToProps
 Container vs. Presentational Components
o Flow in Redux
 Create Simple Add Contact Form

13.  Binding in ES6
 Actions
 Reducers
 Root Reducer
 Store
 Instantiate Store and Provider
 Connect Container
o Redux with Async
 What is a Mock API
 Library Options in redux
 Connecting Api using Thunk
 Setup Mock Api
 Add Thunk to Store
 Create Load Courses Thunk
 Naming Conventions
 Load Courses in Reducer
 Dispatch Action on Page Load
 Create Course List Component
 Create Manage Course Page
 Create Manage Course Form
 Create Form Input Components
 Use Manage Course Form
 Create Author Actions
 Create Author Reducer

14.  Map Author Data for Dropdown
 Create Form Change Handler
 Create Save Course Thunk
 Handle Creates and Updates in Reducer
 Dispatch Create and Update
 Redirect via React Router Context
 Populate Form via mapStateToProps
 Update State via componentWillReceiveProps
o Error Handling in React
 AJAX Status Actions
 Setup Reducer with Ajax
 Create Preloader Component
 AJAX in Thunks
 Use Promises
 Use Promises to Wait for Thunks
 Create Form Submission Loading Indicator
 Display Save Notification
 Error Handling
o Testing React and Redux
 Setup Testing Frameworks
 Test Utils use in testing React
 Testing Connected React Components
 mapStateToProps Testing
 Action Creators Testing

15.  Reducers Testing
 Thunks Testing
 Store Testing in React