Web Development Guide Zeeshan Ullah

Table of Content
S. No. Topic P. No.

HTML5 Course Structure

01 Day 1 – Introduction to HTML 1
02 Day 2 – HTML Text & Formatting 1
03 Day 3 – Working with Links & Media 2
04 Day 4 – Working with Tables & Forms 3
05 Day 5 – Advanced HTML Concepts 3
06 Day 6 – Hands-on Projects 4

CSS3 Course Structure

01 Day 1 – Introduction to CSS 5
02 Day 2 – Box Model and Spacing 5
03 Day 3 – Text, Color, and Background 6
04 Day 4 – Styling Tables, Lists, and Links 6
05 Day 5 – Display and Positioning 6
06 Day 6 – Flexbox for Layouts 7
07 Day 7 – Grid for Layouts 7
08 Day 8 – Advanced CSS Concepts 7
09 Day 9 – Animations and Transitions 8
10 Day 10 – Responsive Design & Media Queries 8
11 Day 11 – CSS Variables & Optimization 9
12 Day 12 – Final Project (Practical Implementation) 9

Email: zeeshanrahmatkpk@gmail.com 1|Page

Web Development Guide Zeeshan Ullah

JavaScript Course Structure

01 Day 1 – Introduction to JavaScript 10
02 Day 2 – Variables, Data Types, and Operators 10
03 Day 3 – Conditional Statements and Loops 11
04 Day 4 – Functions in JavaScript 11
Day 5 – Document Object Model (DOM)
05 12
Manipulation
06 Day 6 – Form Validation 12
07 Day 7 – Arrays, Strings, Math, and Boolean Objects 13
08 Day 8 – Object-Oriented Programming (OOPs) 13
09 Day 9 – Classes and OOP Concepts 13
10 Day 10 – Cookies in JavaScript 14
11 Day 11 – JavaScript Events 14
Day 12 – Final Project: Interactive Web App
12 15
(Practical Implementation)

Ta b l e o f C o n t e n t s 2|Page
Web Development Guide Zeeshan Ullah

HTML5 Course Structure

Day 1 – Introduction to HTML
1) What is HTML?
2) Static HTML vs. Dynamic HTML
3) How the Web Works (Client-Server Model)
4) Setting Up an HTML Editor
• PC: Visual Studio Code, Notepad++
• Mobile: TrebEdit
5) Basic HTML Structure
• HTML Tag & Syntax
• HTML Attributes
• HTML Elements
• HTML Comments
• HTML Layout (Head, Body, Footer)
• Box Model (Basic Introduction)

Day 2 – HTML Text & Formatting

1) Text Formatting Tags
• Headings (<h1> to <h6>)
• Paragraph (<p>)
• Bold, Italic, Underline (<b>, <i>, <u>)
1|Page HTML5 Course Structure
Web Development Guide Zeeshan Ullah

• Superscript, Subscript (<sup>, <sub>)

• Highlighting (<mark>)
• Strikethrough (<del>)
2) Quotation & Special Text Formatting
• Blockquote (<blockquote>)
• Code (<code>)
3) Spacing & Structure
• Line Break (<br>)
• Horizontal Rule (<hr>)
• Preformatted Text (<pre>)
Mini Project: Create a "My First Blog Page" with formatted text.

Day 3 – Working with Links & Media

1) Adding Media to HTML
• Images (<img>)
• Video (<video>)
• Audio (<audio>)
2) Linking Pages & External Content
• Anchor Tags (<a>) – Internal & External Links
• Embedding Webpages (<iframe>)
• Embedding Objects (<embed>, <object>)
3) Lists in HTML
HTML5 Course Structure 2|Page
Web Development Guide Zeeshan Ullah

• Ordered List (<ol>)

• Unordered List (<ul>)
• Definition List (<dl>)
Mini Project: Design a "Portfolio Page" with images, videos,
and hyperlinks.

Day 4 – Working with Tables & Forms

1) Creating Tables in HTML
• Basic Table Structure (<table>, <tr>, <td>, <th>)
• Merging Cells (rowspan, colspan)
• Styling Tables with Inline CSS
2) Building Forms in HTML
• Input Fields (<input> types: text, password, email, etc.)
• Labels (<label>)
• Dropdown (<select>)
• Textarea (<textarea>)
• Buttons (<button>, <input type="submit">)
• Form Attributes (action, method)
Mini Project: Design a "Student Registration Form."

Day 5 – Advanced HTML Concepts

1) SEO & Web Optimization

3|Page HTML5 Course Structure

Web Development Guide Zeeshan Ullah

• Link Tag (<link>) – Stylesheets & Favicon

• Meta Tags (<meta>) – Description, Keywords
• SEO Optimization (Core Web Vitals)
2) Understanding HTML Structure
3) Inline vs. Block Elements
• Semantic HTML (<header>, <footer>, <section>, <article>)
Mini Project: Create a basic website structure using semantic
HTML.

Day 6 – Hands-on Projects

1) Project 1: Create an Online CV (Only HTML)
• Use headings, paragraphs, lists, and links
• Embed an image for profile photo
• Add a contact form
2) Project 2: Build a Simple Media Player (Pure HTML)
• Use <video> and <audio> elements
• Add custom controls with attributes

HTML5 Course Structure 4|Page

Web Development Guide Zeeshan Ullah

CSS3 Course Structure

Day 1 – Introduction to CSS
1) What is CSS? What is it used for?
2) Linking HTML and CSS
3) CSS Basics
• CSS Syntax
• Basic CSS Selectors
• CSS Comments
• CSS Properties
• CSS Units (px, em, rem, %, vh, vw)

Day 2 – Box Model and Spacing

1) CSS Height and Width Property
2) CSS Box Model (Content, Padding, Border, Margin)
3) CSS Margin, Padding, and Border Properties
4) Margin Collapse Concept
5) Border Box Concept
Mini Project: Create a simple webpage layout using box model
properties.

5|Page CSS3 Course Structure

Web Development Guide Zeeshan Ullah

Day 3 – Text, Color, and Background

1) CSS Background Properties (color, image, position, repeat)
2) CSS Font Properties (Font Family, Size, Weight, Fallback)
3) CSS Text and Color Properties (Alignment, Decoration,
Spacing)
4) CSS Shadows and Outlines (for Text and Boxes)
Mini Project: Design a stylish typography-based page.

Day 4 – Styling Tables, Lists, and Links

1) CSS Specificity Concept
2) CSS Table and List Styling
3) CSS Anchor Pseudo-classes (:hover, :focus, :active, :visited)
Mini Project: Create a navigation menu with hover effects.

Day 5 – Display and Positioning

1) CSS Visibility and Opacity
2) CSS Display Property
• Inline
• Block
• Inline-block

CSS3 Course Structure 6|Page

Web Development Guide Zeeshan Ullah

3) CSS Positioning and Float Property

Mini Project: Design a simple card-based UI layout.

Day 6 – Flexbox for Layouts

1) CSS Flexbox
• Flex container and flex items
• Justify-content, align-items, align-self
• Flex-wrap and flex-direction
Mini Project: Create a responsive navigation bar using Flexbox.

Day 7 – Grid for Layouts

1) CSS Grid Layout
• Grid container and grid items
• Grid-template-columns and grid-template-rows
• Grid gap and alignment
Mini Project: Design a grid-based gallery layout.

Day 8 – Advanced CSS Concepts

1) CSS Float and Clear Property
2) CSS Z-index (Layering Elements)
3) CSS Object Properties (object-fit, object-position)

7|Page CSS3 Course Structure

Web Development Guide Zeeshan Ullah

4) Advanced CSS Selectors & Pseudo Elements

• ::selection, ::placeholder, ::first-letter, ::before, ::after
Mini Project: Style a custom input form with advanced pseudo-
elements.

Day 9 – Animations and Transitions

1) CSS Animation Property (Keyframes)
2) CSS Transform Property
• 2D Transforms (rotate, scale, skew, translate)
• 3D Transforms (perspective, rotate3d)
3) CSS Transition Property (Smooth Effects)
Mini Project: Create an animated button hover effect.

Day 10 – Responsive Design & Media Queries

1) CSS Media Queries
• Mobile-first design
• Breakpoints and Responsive Design
2) CSS Min/Max Width and Height
Mini Project: Make the previous card design project responsive.

CSS3 Course Structure 8|Page

Web Development Guide Zeeshan Ullah

Day 11 – CSS Variables & Optimization

1) CSS Variables
• Defining and using variables
• Theming with CSS variables
Mini Project: Create a light/dark mode switch using CSS
variables.

Day 12 – Final Project (Practical Implementation)

1) Portfolio Website – Build a fully responsive website
• Build a portfolio website that showcases your projects,
skills, experience, and interests.
• Apply Flexbox, Grid, Animations, and Media Queries
• Include a responsive navigation bar and footer

9|Page CSS3 Course Structure

Web Development Guide Zeeshan Ullah

JavaScript Course Structure

JavaScript Learning Apps
App 1:
https://play.google.com/store/apps/details?id=com.meenstudi
o.learnjavascript
App 2:
https://play.google.com/store/apps/details?id=com.codeliber.js

Day 1 – Introduction to JavaScript

1) Connecting JavaScript to HTML
2) Comments in JavaScript
3) JavaScript Output Methods
• console.log()
• alert()
• document.write() (App 2 Project: Simple Output Page)
Mini Project: Create a basic webpage with JavaScript output.

Day 2 – Variables, Data Types, and Operators

1) Variables (var, let, const)

JavaScript Course Structure 10 | P a g e

Web Development Guide Zeeshan Ullah

2) Data Types (string, number, boolean, object, null,

undefined)
3) Operators (Arithmetic, Assignment, Comparison, Logical,
Bitwise, Ternary)
Mini Project: Build a simple calculator using JavaScript
operators.

Day 3 – Conditional Statements and Loops

1) Conditional Statements

• if, else, else if, nested if

2) Switch Statements
3) Loops (for, while, do while, forEach)
Mini Project: Create a number guessing game using conditions
and loops.

Day 4 – Functions in JavaScript

1) Function Declaration
2) Function Expressions
3) Arrow Functions
4) Function Parameters & Return Values
Mini Project: Build a dynamic greeting message generator.
11 | P a g e JavaScript Course Structure
Web Development Guide Zeeshan Ullah

Day 5 – Document Object Model (DOM)

Manipulation
1) DOM Elements.
2) DOM Node Types.
3) DOM Properties and Methods.
4) DOM Events.
5) DOM Collections.
Mini Project: Create a real-time clock display using DOM
manipulation.

Day 6 – Form Validation

1) JavaScript for Form Validation
2) Validating input fields (name, email, password)
3) Preventing form submission on invalid input
Mini Project: Design a signup form with validation.

JavaScript Course Structure 12 | P a g e

Web Development Guide Zeeshan Ullah

Day 7 – Arrays, Strings, Math, and Boolean Objects

1) Boolean Values and Logic
2) Math Object (Random numbers, rounding, min/max)
3) Strings (Methods: length, toUpperCase(), toLowerCase(),
trim(), substring())
4) Arrays (Methods: push, pop, shift, unshift, splice, slice,
map, filter, reduce)
Mini Project: Create a random password generator.

Day 8 – Object-Oriented Programming (OOPs)

1) JavaScript Objects
2) Prototype Object
3) Date Object (new Date())
4) Number Object
Mini Project: Create a digital clock using the Date object.

Day 9 – Classes and OOP Concepts

1) Classes & Constructor Method
2) Static Methods
3) Encapsulation (Getters & Setters)

13 | P a g e JavaScript Course Structure

Web Development Guide Zeeshan Ullah

4) Inheritance
5) Polymorphism
6) Abstraction
Mini Project: Build a student management system using OOP.

Day 10 – Cookies in JavaScript

1) What are Cookies?
2) Cookie Attributes (path, expiry, secure flag)
3) Creating and Reading Cookies
4) Deleting Cookies
Mini Project: Implement a cookie-based dark mode toggle.

Day 11 – JavaScript Events

1) JavaScript Events (onclick, onload, onresize, dblclick)
2) JavaScript Event Listener (addEventListener())
Mini Project: Create an interactive image slider.

JavaScript Course Structure 14 | P a g e

Web Development Guide Zeeshan Ullah

Day 12 – Final Project: Interactive Web App

(Practical Implementation)
1) To-Do List App – (Beginner Level)
• Create a simple to-do list app that allows users to add,
remove, and mark tasks as completed using DOM, events,
and local storage.
2) Quiz Game – (Intermediate Level)
• Build a quiz game that tests users' knowledge on a
particular subject using DOM, events, and local storage.
3) E-commerce Website – (Advanced Level)
• Build an e-commerce website that allows users to browse
products, add to cart, and checkout.

15 | P a g e JavaScript Course Structure