HTML, CSS & JavaScript course for beginners
HTML, CSS और JavaScript कोर्स (हिंदी + English)
Build web pages from your very first tag. The course starts with what a website is, then covers headings, text styling, lists, images and links, tables, forms and semantic HTML5. After that come CSS colours and cards, the box model and Flexbox, responsive layouts with CSS Grid and media queries, and a first taste of JavaScript with buttons and events. The last chapter combines everything in a responsive portfolio page.
अपने पहले टैग से वेब पेज बनाना सीखो। कोर्स इस बात से शुरू होता है कि वेबसाइट क्या है, फिर headings, text styling, lists, images और links, tables, forms और semantic HTML5 आते हैं। उसके बाद CSS के रंग और cards, box model और Flexbox, CSS Grid और media queries से responsive layout, और buttons व events के साथ JavaScript की शुरुआत। आख़िरी चैप्टर में सब मिलाकर एक responsive portfolio पेज बनता है।
- 13 chapters in four levels: Start, Basic, Intermediate and Pro
- 12 practice problems with automatic checks and hints
- a quiz question in every chapter, plus 9 viva and interview questions
- free, no sign-up; works on a phone or a computer
How the code runs: The examples run in your browser's own HTML engine, so what you see is what a real website would show. Examples आपके ब्राउज़र के असली HTML engine में चलते हैं, इसलिए जो दिखता है वही असली वेबसाइट पर दिखेगा।
Start Here level
- 1.0Start Here: What is a Website? (Your first edit)
A website is an HTML text file that the browser turns into a page.
Basic level
- 1.1The Tiffin Box Rule (Tags & Headings)
HTML builds the structure (skeleton) of every web page.
- 1.2Text Styling & Line Break (<b>, <i>, <u>, <br>, <hr>)
Pressing Enter in the code does not make a new line on the page — use
<br>. - 1.3Lists (Maggi Recipe vs Shopping List)
<ol>= numbered list (order matters);<ul>= bullet list (order does not matter). - 1.4Images & Clickable Links (<img>, <a> & Attributes)
Attributes are extra settings inside the opening tag:
name="value".
Intermediate level
- 1.5Tables (Report Card & Cricket Scorecard)
<table>is the whole table and<tr>is one row. - 1.6Forms (Instagram Login & Admission Form)
<form>groups the boxes that a user fills in. - 1.7Modern Semantic HTML5 (Mini Portfolio Project!)
Semantic tags describe their meaning:
<header>,<nav>,<main>,<footer>. - 1.8Bonus: HTML + CSS Colour & Card Styling (<style>)
CSS styles the page; write its rules inside
<style> ... </style>. - 1.9CSS Box Model & Flexbox (Cards in a Row)
Every element is a box: content → padding → border → margin.
Pro level
- 1.10Responsive Design: CSS Grid + Media Queries (Phone & Laptop)
Responsive = looks good on phones and laptops.
- 1.11JavaScript Basics: Make a Button Do Something (DOM & Events)
JavaScript goes inside
<script>and makes pages interactive. - 1.12Capstone: Complete Responsive Portfolio + Go Live
A real page =
<!DOCTYPE html>+<head>(title, meta) + semantic<body>.
Practice problems
Each problem is linked to a chapter. Read them on the practice page and solve them in the Practice Zone.
- Fix the Cricket Score Page (closing tags)
- Predict: What Will the Page Show?
- Kirana Shop Signboard (h1 + p + list)
- Taj Mahal Photo Card (fill the attributes)
- Report Card Table
- Rail Ticket Booking Form
- School Website Layout (semantic HTML5)
- Fix the Chai Point Card (CSS bugs)
- Product Row with Flexbox (fill the blanks)
- Responsive Course Cards (Grid + Media Query)
- Chai Order Counter (JavaScript click)
- Mini Project: Raju's Chai Stall Website
Viva and interview questions
What is HTML and why is it called a Markup Language?
HTML stands for HyperText Markup Language. It is not a logic programming language; instead, it uses tags (<h1>, <p>, <table>) to mark up and structure elements on a webpage.
HTML क्या है और इसे Markup Language क्यों कहते हैं?
HTML का पूरा नाम HyperText Markup Language है। यह टैग्स (<h1>, <p>, <table>) की मदद से वेबपेज का ढाँचा (Structure) तैयार करती है, इसलिए इसे मार्कअप भाषा कहते हैं।
What is the difference between Container tags and Empty (Self-closing) tags?
Container tags wrap content and need both opening & closing tags (<h1>Title</h1>, <p>Text</p>). Empty tags stand alone without closing tags (<br>, <hr>, <img>, <input>).
Container टैग और Empty (Self-closing) टैग में क्या अंतर है?
Container टैग खुलते भी हैं और / से बंद भी होते हैं (<h1>...</h1>)। Empty टैग अकेले काम करते हैं और बंद नहीं होते — जैसे <br>, <hr>, <img>, <input>।
Why is the alt attribute important inside <img src="..." alt="...">?
1) If slow internet fails to load the image, alt displays helpful backup text. 2) Screen-readers read alt aloud for visually impaired users. 3) Google SEO uses it to understand images.
<img> टैग में alt एट्रिब्यूट लगाना क्यों ज़रूरी होता है?
1) अगर धीमे इंटरनेट के कारण फोटो लोड न हो, तो alt का टेक्स्ट दिखता है। 2) दृष्टिबाधित यूज़र्स के स्क्रीन-रीडर इसे पढ़कर सुनाते हैं। 3) Google सर्च (SEO) को फोटो समझने में मदद मिलती है।
Difference between <ul> and <ol>, and <th> vs <td>?
<ul> makes bullet points while <ol> makes numbered lists (1, 2, 3). In tables, <th> makes bold centered column headers, while <td> holds regular row data.
<ul> व <ol> और <th> व <td> में क्या फ़र्क है?
<ul> बुलेट लिस्ट बनाता है और <ol> नंबर वाली लिस्ट। टेबल में <th> मोटी हेडिंग सेल बनाता है और <td> सामान्य डेटा सेल।
What are Semantic HTML5 tags and why do companies prefer them?
Tags like <header>, <nav>, <main>, and <footer> clearly describe what role each section plays, improving accessibility, code readability, and Google search ranking.
Semantic HTML5 टैग्स क्या हैं और कंपनियाँ इन्हें क्यों पसंद करती हैं?
<header>, <nav>, <main>, <footer> जैसे टैग नाम से ही बता देते हैं कि वेबसाइट के किस हिस्से में क्या है — इससे कोड साफ़ रहता है और Google पर वेबसाइट जल्दी रैंक करती है।
How do HTML and CSS work together?
HTML builds the structural skeleton (headings, forms, buttons), while CSS (<style> or .css file) controls colours, spacing, layouts, animations, and responsive mobile design.
HTML और CSS मिलकर कैसे काम करते हैं?
HTML वेबसाइट का कंकाल (बटन, फ़ॉर्म, टेक्स्ट) बनाता है, जबकि CSS उसे रंग, ग्रेडिएंट, गोल कोने और मोबाइल-फ्रेंडली सुंदर डिज़ाइन देता है।
What is the difference between Flexbox and CSS Grid?
Flexbox arranges items in one direction (a row or a column) — great for menus and rows of cards. CSS Grid arranges items in rows and columns at the same time — great for full page layouts and galleries. Real sites often use both.
Flexbox और CSS Grid में क्या फ़र्क़ है?
Flexbox items को एक दिशा में लगाता है (एक row या एक column) — मेन्यू और कार्ड्स की लाइन के लिए बढ़िया। CSS Grid items को rows और columns में एक साथ लगाता है — पूरे पेज के लेआउट और गैलरी के लिए बढ़िया। असली साइट्स अक्सर दोनों इस्तेमाल करती हैं।
How do you make a website look good on a mobile phone?
Add <meta name="viewport" content="width=device-width, initial-scale=1">, use flexible layouts (flex-wrap, grid with fr) and change the rules for small screens with @media (max-width: 600px) { ... }.
वेबसाइट को मोबाइल फ़ोन पर अच्छा कैसे दिखाते हैं?
<meta name="viewport" content="width=device-width, initial-scale=1"> जोड़ो, लचीले लेआउट (flex-wrap, fr वाली grid) इस्तेमाल करो और @media (max-width: 600px) { ... } से छोटी स्क्रीन के नियम बदलो।
What is the DOM, and how does JavaScript react to a click?
The DOM is the page as a tree of objects. JavaScript finds an element (document.getElementById("btn")), listens for an event (addEventListener("click", ...)) and changes the page (textContent = ...).
DOM क्या है, और JavaScript क्लिक पर कैसे react करती है?
DOM पेज का objects वाला पेड़ है। JavaScript element ढूँढती है (document.getElementById("btn")), घटना सुनती है (addEventListener("click", ...)) और पेज बदलती है (textContent = ...)।
Ready mini projects
- Digital Student ID Card: Ready-made stylish Student ID webpage — customize your name, class & school!
- IPL Points Table & Fan Poll: Combines HTML Tables + Interactive Form in one live sports page!
- Styled Developer Resume Card (HTML+CSS): Uses
<style>CSS gradients + semantic HTML to build a job-ready developer profile!
Open them in the Projects section of the classroom to run and change the code.