INTRODUCTION TO WEB DEVELOPMENT CURRICULUM

SESSION DESCRIPTION OF SESSION OBJECTIVES

What is HTML?
Basic document structure of HTML,
Anatomy of elements of HTML,
01 Introduction to HTML
Heading and its types in HTML,
How to create Paragraphs,
Learn to style in HTML

Learn to format HTML text:

Create Bold, Italic, Underlined,
02 HTML formatting Strikethrough, Superscript, Subscript,
Inserted and Deleted text,
Monospace font

Play with the HTML text some more and

create: larger text, smaller text,
03 HTML Text
emphasized text, Marked text.
Learn the concept of grouping content.

Create an HTML page/doc keeping in

mind:
HTML tags, choose a suitable font size for
heading, subheading and the content.
04 Mini Project - 1
Use the paragraph tag to structure your
content.
Use different formatting tags to make
your HTML page appealing.

Strong text, Text abbreviation, acronym

element, text direction, special terms,
05 HTML Phrase tags
quoting text, short quotations, text
citations

Inserting images, set image width/

06 HTML Images & Tables
height, Links, tables, list, blocks

Creating story book:

Use HTML table tag to create a structure
of the book.
07 Mini Project - 2 Using image and phrase tags to create a
storyline.
Use HTML formatting text and font tags
to elaborate your story.

Overview of CSS
Getting familiar with Syntax, type
08 CSS-1 selectors, descendant selectors, universal
selectors, class selectors, ID selectors,
attribute selectors and child selectors in
CSS.

Inline styling, internal CSS, external CSS,

09 CSS-2 introduction store style and link elements,Imported
CSS

CSS color property,background, text

10 CSS -3
font property,margin , padding.

Story Book Editing

Give it a border line, margin and padding
11 Mini project-3 using CSS style sheets.
Optional - also you can add some images
(like logo for your page

Explore the various Form elements

Input element,
12 Html forms-1 Text input,
And Buttons types-
radio button input, submit button,

Learn the various attribute types in a

form -
13 Html forms - 2 Action attribute,
Target attribute,
Method attribute

Uses of GET and POST,

14 Html forms - 3 Name Attribute, grouping the form data
with field set

Create a subscription form for your

15 Mini project - 4
storybook page

16 FlexBox CSS FlexBox Layout Module

Learn about using background gradients

17 Background Gradients and Favicon
and favicon

Learn about using IFrames and Opacity

18 IFrames and Opacity/Hover Effects
/Hover Effects

Learn about creating Website Layout

19 Website Layout
Model

Learn about creating canvas in HTML

20 Html graphics-1
page

21 Html graphics -2 Learn about Scalable Vector Graphics

Learn about adding Html media , audio,

22 Html Media
videos

Geolocation (GPS), drag & drop, web

23 Html API
storage

Discussing debugging.
24 Debugging tips & Emendation
Emendation

Student’s initiative under teacher’s

25 Minor Project 1
guidance project

Student’s initiative under teacher’s

26 Quiz on HTML and CSS
guidance project

Making a form
-using radio buttons
27 Project -2
-adding submit button
-text and password input

-Setting the background sound using the

audio element
Interactive elements, Working with
28 Multimedia
-Using the video element
-Embedding a video file from other
website

-Incorporating Javascript in the head and

body elements
29 Overview of Javascript
- Introduction to use an external
javascript file

-Working with functions

30 Javascript Functions, Events -Working with on click, onload, mouse
and on submit event

31 Image Maps -Working with image maps

32 Animations -Working with animations

33 Javascript Objects-I -Working with tempelates of an Object

-Working with String, Boolean, Number,

34 Javascript Objects-II
Array, Date and Math Object

Working with browser and document -Working with Window, Navigator,

35 objects & document object model History, Screen and Location Object

Create a simple multiplication table

36 Project -2 asking the user the number of rows and
columns he/she wants

- Validating forms
-Using regular expressions to validate
37 Validation, Errors, Debugging
email address, mobile number, card
number, etc

-Handling exceptions using try-catch

38 Exception Handling and security statement
-Using onerror event

-Create a sample form program which

collects first_name, last_name, email,
39 user_id, and password and confirms
password from the user
-All the inputs are mandatory and email
Project-3 should be in correct format
-Also, the values entered in the password
and confirm password textboxes should
be the same
-Also display proper error message if
there is any error

40 Mini project-1 -Showing a popup message using EVENT

-Working with display and visibility

Displaying and Positioning of an
41 element
property
-Working with element

42 Floating an element -Fixing positions of the element

-Using the UI Element States, Structural

43 Pseudo classes
and Negation pseudo classes

-Using first-line, first-letter, before and

44 Pseudo elements
after pseudo element

45 Project -4 -Making the clumsy bird game

-Hosting the webpage

46 Web Hosting -Basics of server
-Free website hosting

47 Self Made Project

48 Self Made Project