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

Batch Date: Apr 2nd @6: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