UI Developer Training
UI Developer Training helps the learner in developing User Interface and assist them in noting down what all is required to create UI web solutions and develop GUIs in clean, structured and maintainable format.
UI Developer Training Curriculum
HTML
HTML Fundamentals Introduction
HTML documents
Demo: using doctype
The head element
Demo: using <head>
The body element
Using id and class attributes
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 <input> 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 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 & 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
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
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
Bootstrap3
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
AngularJS
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
Handling Events
Event Scope
Event Directives
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
curriculum_moduleTwo Way Binding in AngularJS
Impotence of two-way binding
Two Way Binding Demo
Validation
Importance of validation
Working example
curriculum_moduleCreating and Using Services
Introduction of services in AngularJS
Understanding importance of Services
Working with an Example