UI Development Training

Basics

• 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

More Tags in HTML

• 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, bretc
• Layouts, forms, buttons
• Input fields (textbox, radio button, checkbox, dropdown, text area etc)

More CSS properties

• Adding borders, font, pseudo classes
• Positioning elements (absolute, relative, fixed and static)
• Image spriting
• Box model (margins, padding)
• Floating elements (float left, right etc.)
• Including external resources
• Absolute and Relative Paths
• Including external resources like CSS, images etc

Form Elements

• Get & Post
• Validating input values in a form
• Form action and type

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
• Predefined methods in arrays
• Strings and predefined methods
• Objects
• JSON

Advanced JavaScript

• Prototyping in JavaScript
• Closures in JavaScript
• Inheritance in JavaScript
• Adding methods for an object

jQuery Framework

• Onload and onreadydiffrence
• jQuery selectors
• Multiple ways of referingdom elements using jQuery selectors
• jQuery methods
• Adding dynamic properties for dom elements
• Toggleing elements
• Creating dynamic elements using jQuery

jQuery Traversing Methods

• Finding elements using jQuery techniques
• Filtering elements

Events using jQuery

• Binding events
• Dynamic binding
• List of events been supported in jQuery(blur, change, click, dbclick….etc)

AJAX

• Advantages with Ajax and its limitations
• Samples working with Ajax
• Different data formats used in Ajax (string, xml, Json, etc)
• XML and JSON difference
• Crossdomain interactions using JSONP

 jQuery Templating

• Loading DOM dynamically using jQuery templates
• loading templates using AJAX

HTML5

• Difference between HTML5 and HTML 4
• List of Browsers support HTML5
• Doctype
• Media tags (audio and video tags)
• Graphics using Canvas tag
• Drag and Drop features
• Working on locations lat and lng using Geolocation
• Storing userpreferences using Localstorage.

CSS 3

• Difference between CSS2 and CSS3
• Adding borders and backgrounds
• Advanced text effects(shadow)
• 2D and 3D Transformations
• Adding Transitions to elements
• Adding animations to text and elements

Responsive Designs

• Difference between multiple devices, making a page to work on multiple devices
• Media queries
• Introduction to Bootstrap CSS API(2hrs)

Bootstrap

Bootstrap training is a free open source and is the most popular HTML, CSS and JavaScript framework developed by twitter for creating responsive web applications. It includes HTML and CSS based design templates for common user interface components. Bootstrap framework depends on every single open standard HTML, CSS and JavaScript; this implies bootstrap can be utilized with any server side innovation and any stage.

AngularJS Framework

• Introduction
• Power of ngjs. of Angular Js
• Angular js Core Features Overview.
• List of Directives.
• Controllers and modules in ngs with sample program
• Data binding with sample program
• What is filter and adding filters to dom elements with sample code
• Loading multiple page content into a single page using ng-routing – Working example
• Developer Tools Addons
• Firebug, chrome and IE Developer tools
• Api Calls.
• Crud Operation in Angular Js

Angular 2 Course Content

Getting Started

• Working with JavaScript Modules and SystemJs
• Introduction to TypeScript
• A Conceptual Overview of Angular 2
• Here’s What We’ll Be Building
• Installing Git and Node
• Creating Your First Component
• Using the Angular CLI

Creating and Communicating Between Components

• Creating Your First Data-bound Component
• Using External Templates
• Communicating with Child Components Using @Input
• Communicating with Parent Components Using @Output
• Using Template Variables to Interact with Child Components
• Styling Components
• Exploring Angular’s CSS Encapsulation
• Adding a Site Header

Exploring the New Template Syntax

• Interpolation, Property Bindings, and Expressions
• Event Bindings and Statements
• Repeating Data with ngFor
• Handling Null Values with the Safe-Navigation Operator
• Hiding and Showing Content with ngIf
• Hiding Content with the [Hidden] Binding
• Hiding and Showing Content with ngSwitch
• Styling Components with ngClass
• Styling Components with ngStyle

Creating Reusable Services

• Introduction
• Why We Need Services and Dependency Injection
• Creating Your First Service
• Wrapping Third Party Services

Routing and Navigating Pages

• Adding Multiple Pages to Your App
• Adding Your First Route
• Accessing Route Parameters
• Linking to Routes
• Navigating from Code
• Guarding Against Route Activation
• Guarding Against Route De-activation
• Pre-loading Data for Components
• Styling Active Links

Collecting Data with Forms and Validation

• Introduction
• Using Models for Type Safety
• Creating Your First Template-based Form
• Using the Data from Your Template-based Form