Curriculam

Module 1: Introduction – i
• UI Developer roles and responsibilities
• UX designer roles
• Technologies needed
• Power of UI
• Current market requirements on UI
• Basic Technologies needed
• Difference between Front end and Backend
Introduction – ii
• Sample webpages
• Crawling and Meta tags.
• Basics

• Exploring existing pages
• Browsers & Editors
• DOM
• Structure of HTML Page
• Mandatory tags in html page (html, head, body)
• Heading tags (H1…H6), Tags and attributes (Class, Id, style…etc.)
• Inline and block level elements

• What is CSS
• Different ways of applying CSS for elements, and priority chain of CSS
• CSS Properties (color, font, size, border…etc.)

• Box model
• Margin & Padding
• Positioning Elements
• Floating Elements

• Including external page links in a page using anchor tags and its properties
• Working with row and column data using table tags
• Hiding and un-hiding elements using display property
• img tag, p tag, ul and ol tags, li, nobr, hr, bretc
• Layouts, forms, buttons
• Input fields (textbox, radio button, checkbox, dropdown, text area etc.)
• Debugging HTML & CSS (Firebug, IE and Chrome developer tool)
• Creating Tabs and menu lists

• Adding borders, font, Pseudo classes and Pseudo Elements
• 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.
• Display Property(inline, block, inline block etc)
• Display none and hidden elements.

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

• 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 Java script.
• Adding multiple events dynamically using event listeners.
• Event capturing and event bubbling
• Exploring Event Object.
• Validations using key char codes

• Arrays and Predefined methods.
• Working on logical programs using Arrays.
• Predefined methods in arrays
• Strings and predefined methods
• Objects
• JSON
• Iterating through Dynamic JSON Object.
• Exploring Predefined Date object.

• Inheriting Static Object using proto.
• Inheritance using Object.create()
• Java Script Classes
• Prototyping
• Inheritance using prototyping.
• Global and local variables
• Securing Data using Closures
• Exception Handling
• Handling Predefined and user defined exceptions
• Exploring try, catch, finally and throws.

• History and version explore
• Difference between Minified and non-minified JS files.
• On load and on ready difference
• Jquery selectors
• Multiple ways of referring DOM elements using jQuery selectors
• Jquery methods
• Adding dynamic properties for DOM elements
• Toggling elements
• Creating dynamic elements using jQuery

• Traversing Siblings
• Traversing Children’s
• Traversing Parent Elements.
• Traversing Ancestors.
• Finding elements using jQuery techniques
• Filtering elements

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

• Advantages with AJAX and its limitations
• Samples working with AJAX
• Different data formats used in AJAX (string, xml, JSON, etc.)
• XML and JSON difference
• Cross domain interactions using JSONP
• Jquery Promises
• Handling Multiple AJAX Calls using Jquery Promises.

• Animation Effects using
• Hide, Show
• Sliding up and down
• Fading
• Animate Method.

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

• Difference between HTML5 and HTML 4
• List of Browsers support HTML5
• Doc type
• Semantic Tags
• Multithreading Using Web Workers.
• Media Support (audio and video tags)
• Graphics using Canvas tag and SVG Tags.
• Drag and Drop features
• Offline Application using Application Cache
• Exploring Navigator Object
• Working on locations lat and lng using Geolocation
• Storing user preferences using Local storage & Session Storage

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

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

• Introduction and History
• What is MVC
• Features and Advantages of Angular Js
• Angular Expressions
• Predefined Directives
• Dependency Injection
• AJAX communication in Angular using $http
• Handling Multiple AJAX requests using $http promises.
• Working on multiple controllers with in single application
• Communication between controllers using broadcast and $rootScope
• Difference between $scope and $rootScope

• What is Single Page Application
• Exploring routeProvider service
• Working on $location service
• Angular configuration

• Angular predefined Filters
• Accessing Filters in controllers
• Creating Custom Filters

• Form Validations
• Angular predefined Form validation classes
• Exploring ng-valid, ng-invalid, ng-pristine, ng-dirty, ng-touched etc

• Angular predefined methods
• Bootstrap, copy, equals, forEach, extend, toJSON etc.

• Adding events in angular js
• ng-click, ng-dbclick,ng-mouseupetc

• ng-if
• ng-switch
• ng-include

• Handling REST calls using $resource
• Performing get, post, put, query, remove an delete calls using $resource

• Creating Custom User defined directives in Angular
• Exploring template, templateUrl, scope, link and restrict properties
• Manipulating DOM element using Directives

• Constants
• Value
• Factory
• Services
• Providers

• $watch
• $apply
• $digest

• Introduction and History
• Latest version details

• Setting up the Node environment
• Node and npm Installation

• Exploring REPL Terminal
• Walkthrough commands on terminal

• Server side javascript
• Introduction to NPM
• Creating simple http server
• Exploring package.json

• What is Event Loop
• Exploring Event driven programming
• Emitting events
• Setting Callback methods

• Creating simple webservices
• Creating web clients using node.

• Exploring Express module
• Setting up express environment
• Creating http server using express
• Reading data from GET/POST requests

• Creating templates using PUG
• Generating Dynamic html pages from server
• Responding a template for a client request

• Exploring File system
• Reading and writing to files

• Introduction to REST API
• REST Architecture

• Creating and handling multiple clusters in Node js

• Connecting to Mongo DB
• Connecting to SQL

• Creating web services which communicate with Database

• History and over view of MONGO DB
• Advantages
• How it differs from other DB

• Setting up the environment and installation of Mongo DB

• Exploring Data modeling
• Creating and Dropping DB

• Droping an existing DB

• Datatypes
• Creating and dropping collections

• Creating Documents
• Updating and Dleting Documents
• Query Documents

• Creating Backup for database