Courses Offered: SCJP SCWCD Design patterns EJB CORE JAVA AJAX Adv. Java XML STRUTS Web services SPRING HIBERNATE  

       

UI Technologies Course Details
 

Subcribe and Access : 5200+ FREE Videos and 21+ Subjects Like CRT, SoftSkills, JAVA, Hadoop, Microsoft .NET, Testing Tools etc..

Batch Date: Apr 25th @7:30AM

Faculty: Mrs. Swetha

Duration: 2 Months

Venue :
DURGA SOFTWARE SOLUTIONS,
Flat No : 202, 2nd Floor,
HUDA Maitrivanam,
Ameerpet, Hyderabad - 500038.

Ph.No: +91 - 9246212143, 80 96 96 96 96

Syllabus:

UI Technologies

WEB UI (User Interface)

1. HTML4,5
2. CSS2,3
3. JavaScript
4. Jquery
5. AJAX
6. Responsive Design
7. Bootstrap
8. LESS and SCSS
9. Real Time Project

HTML 4

Module 1: Web Programming Introduction

  • Architecture of a website
  • Different technologies in making the website
  • Web Development Introduction

Module 2: HTML-Introduction

  • History of HTML
  • What you need to do to get going and make your first HTML page
  • What are HTML Tags and Attributes?
  • HTML Tag vs. Element
  • HTML Attributes

Module 3: HTML-Basic Formatting Tags

  • HTML Basic Tags
  • HTML Formatting Tags
  • HTML Color Coding

Module 4: HTML-Grouping Using Div Span

  • Div and Span Tags for Grouping

Module 5: HTML-Lists

  • Unordered Lists
  • Ordered Lists
  • Definition list

Module 6: HTML-Images

  • Image and Image Mapping

Module 7: HTML-Hyperlink

  • URL - Uniform Resource Locator
  • URL Encoding

Module 8: HTML-Table

  • <table>
  • <th>
  • <tr>
  • <td>
  • <caption>
  • <thead>
  • <tbody>
  • <tfoot>
  • <colgroup>
  • <col>

Module 9: HTML-Iframe

  • Using Iframe as the Target

Module 10: HTML-Form

  • < input >
  • <textarea>
  • < button >
  • < select >
  • < label >

Module 11: HTML-Headers

  • Title
  • Base
  • Link
  • Styles
  • Script
  • Meta

Module 12: HTML-Miscellaneous

  • HTML Meta Tag
  • XHTML
  • HTML Deprecated Tags & Attributes

PART 2

Module 1: CSS2-Introduction

  • Benefits of CSS
  • CSS Versions History
  • CSS Syntax
  • External Style Sheet using < link >
  • Multiple Style Sheets
  • Value Lengths and Percentages

Module 2: CSS2-Syntax

  • CSS Syntax
  • single Style Sheets
  • Multiple Style Sheets
  • Value Lengths and Percentages

Module 3: CSS2-Selectors

  • ID Selectors
  • Class Selectors
  • Grouping Selectors
  • Universal Selector
  • Descendant / Child Selectors
  • Attribute Selectors
  • CSS - Pseudo Classes

Module 4: CSS2-Color Background Cursor

  • background-image
  • background-repeat
  • background-position
  • CSS Cursor

Module 5: CSS2-Text Fonts

  • color
  • background-color
  • text-decoration
  • text-align
  • vertical-align
  • text-indent
  • text-transform
  • white space
  • letter-spacing
  • word-spacing
  • line-height
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight

Module 6: CSS2-Lists Tables

  • list-style-type
  • list-style-position
  • list-style-image
  • list-style
  • CSS Tables
    • border
    • width & height
    • text-align
    • vertical-align
    • padding
    • color

Module 7: CSS2-Box Model

  • Borders & Outline
  • Margin & Padding
  • Height and width
  • CSS Dimensions

Module 8: CSS2-Display Positioning

  • CSS Visibility
  • CSS Display
  • CSS Scrollbars
  • CSS Positioning
    • Static Positioning
    • Fixed Positioning
    • Relative Positioning
    • Absolute Positioning
  • CSS Layers with Z-Index

CSS Floats

  • The float Property
  • The clear Property
  • The clear fix Hack

JAVASCRIPT

Introduction to JavaScript

  • Introduction of client side script
  • Introduction of javascript
  • Cross browser issues.
  • Declaration syntax of javascript
  • Statements
  • Comments
  • Popup Boxes
  • Alert
  • Confirm
  • Prompt
  • Variables, Arrays and Operators
  • Variables
  • Operators
  • Arithmetic
  • Assignment
  • Comparison
  • Logical

Document Object Model

  • Functions and types
  • Conversion functions

Conditional Statements

  • if
  • if…else
  • if…else if…else
  • Switch

Loops

  • while
  • do…while
  • for
  • for…in Statement
  • Break
  • Continue

Window Object Document Object Arrays

  • Associative Arrays
  • Array Properties and Methods

Advanced JavaScript

  • Date object
  • This object
  • Event object
  • State managament
  • Cookie
  • Form validation
  • Expressions
  • Email validation
  • Dynamic functionalities of html controls

Oop

1. Class based oop, prototype base oop
2. Inheritance,encapsulation,polymorphism,constructor,this,super
3. Native objects

  • Promises
  • Clousers
  • Arrow functions

HTML5 Introduction

  • HTML5 HISTORY
  • New Features and groups
  • Backward Compatibility
  • Why HTML5?
  • Power of HTML5:
  • m or mobi or touch domains
  • Common Terms in HTML5

HTML5 Syntax

  • The DOCTYPE:
  • Character Encoding:

Obsolete Elements/Deprecated Elements

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <isindex>
  • <noframes>
  • <s>
  • <strike>
  • <tt>
  • <u>
  • <xmp>

HTML5 New Elements

  • New Semantic/Structural Elements
  • <article>
  • <aside>
  • <bdi>
  • <command>
  • <details>
  • <dialog>
  • <summary>
  • <figure>
  • <figcaption>
  • <footer>
  • <header>
  • <mark>
  • <meter>
  • <nav>
  • <progress>
  • <ruby>
  • <rt>
  • <rp>
  • <section>
  • <time>
  • <wbr>

HTML5 Canvas

  • What is Canvas?
  • Create a Canvas
  • Canvas Coordinates
  • Canvas – Paths
  • Canvas – Text
  • Canvas – Gradients
  • Canvas – Images

HTML5 SVG

  • What is SVG?
  • SVG Advantages
  • Differences Between SVG and Canvas
  • Comparison of Canvas and SVG

HTML5 Drag/Drop

  • Introduction
  • Make an Element Draggable
  • What to Drag?Where to Drop?

HTML5 Geo location

  • Introduction
  • Locate the User’s Position+
  • Handling Errors and Rejections
  • The getCurrentPosition()
  • Geolocation object

HTML5 Video

  • Introduction
  • Video on the Web
  • How It Works?
  • Video Formats and Browser Support
  • HTML5 Video Tags

HTML5 Audio

  • Introduction
  • Audio on the Web
  • How It Works?
  • Audio Formats and Browser Support
  • HTML5 Audio Tags

HTML5 Input Types

  • Introduction
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

HTML5 Form Elements

  • <datalist>
  • <keygen>
  • <output>

HTML5 Form Attributes

  • New attributes for <form> and <input>New attributes for <form>:
  • autocomplete
  • novalidate

New attributes for <input>

  • autocomplete
  • autofocus
  • form, formaction
  • formenctype,formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list, min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required, step

HTML5 Semantic

  • Introduction
  • What are Semantic Elements?
  • non-semantic elements: <div> and <span>
  • semantic elements: <form>, <table>, and <img>
  • New Semantic Elements in HTML5
  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>

HTML5 Web Storage

  • What is HTML5 Web Storage?
  • Browser Support
  • The localStorage Object
  • The sessionStorage Object

CSS3

  • Introduction
  • CSS3 Modules
  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Borders

  • border-radius
  • box-shadow
  • border-image

CSS3 Backgrounds

  • background-size
  • background-origin

CSS3 Text Effects

  • text-shadow
  • word-wrap

CSS3 Fonts

  • @font-face Rule
  • font-stretch
  • font-weight

CSS3 2D Transforms

  • How Does it Work?
  • Browser Support
  • 2D Transforms
  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

CSS3 3D Transforms

  • rotateX()
  • rotateY()

CSS3 Transitions

  • How does it work?
  • transition-property, duration and delay

CSS3 Animations

  • CSS3 @keyframes Rule
  • Browser Support
  • Animation, animation-duration

CSS3 Multiple Columns

  • column-count
  • column-gap
  • column-rule

CSS3 User Interface

  • resize
  • box-sizing
  • outline-offset

JQUERY

Introduction

  • What You Should Already Know
  • What is jQuery ?
  • Adding the jQuery Library to Your Pages
  • Basic jQuery Example
  • Downloading jQuery
  • Alternatives to Downloading
  • jQuery Syntax
  • The Document Ready Function
  • How to use Custom Scripts?
  • Using Multiple Libraries
  • jQuery – noConflict() Method

jQuery – Basics

  • String
  • Numbers
  • Boolean
  • Objects
  • Arrays
  • Functions
  • Arguments
  • Scope
  • Built-in Functions

jQuery – Selectors

How to Use Selectors?

  • jQuery – CSS Element Selector and ID Selector
  • jQuery – CSS Element Class Selector and Universal Selector
  • jQuery – CSS Multiple Elements E, F, G Selector
  • jQuery Callback Functions

jQuery – DOM Attributes

  • Get Attribute Value
  • Set Attribute Value

jQuery – DOM Traversing

  • Find Elements by index
  • Filtering out Elements
  • Locating Descendent Elements
  • JQuery DOM Traversing Methods

jQuery – CSS Methods

  • Apply CSS Properties and Multiple CSS Properties
  • Setting Element Width & Height
  • JQuery CSS Methods

jQuery – DOM Manipulation Methods

  • Content Manipulation
  • DOM Element Replacement
  • Removing DOM Elements
  • Inserting DOM elements
  • DOM Manipulation Methods
  • Binding event handlers
  • Removing event handlers
  • Event Types
  • The Event Object and Attributes

jQuery – Effects

  • JQuery Effect Methods, Hide and Show
  • jQuery Toggle
  • jQuery Slide – slideDown, slideUp, slideToggle
  • jQuery Fade – fadeIn, fadeOut, fadeTo
  • jQuery Custom Animations

jQuery – AJAX

  • load()
  • get()
  • post()
  • ajax()

jQuery – JSON

  • getJSON()

Jquery-3.6.1.js

Jquery-cycle.js

Jqueyr-ui.js

Jquery-validation.js

Jquery-cycle.js

Jquery-ripple.js

AJAX

Introduction to Ajax

  • What is Ajax?
  • What can you do with Ajax?
  • Ajax and Web 2.0
  • Ajax Basics
  • Asynchronous requests to consume services or APIs
  • Asynchronous Cross-Origin requests (CORS)

Javascript AJAX Call

  • XMLHttpRequest object
  • Open
  • Send
  • Onreadystatechange
  • Response text

HTML Template Tag

  • Working with Template tags
  • Template tag features
  • Template content cloning
  • Manipulating template content and injecting new nodes

Ajax with jQuery

  • Overview
  • $.ajax() method and settings
  • $.params() method
  • jQuery and requests to JSON, XML, PHP sources
  • jQuery and Template Tag

Responsive Design

  • Meta tag
  • Media queries

LESS and SCSS

Real Time Project