10 to 12 pages
Bilkul Khushboo! Ab tumhara web development ka basic foundation strong banane ke liye, yeh
script HTML, CSS aur JavaScript ki poori journey deep theory se le kar real-life examples,
syntax breakdown, visual thinking, and gradually JavaScript ke sath HTML tags ki detail tak le
jaayegi. Iss script ko 10-12 pages length ki classroom notebook/learning session ke anuroop
banaya gaya hai.
Web Development Script: HTML, CSS, JavaScript
(10-12 Pages)
Session Introduction: Why Web Development?
You: Khushboo, ab C++-DSA ka foundation ho gaya, toh ab hum web development start karte
hain. Yeh digital duniya me roz kam aata hai—har website, app ka base HTML, CSS, aur
JavaScript hi hai. Socho: Amazon page, YouTube, Netflix sab ki shuruat isi se. Hum theory +
practical + real-life example approach se chalenge.
1. HTML – Web Ki Skeleton
Theory
HTML ka full form: HyperText Markup Language
Yeh web page ka basic structure fix karta hai – jaise skeleton body ko shape deta hai.
Sara layout tags ke through banta hai, jaise <html>, <head>, <body>, <h1>, <p>, <img>, <a>, etc.
HTML file ka flow:
<!DOCTYPE html>
<html>
<head>
<title>Mera Pehla Webpage</title>
</head>
<body>
<h1>Welcome Khushboo!</h1>
<p>Web development ka pehla din!</p>
<img src="https://via.placeholder.com/100" alt="Sample">
<a href="https://www.google.com">Google Jaao</a>
</body>
</html>
Head: Title, meta, CSS, scripts ke liye
Body: Jo screen par actually dikh raha hai
Real-life Example
Newspaper: Headline (<h1>), paragraph (<p>), photo (<img>), news count table (<table>),
“read more” link (<a>).
School register: Roll numbers list (like table), student photo (image), result (table),
description (paragraph).
2. HTML Tags & Attributes – Structure Samajho
Tags: Start & end, e.g. <h1>…</h1>, <img>, <br>
Attributes: Extra detail/setting tag ke andar, jaise <img src="image.jpg" width="100">
Examples:
<input type="text" placeholder="Enter name">
<a href="contact.html" target="_blank">Contact</a>
Tag ke bina website ka structure possible nahi!
3. HTML Lists, Tables & Forms
Lists (ul/ol/li): Shopping list, to-do items
Tables: Data arrangement - marksheet, attendance
Forms: Input lene ke liye (name, email, selection)
<form>
Name: <input type="text" name="username"><br>
Gender: <select><option>Male</option><option>Female</option></select><br>
<button type="submit">Submit</button>
</form>
Real-life: Exam form, online signup, food delivery - sab form se hota hai.
4. CSS – Web ko Rangin Banana
Theory:
CSS ka full form: Cascading Style Sheets
Kaam: Web page ko beautiful, organized, and responsive banana
Selectors: Kis pe style lagana (h1, .class, #id)
Properties: Kya style karna (color, margin, font-size, border, padding)
Syntax Example:
h1 { color: blue; }
p { font-size: 20px; }
#profile { border: 2px solid green; }
.menu { background: #f9f9f9; }
CSS Lagaane ke 3 Tareeke:
1. Inline: Tag ke andar
2. Internal: <style> tag head ke andar
3. External: alak CSS file (style.css) jod ke
Sunny: Yeh sab ek basic page pe demo kare, structure+style ka effect bataye
Real-life Example
Uniform: Same structure (school dress) + colour change (house-wise).
Festival decoration: Same ghar, alag rang aur lighting (CSS).
5. CSS Box Model
Content: Main matter
Padding: Content aur border ke beech
Border: Box ki line
Margin: Box ke bahar gap
Diagram/Notepad Drawing:
| | Margin |
| | Border |
| | Padding |
| Content |
Sunny: div pe live margin, padding, border effect dikhaye browser pe
6. Responsive Design (Mobile Friendly)
Website har device pe acchi dikhe, isliye media queries lagti hain
@media (max-width: 600px) { body { background: yellow; } }
Real-life: Book har language/size me print ho sakti hai, screen ke mutabiq content adjust ho
jaye.
Sunny: Browser chota-bada karke color/layout change ka demo
7. JavaScript: Browser ko Zinda Bananeke Liye
Theory
JavaScript: Programming language jo HTML ke andar ya .js file me likhte hain.
Web page pe pop-up, background colour change, calculator, live validation sab JS se hota
hai.
Syntax: let, const, functions, events (user jis pe click kare, interact ho)
Variable: let name = "Khushboo";
Output: alert(), console.log(), document.write()
Real-Life Example
Calculator app, railway ticket booking site (seat status, fare calculation)
Light/Dark mode toggle, live search
Sunny: JS console aur page me alert, console log, document.write ka live sample
8. JavaScript Functions, Logics, Loops
Function: Repeat action
If/Else: Conditional logic
Loop: Repeat multiple times (for, while)
Example:
function greet(name) {
alert("Hello, " + name);
}
for(let i = 1; i <= 5; i++) {
document.write(i + "<br>");
}
Sunny: Button click par prompt ya repeat print karne ka demo
9. DOM Manipulation – Dynamic Web
DOM = Document Object Model: Web page ke elements ka tree structure
JS se kisi bhi HTML element ko dynamic change karna (colour, text, display)
Example: Like button dabane par “Like” ka color/word change ho jana
Code:
document.getElementById("msg").innerHTML = "Hello JS!";
document.getElementById("msg").style.color = "red";
Sunny: Button dabao, text/colour change ya hide/show ka browser demo
10. HTML Tags Deep Dive
Heading Tags (h1-h6): SEO & structure
Paragraph, Image, Anchor: Info, pics, navigation
List, Table: Data org.
Semantic tags: <header>, <footer>, <nav>, <main>, <section>, <article>
Real-life analogy:
News site – headers, nav (menu), article section, footer (contact info, links).
11. Best Practices: Accessibility & SEO
Alt text images me (visually impaired ke liye)
Labels & roles forms pe (screen reader ke liye)
Heading order correct rakho (h1>h2>h3)
Meta Descriptions, keywords for SEO
12. Mini Project Plan + Practice
Project: Simple Portfolio Website
HTML: Photo, basic info, table me projects, contact form
CSS: Colourful blocks, border, padding, hover effects
JS: Button pe alert, form validation, dynamic text change
Sunny: Structure, styling, and interactivity step by step demo kare
Class Practice/Revision
Apna HTML-CSS-JS resume banao
Navbar table/ul se banao, colour lagao, JS se show/hide karo
Button bana kar theme switcher (light/dark) JS se apply karo
13. Next Class – Whats Coming
You: Next session me:
HTML tables, forms ki validation (required, email type, JS validation)
CSS layout (Flexbox, Grid for responsive design)
JS: Events, Arrays, Objects, Basic Animation, Data fetch
Homework:
Apna basics page complete karo (Resume, skills, etc.)
Ek button/JS demo dekho, khud try karo, output Sunny ko bhejo
Notepad me tags, selectors, aur events ki list likho with mini example
14. Q&A and Interactive Doubt Block
Kaha pe dikkat aa rahi hai?
Kaunsa tag/selector ya logic samajh nahi aaya?
Notebook me sabka summary likho, doubt likh lo, next session me poochho.
Sunny: Live code changes & browser outputs show for doubts
Script Closing
You: Yeh tha tumhara HTML+CSS+JavaScript ka solid foundation session.
Har lecture ke baad notebook me summary zarur likhna, daily ek code khud likh kar dekhna, aur
Sunny se apna output match karna. React, Bootstrap, aur frameworks ki duniya me jump lagane
se pehle yahi base tumhe pro developer banaega!
End of Long Script (10–12 pages classroom coverage with theory+practice mix)
⁂
1. Ab-aage-hum-HTML-CSS-or-javascript-sikhenge-write-1.pdf
