UI Developer

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

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 Tag

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

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 & 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 & Positioning

Web colors

Hex colors

Color tools

CSS Box Model

Working with Content

Working with Padding

Working with Border

Working with Margin

CSS Display & 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

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 & Animations

Working with Animations

Working with Transitions

JavaScript

JavaScript

Variables

Arrays

Strings

Loops

If/else and equivalence

Object Literals

JSON

Functions

Scope and Hoisting

JQuery

JQuery – Introduction

jQuery Library

First jQuery Example

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

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

UNIX System Features

Multitasking, Multiuser, Easy Portability, Security, Communication.