Java Front End UI Training

java front end ui

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

Bootstrap3

Working with Bootstrap 3

  • Introduction to Bootstrap 3
  • Bootstrap History
  • Why Bootstrap
  • Embedding Bootstrap in to 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

JavaScript

  • Introduction
  • Where To
  • Output
  • Syntax
  • Statements
  • Comments
  • Variables
  • Operators
  • Arithmetic
  • Assignment
  • Data Types
  • Functions
  • Objects
  • Scope
  • Events
  • Strings
  • String Methods
  • Numbers
  • Number Methods
  • Math
  • Dates
  • Date Formats
  • Date Methods
  • Arrays
  • Array Methods
  • Booleans
  • Comparisons
  • Conditions
  • Switch
  • Loop For
  • Loop While
  • Break
  • Type Conversion
  • RegExp
  • Errors
  • Debugging
  • Hoisting
  • Strict Mode
  • Style Guide
  • Best Practices
  • Mistakes
  • Performance
  • Reserved Words
  • Forms
  • Forms Validation
  • Forms API

jQuery

jQuery – Introduction

  • JQuery Library
  • First JQuery Example
  • The 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

Angular JS

  • What is AngularJS
  • Angular Architecture
  • Angular modules
  • Controllers in AngularJS
  • Two way data binding in AngularJS
  • AngularJS directives
  • Custom Directives in Angular Js
  • Filters
  • Custom filters
  • http and custom services
  • Routing
  • Layout and partial templates
  • Project Demo

Send Enquiry

Your Name (required)

Your Email (required)

Your Phone No. (required)

Subject

Your Message