UI Developer Online Training Modules Overview

Core topics of UI Developer Online Course

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

• Displaying Repeating Information
• Demo with ng-repeat

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

Two Way Binding In AngularJS

• Impotence of two-way binding
• Two Way Binding Demo

Validation

• Importance of validation
• Working example

Creating And Using Services

• Introduction of services in AngularJS
• Understanding importance of Services
• Working with an Example

UNIX System Features

• Multitasking, Multiuser, Easy Portability, Security, Communication.

Job Opportunities in UI Developer

Right now the global industry is facing shortage of skilled experts UI Developer With millions of vacancies around the world across different sectors, a career in this domain is being termed as the hottest job of the decade. The effective demand for experts having the right talent & skills to handle all the real-world challenges in this platform will continue to increase for a long period of time as per the experts view. So hurry up & work towards building the best career knowledge in this platform by availing SacrosTek Systems UI Developer Online Training.

SacrosTek Systems offer certification programs for UI Developer. Certificates are issues on successful completion of the course and the assessment examination. Students are requested to participate in the real-time project program to get first-hand experience on the usage and application of the UI Developer. The real-time projects are designed by our team of industry experts to help students get best possible exposure to the UI Developer and its applications.