UI Development Training in Marathahalli & UI Development Training Institutes in Bangalore
“User Interface Development†is the development of websites, web applications, mobile applications and software development. Most people assume UI development is about creating websites and writing HTML, CSS and JavaScript, but User Interface goes far beyond these technical terms.
Is UI developer a good career?
Five Reasons to choose UI development as a career:
- UI developers are responsible for the entire visual interface. This includes everything from putting together style guides that detail how everything from icons to menus should look.
- You’ll get a chance to design a responsive page which supports different mobile devices, tabs and desktop.
- You’ll make decisions on everything from choosing the best typeface to creating button styles - and you’ll likely have to convince others about your choices.
- HTML, CSS, and Javascript are the key languages needed for front-end development. Its easy to understand and its base for learning other UI technologies which is most popular now like angularjs, bootstrap, phonegap.
- It’s hard to find a good UI Engineer. Always a demand in market.
UI Development Training Syllabus in Bangalore
UI Development Course Content:
Basics
- DOM
- Structure of
HTML Page
- Mandatory tags
in the HTML page (HTML, head, body)
- What is CSS
- Different ways
of applying CSS for elements, and priority chain of CSS
- Heading
tags(H1…H6), Tags and attributes(Class, Id, style..etc)
- Inline and
block-level elements
More Tags in HTML
- Including
external page links in a page using anchor tags and its properties
- Working with row
and column data using table tags
- Hiding and
unhiding elements using display property
- image tag, p
tag, ul and ol tags, li, nobr, hr, bretc
- Layouts, forms,
buttons
- Input fields
(textbox, radio button, checkbox, dropdown, text area etc)
More CSS properties
- Adding borders,
font, pseudo classes
- 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
Form Elements
- Get & Post
- Validating input
values in a form
- Form action and
type
JavaScript
- Introduction
- 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 js
- Adding dynamic
event listeners to dom elements
- Event capturing
and event bubbling
- Validations
using key char codes
JavaScript Supported Data
structures
- Arrays
- Predefined
methods in arrays
- Strings and
predefined methods
- Objects
- JSON
Advanced JavaScript
- Prototyping in
JavaScript
- Closures in
JavaScript
- Inheritance in
JavaScript
- Adding methods
for an object
jQuery Framework
- Onload and
onreadydiffrence
- jQuery selectors
- Multiple ways of
referingdom elements using jQuery selectors
- jQuery methods
- Adding dynamic
properties for dom elements
- Toggleing
elements
- Creating dynamic
elements using jQuery
jQuery Traversing Methods
- Finding elements
using jQuery techniques
- Filtering
elements
Events using jQuery
- Binding events
- Dynamic binding
- List of events
been supported in jQuery(blur, change, click, dbclick….etc)
AJAX
- Advantages with
Ajax and its limitations
- Samples working
with Ajax
- Different data
formats used in Ajax (string, xml, Json, etc)
- XML and JSON
difference
- Crossdomain
interactions using JSONP
jQuery Templating
- Loading DOM
dynamically using jQuery templates
- loading
templates using AJAX
HTML5
- Difference
between HTML5 and HTML 4
- List of Browsers
support HTML5
- Doctype
- Media tags
(audio and video tags)
- Graphics using
Canvas tag
- Drag and Drop
features
- Working on
locations lat and lng using Geolocation
- Storing
userpreferences using Localstorage.
CSS 3
- Difference
between CSS2 and CSS3
- Adding borders
and backgrounds
- Advanced text
effects(shadow)
- 2D and 3D
Transformations
- Adding
Transitions to elements
- Adding
animations to text and elements
Responsive Designs
- Difference
between multiple devices, making a page to work on multiple devices
- Media queries
- Introduction to
Bootstrap CSS API(2hrs)
Bootstrap
Bootstrap
training is a free open source and is the most
popular HTML, CSS and JavaScript framework developed by twitter for creating
responsive web applications. It includes HTML and CSS based design templates
for common user interface components. Bootstrap framework depends on every
single open standard HTML, CSS and JavaScript; this implies bootstrap can be
utilized with any server side innovation and any stage.
AngularJS Framework
- Introduction
- Power of ngjs.
of Angular Js
- Angular js Core
Features Overview.
- List of
Directives.
- Controllers and
modules in ngs with sample program
- Data binding
with sample program
- What is filter
and adding filters to dom elements with sample code
- Loading multiple
page content into a single page using ng-routing – Working example
- Developer Tools
Addons
- Firebug, chrome
and IE Developer tools
- Api Calls.
- Crud Operation
in Angular Js
Angular 2 Course Content
Getting Started
- Working with
JavaScript Modules and SystemJs
- Introduction to
TypeScript
- A Conceptual
Overview of Angular 2
- Here’s What We’ll
Be Building
- Installing Git
and Node
- Creating Your
First Component
- Using the Angular
CLI
Creating and Communicating Between Components
- Creating Your
First Data-bound Component
- Using External
Templates
- Communicating
with Child Components Using @Input
- Communicating
with Parent Components Using @Output
- Using Template
Variables to Interact with Child Components
- Styling
Components
- Exploring
Angular’s CSS Encapsulation
- Adding a Site
Header
Exploring the New Template Syntax
- Interpolation,
Property Bindings, and Expressions
- Event Bindings
and Statements
- Repeating Data
with ngFor
- Handling Null
Values with the Safe-Navigation Operator
- Hiding and
Showing Content with ngIf
- Hiding Content
with the [Hidden] Binding
- Hiding and
Showing Content with ngSwitch
- Styling
Components with ngClass
- Styling
Components with ngStyle
Creating Reusable Services
- Introduction
- Why We Need
Services and Dependency Injection
- Creating Your
First Service
- Wrapping Third
Party Services
Routing and Navigating Pages
- Adding Multiple
Pages to Your App
- Adding Your First
Route
- Accessing Route
Parameters
- Linking to Routes
- Navigating from
Code
- Guarding Against
Route Activation
- Guarding Against
Route De-activation
- Pre-loading Data
for Components
- Styling Active
Links
Collecting Data with Forms and Validation
- Introduction
- Using Models for
Type Safety
- Creating Your
First Template-based Form
- Using the Data
from Your Template-based Form