UI AND ANGULAR JS course enable you to design and development excellent looking browser-based user interfaces and UI web solutions from the requirements stage to deployment onto the production web farm.In information technology, the user interface (UI) is everything designed into an information device with which a human being may interact. AngularJS is a web based Javascript framework introduced by Google. It is an Open Source which is based on HTML, CSS and JavaScript. AngularJS is latest framework to develop web based application.

HTML

  • Introduction to HTML
  • Introduction to Web Browser
  • Versions of HTML
  • Uses of HTML
  • Use an HTML Editor
  • HTML Development Environment
  • Use of WYSIWYG Editor
  • Writing Code with a Text Editor
  • Publishing of Documents

Review of HTML Elements

  • Rules of Syntax
  • How to make a Code Readable
  • XHTML Code Compliant
  • Develop a Document
  • Use of Colors – Addition of Colors on web page
  • Use of Headings, Paragraphs, Block quotes, Entities
  • Alignment of Block-Level Elements

Inserting Spaces and Line Breaks

  • How to display Preformatted Text
  • Inline Elements – Formatting
  • Controlling Fonts
  • Introducing List Elements
  • Develop Unordered Lists
  • Develop Ordered Lists
  • Develop Definition Lists
  • Nesting Lists
  • Text Indent

HTML Table

  • Develop HTML Table
  • Use of Border Attribute
  • Cell Padding and Cell Spacing
  • Control Table and Cell Width
  • Aligning of Table on the Page
  • Aligning of Tables and Text
  • Aligning of Table Data
  • Spanning of Columns and Rows
  • Nesting Tables
  • Addition of Colors to Tables
  • Use of Tables as a Designing Tool

Creation of Hyperlink

  • Understand and Use URLs
  • Link to a Web Document
  • Link to a Local Document
  • Link to Anchors
  • Open a New Browser Window
  • iFrame

Graphic File Formats

  • Optimization of Image and File Size
  • Insertion of Inline Images, ImageMap, Sprite Image
  • Alignment and Formatting Images
  • Use of Images to Anchor Links
  • Size formatting and Scaling Images
  • Use of Transparent Images
  • Use of GIF Animation

Forms and Controls

  • Forms & Form Elements
  • Form Actions, Form Methods, Form Design

CSS 2 and CSS 3

  • Semantic mark up
  • Semantics explained
  • HTML or (x)HTML
  • DOCTYPE
  • Document structure and flow
  • Removal of visual elements from mark up
  • What are web standards Validating your mark up

CSS review and basics

  • CSS syntax
  • CSS selectors
  • CSS1 vs CSS2 vs CSS3
  • Validating your CSS
  • Classes and ID’s
  • The cascade
  • Specificity
  • Inheritance

CSS properties

  • The box model
  • Block vs inline elements
  • Div and span
  • Border properties
  • Width, height and max, min
  • The auto property

Creative artwork and CSS

  • Use of images in CSS
  • Apply texture
  • Graduated fills
  • Creative typography
  • Round corners
  • Transparency and semi-transparency
  • Stretchy boxes

Layout principals with CSS

  • Document flow
  • Absolute positioning
  • Relative positioning
  • Static positioning
  • Floating elements

Develop layout with CSS

  • A centered container
  • 2 column layout
  • 3 column layout
  • Faux columns

JavaScript

  • Introduction to JavaScript
  • Origins of JavaScript
  • JavaScript Characteristics
  • Java and JavaScript
  • JavaScript Reserved and Keywords
  • Common Programming Concepts
  • Server-side vs. Client-side Applications
  • Annotating the Code with Comments
  • Work with Variables and Data
  • How to Communicate with the User
  • Use of Data More Than Once: Variables
  • Expressions and Operators
  • Inline Scripting, Simple User Events
  •  onLoad and onUnload Event Handlers
  • Functions, Methods, and Events
  • Conditional Operators
  • Defining and Calling a Function
  • confirm Method and Forms
  • User Events and JavaScript Event Handlers
  • Develop an Interactive Form
  • Form Control
  • Referring to form Objects
  • Tools & Options – button, checkbox, text, textarea, radio button, and select Objects
  • Control Program Flow
  • if…else, while, for, break, and continue Statements
  • Module Operator
  • Using continue in a while Loop
  • Switch Statement
  • The do…while Statement
  • JavaScript Object Model
  • JavaScript Object Hierarchy Model
  • Commonly Used Objects
  • Window, document, history, and location Objects
  • JavaScript Language Objects
  • String, Array, Date, and Math Objects
  • Evaluating Strings
  • Set and Extract Time Information

JQuery

  • Get Start with jQuery
  • Selection of Elements
  • Manipulation of the Page
  • Traversing the DOM and Chaining
  • jQuery Utility Methods
  • Handling of Events and Event Delegation
  • AJAX, JSON and Deferred
  • Enhancing with Animation Effects
  • Grids , Tables with Ajax , Pagination, JQuery UI
  • jQuery Best Practices

Angular JS

  • Introduction to Angular JS
  • AngularJS – JavaScript Framework
  • AngularJS Extends HTML
  • Model-View-Controller approach

AngularJS Expressions

  • AngularJS Expressions
  • AngularJS Objects
  • AngularJS Arrays
  • AngularJS Numbers
  • AngularJS Strings

Angular JS Directives

  • Data Binding
  • Repetition of HTML Elements
  • The ng-model Directive
  • The ng-repeat Directive
  • The ng-app Directive
  • The ng-init Directive

AngularJS Controllers

  • The ng-controller directive
  • Controller Properties
  • Controller Methods
  • Controller in External Files

AngularJS Filters

  • Addition of Filters to Expressions
  • Filter Input
  • Order By filter

AngularJS HTML DOM

  • The ng-disabled Directive
  • The ng-show Directive

AngularJS Events

  • The ng-click Directive
  • How to hide HTML Elements

AngularJS Modules

  • Module Definition

AngularJS Routing

  • Dependency Injection
  • Angular Services
  • Understand Angular Services
  • Register Angular Services
  • Manage Service Dependencies
  • Inject Services into Controllers
  • Test of Angular Services

HTML 5

  • Introduction of HTML5
  • Laying out a page with HTML5
  • New HTML5 Structural Tags
  • Page Formation
  • Page Simplification

Need of HTML5

  • The Problems HTML 4 Addresses
  • The Problems XHTML Addresses
  • The New More Flexible Approach of HTML5 – Paving the Cowpaths
  • New Features of HTML5
  • The HTML5 Specifications
  • Current State of Browser Support

SECTIONS AND ARTICLES

  • The section Tag
  • The article Tag
  • Outlining
  • Accessibility

Working with other media types

  • Switch to a different media
  • Accessibility considerations
  • Delivery to other devices
  • Dynamically switching style sheets
  • Graceful transformation
  • Audio, Video

HTML5 AUDIO AND VIDEO

  • Supported Media Types & Accessibility
  • The audio Element
  • The video Element
  • Scripting Media Elements
  • How to Deal with Non-Supporting Browsers

HTML5 FORMS

  • Modernizr
  • New Input Types

HTML5 NEW FORM ATTRIBUTES

  • autocomplete
  • novalidate

HTML5 NEW FORM FIELD ATTRIBUTES

  • Required
  • Placeholder
  • Autofocus
  • Autocomplete
  • Form
  • Pattern

NEW FORM ELEMENTS

  • Datalist
  • Progress and Meter

HTML5 WEB STORAGE

  • Overview of HTML5 Web Storage
  • Web Storage
  • Other Storage Methods

HTML5 CANVAS

  • Get Start with Canvas
  • Drawing Lines
  • Color and Transparency
  • Rectangles, Circles and Arcs
  • Quadratic and Bezier Curves
  • Images & Text

INTEGRATED APIS

  • Offline Application API
  • Drag and Drop API

Bootstrap

  • Introduction to Bootstrap
  • Quick Styles After Dark
  • Our First Web Page
  • What’s Inside?
  • Scripts and Styles
  • Core Concepts

Layout with Bootstrap

  • Grid Layouts
  • Simple Layout
  • Fixed Grids
  • Fluid Grids
  • Responsive Design
  • Responsive Utilities
  • Inspiration

Bootstrap

  • Introduction of Bootstrap
  • Typography
  • Tables
  • Forms
  • Buttons
  • Images and Icons

Bootstrap Component

  • Drop down Menu
  • Buttons with Menus
  • Tabs and Pill
  • The Navbars
  • Heros, Badges, Labels, and Media

Bootstrap and JavaScript

  • More Buttons
  • Modals
  • Tooltips and Popovers
  • Scrollspy
  • Typeahead
  • Carousel