Introduction

• UI Developer roles and responsibilities
• UX designer roles
• Technologies needed
• Power of UI
• Current market requirements on UI
• Basic Technologies needed
• Difference b/w Front end and Backend
• Sample Web Pages
• Crawling and Meta tags
• Basic

Basic-HTML

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

CSS

• 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

More HTML Tags

• Including external page links in 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, hr
• 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

HTML 5 Features

• Geolocation
• Video Tag
• Audio tag
• SVG

More CSS Properties

• Adding borders, fonts, Pseudo classes and Pesudo Elements
• Positioning elements (absolute, relative, fixed and static)
• Image Sporting
• Box model( margin, 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

Form Elements

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

Working with CSS

• Introduction to CSS
• Understanding Document Object Model
• Introduction to style sheets
• Introduction to style sheets
• CSS Syntax
• CSS Comments

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

CSS Color and Positioning

• Table Color
• 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

BOOTSTRAP

Working with Bootstrap3

• Introduction to Bootstrap 3
• Bootstrap History
• Why Bootstrap
• Embedding Bootstrap in to page

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

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

Bootstrap 4

• Card
• Spinner
• Badge
• New Gird System
• Input group

JAVA SCRIPT

• Introduction
• Where To
• Output
• Syntax
• Statements
• Comments
• Variables
• Operators
• Arithmetic
• Assignment
• Data Types
• Functions
• Objects
• Scope
• Events
• Strings
• String Methods
• Numbers
• Number Methods
• Math
• Dates
• Date Formats
• Date Methods
• Arrays
• Array Methods
• Booleans
• Comparisons
• Conditions
• Switch
• Loop For
• Loop While
• Break
• Type Conversion
• Errors
• Debugging
• Hoisting
• Strict Mode
• Style Guide
• Best Practices
• Mistakes
• Performance
• Reserved Words
• Forms
• Forms Validation

ES6 Javscript

• Arrow function
• Class
• Rest
• Spread
• Map
• Filter
• Tranpile
• Async/await

Adv.Javscript

• Inheriting Static Object using proto
• Inheriting using Object.create()
• Javascript Classes
• Prototyping
• Inheritance using prototyping
• Global and local variables
• Securing Data using Clousures
• Exception Handling

JQUERY

jQuery – Introduction

• JQuery Library
• First JQuery Example
• The 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

AJAX

• Advantages with Ajax and its limitations
• Samples working with Ajax
• Different data formats used in AJAX
• XML and JSON difference
• Cross domain interactions using JSONP

NodeJs

Getting started with Node.Js application

• Working with Node.Js Packages (NPM)
• Creating a Node.Js application
• Writing Data to the console
• Creating a Node.Js Packaged Module
• Publishing a Node.js Packaged Module to NPM Registry

Working with Events, Timers &Callbacks in Node.Js

• Event Model
• Adding work to the Event Queue
• Implementing Callbacks

Handling I/O in Node.js

• Buffers
• Working with JSON Data
• Compressing & Decompressing Data with Zlib

Accessing the File System

• Opening & Closing Files
• Writing Files
• Reading Files
• Synchronous vs Asynchronous File System Calls
• Other FS Tasks
• Verifying Path Existence
• Getting File Info
• Listing Files
• Deleting file
• Creating & Deleting Directories
• Renaming Files & Directories

Implementing HTTP Services

• Creating a simple HTTP Server
• Understanding URLs
• Processing Querystring and Parameters
• Serving static files with HTTP Server
• Implementing dynamic GET Servers
• Implementing POST Servers

ExpressJs – The Middleware

• Installing ExpressJs
• Creating a simple Hello World Express App
• The express generator
• Routing
• Writing Middleware
• Error Handling
• EJS / JADE – Template to create Views

Building a Data Model with MongoDB & Mongoose

• MongoDB – Introduction
• Mapping of SQL Knowledge to MongoDB
• CRUD Operations in MongoDB (using MongoDB Shell)
• Connecting express app to MongoDB
• Defining Simple Mongoose Schema

Writing REST APIs Using Express

• The rules of a REST API
• Setting up the API in Express
• Handling CRUD Operations to MongoDB using Mongoose

Consuming REST API

• How to call an API from Express
• Handling the CRUD Operations to MongoDB by consuming the Express API
• Modifying Views to display data

Managing Authentication and User Sessions

• Creating a user schema for MongoDB, with password encryption
• Creating an authentication API with Passport
• Securing relevant API endpoints
• Managing User Sessions

Testing Node Servers

• Unit Testing with Mocha