1. Introduction to Web technology:

• What is a web?
• What is a network?
• What is the internet?
• What is web development?
• What is a browser?
• What is a web server?
• What is HTTP?
• What is the use of HTTP?
• What is HTML?
• What is the website?
• What is a web page?
• Structure of Web
• Definition of all the points
• Install of Editors
• How to write a program using editors

2.HTML-5 :

Introduction:

• • • Structure of Html
    • What are tags?
    • Types of tags
    • Attributes
    • All tags attributes
    • How to apply all the attributes on web-pages

Table:

• • • How to create a table in Html
    • Attributes of table
    • Example

List :

• • • How to create a list
    • Attributes of list
    • Example

Audio/Video:

• • • Attributes of audio/video-tag
    • How to create an audio page
    • How to create a video page

I-frame :

• • • What is a nested web page?
    • How to create nested web-pages
    • Attributes of nested web-pages

SVG :

• • • How to define graphics in HTML
    • Attributes of SVG

Form :

• • • What is form
    • How to create forms using HTML
    • How to create a log-in page
    • How to create a registration page using the form
    • Attributes of form

3. CSS-3 :

Introduction:

• • • What is CSS?
    • What is the use of CSS?
    • Types of CSS
    • How to call CSS inside HTML pages

Background:

• • • How to set background properties
    • Attributes for background

Box-Model:

• • • What is box-model in CSS
    • How to work with box-model

Selectors:

• • • What is a selector?
    • Types of selector
    • How to apply selector

Combinators:

• • • What are combinators?
    • Types of combinators
    • How it is related to selectors

Pseudo-class & Pseudo-elements:

• • • What is pseudo-class?
    • What is pseudo-elements
    • Types of pseudo-class
    • Types of pseudo-elements
    • How to apply

Transition, Transform & Animation in CSS :

• • • Applications of Transition, Transform & Animation
    • Use of Transition, Transform & Animation
    • Basic Project based on Transition, Transform & Animation.

4. Javascript :

Introduction:

• • • What is JavaScript?
    • What is the difference between
    • Java & JavaScript
    • Application of JavaScript
    • Advantages & Disadvantages of JavaScript
    • Types of JavaScript
    • Datatypes in JavaScript
    • Looping Statement
    • Conditional Statement

Function & Arrays:

• • • What is function
    • What is array
    • Types of function
    • Methods of array

String & Object :

• • • What is string
    • Methods of string
    • What is object
    • How to create an object in js

Date & Math :

• • • What is the date method
    • What is the math method
    • Methods of date & math

Collection in js :

• • • What is collection
    • Types of collection

Advanced array methods in js

• • • JavaScript Closure
    • DOM elements in JavaScript
    • JSON in JavaScript
    • Ajax in JavaScript
    • Canvas using JavaScript

Regular Expression in js:

• • • What is the regular expression
    • How to create the dynamic form in js

5. jQuery:

1)Introduction and Syntax Overview

• • • Introduction to jQuery
    • How to add jQuery to an HTML page? Using CDN or file
    • jQuery Syntax Overview.
    • jQuery selectors. How to use selectors
    • The Element Selector in jQuery
    • The Id Selector in jQuery
    • The Miscellaneous jQuery Selectors (
    • Element.class, element.nth-child)

2) Event Handling in jQuery

• • • jQuery events triggering and types of events.
    • Trigger Mouse Events in jQuery
    • Keyboard events in jQuery
    • Form Events in jQuery
    • Document/Window Events in jQuery
    • jQuery on() and off() methods to handle events

3) jQuery Effects

• • • hide(), side() and toggle() Methodds.
    • fadeIn(), fadeOut(), fadeToggle() and fadeTo() Methods
    • slideIn(), slideOut() and slideToggle() Methods
    • animate() method, add CSS animations properties using jQuery
    • stop(), clearQueue(), Finish() method
    • jQuery Method Chaining

4) jQuery HTML Methods

• • • Get and set Content – text(), html() and val()
    • Get and set COntent – attr(), data() and prop()
    • jQuery add element – append(), prepend(), after() and before()
    • jQuery remove element – remove() and empty() methods
    • jQuery css classes – addClass(), removeClass() and toggleClass() methods
    • jQuery css() method – get and set css properties
    • jQuery Dimensions – get and set width and height

5. jQuery Traversing

• • • WHat is Traversing?
    • jQuery Traversing – Ancestors
    • jQuery Traversing – Descendants
    • jQuery Traversing – Siblings
    • jQuery Traversing – Filtering
    • had() and is() methods
    • each() method

6. Events Objects: Properties & Methods

• • • PageX, PageY and offset method
    • enent.type property
    • event.which property
    • event.target property
    • event.preventDefault() and event.isDefaultPrevented() methods.
    • event.stopPropagation() and event.isPropagationsStopped()
    • event.data property

7. jQuery-UI

• • • What is jQuery UI?
    • Required files for jQuery UI
    • Adding online and offline references

8. Interaction: Draggable

• • • Introduction to Draggable interaction
    • Restrict the draggable interaction
    • Cancel draggable interaction
    • Set Type, Position and Click-ability of Cursor
    • Pixels to move using Grid Property.
    • Return to the Original Position using Revert Property
    • Add a helper for draggable element
    • Magnetic effect using snap property
    • Other properties
    • Managing the events of draggable.

9. Interaction: Droppable

• • • Introduction to Droppable
    • Decide Which Draggable Element To Be Accepted.
    • Decide when an Element is to be Considered as Dropped
    • Decide which Nested
    • Droppable Element to Accept Dropped Element
    • Manage the look of the droppable based on the draggable
    • Decide whether to revert back or not when miss match
    • Manage events in Droppable

10) Interaction : Resizeable

• • • Introduction to Resizeable
    • Where to drag to resize?
    • Synchronize method
    • Ghost and Helper Methods
    • Restrict Resizable
    • Maintain aspect ratio of resizable
    • Animate resizing
    • Manage Events

11) Selectable

• • • Introduction to selectable
    • Filter Selectable and Non-Selectable

12) Sortable

• • • Introduction to sortable
    • Replace the white space using a placeholder option
    • Connect between Sortable
      Make some items sortable

13) Accordion

• • • Introduction to Accordion
    • Allow to Collapse All Panels
    • Decide which Panel to be Display the content
    • Set the Height of the Content Panels
    • Change the Default Icons in Accordion

14) Tab

• • • Introduction to Tabs Widget
    • Animate Hiding and showing of Panels
    • Miscellaneous Options

15) Autocomplete

• • • Introduction to autocomplete
    • Select One and Display Another
    • Some autocomplete options
      Position options in autocomplete
    • Manage Events

16) Dialog

• • • Introduction to Dialog Widget
    • Show and hide effects
    • Set the size and position of the dialog box
    • Change Default Functionalities
    • Add Modal Behavior
    • Add Buttons to the Dialog
    • Manage Events
    • Different methods

17) Datepicker

• • • Introduction to Datepicker
    • Make Dates in a Range Selectable
    • Make weekends/weekdays non-selectable
    • Make Specific Dates Non-Selectable
    • Holiday concept in date-picker
      Style Holidays in your Calendar
    • Animate field and alternate text
    • Show a date picker in different ways.
    • Change default date picker options
    • Change the language of the date picker
    • Control Datepicker Programmatically

18) Progress Bar

• • • Introduction to Progress Bar
    • Customize the progress bar
    • Change the value of the progress bar programmatically

19) Slider

• • • Introductions to the slider
    • Change event in slider
    • Range Slider
    • Other Options
    • Manage Events

20) Menu

• • • Introduction to the Menu
    • Change icons of the menu
    • Divider & items option.
    • Manage events

21) Tooltip

• • • Introduction to tooltip
    • Show & hide effects for tooltip
    • Position of the tooltip
    • Customize the look of the tooltip
    • Customize the content of the tooltip
    • Events and Methods

22) Spinner

• • • Introduction to the Spinner
    • Methods of the Spinner

23) Other Widgets

• • • Button Widget
    • Checkbox Radio
    • Select menu widget
    • Control group

24) Effects

• • • Effect method
    • The show and hide method

6. Bootstrap:

Introduction:

• • • What is bootstrap
    • How to apply bootstrap on web-pages
    • Benefits of using bootstrap
    • Grid system in bootstrap
    • Classes in bootstrap
    • How to create a table using bootstrap-class
    • How to create forms using bootstrap-class
    • What is a carousel in bootstrap
    • How to apply all of this to create one project.

Project Set-up:

• • • Responsive project using Html, CSS ,JavaScript & bootstrap