HTML Masterclass: Zero से Hero तक

Free HTML course by Daily Spark: 38 lessons in 10 modules. Please enable JavaScript to use the lessons, live code editor, quizzes and final exam.

Course syllabus (पाठ्यक्रम)

1. बेसिक परिचय (Basics)

1. HTML क्या है और क्या नहीं: Programming language और markup language का असली फ़र्क समझो
2. Tag, Element और Attribute में फ़र्क: Tag, Element और Attribute की detail anatomy
3. HTML5 Boilerplate Code (एक-एक line की explanation): DOCTYPE, html, head, meta, viewport, body का हर word समझो

2. Headings और Text

4. H1 से H6 तक सभी 6 Headings: <h1> से <h6> तक: हर heading का सही मतलब और level
5. Paragraphs, Line Breaks और Dividers (<p>, <br>, <hr>): Text के बीच spacing, नई line और dividing line
6. Preformatted Text (<pre> Tag): Spaces, tabs और Enter सुरक्षित रखना: जो लिखो वही दिखे
7. <b> vs <strong> और <i> vs <em>: सिर्फ़ visual styling और semantic importance का फ़र्क
8. Text Marking और Editing (<mark>, <del>, <ins>, <small>): Highlight करना, पुराना price काटना, नया price जोड़ना और छोटा text
9. Maths और Science Formulas (<sub> और <sup>): H2O, CO2 और (A+B)2 जैसे chemical और math formulas लिखना
10. Quotations और Abbreviations (<blockquote>, <q>, <abbr>, <bdo>): Quotes, abbreviations और उल्टी direction में text लिखना
11. HTML Colors (Names, HEX, RGB, RGBA, HSL): Website को रंगीन बनाने के तरीके

3. Lists

12. Unordered List (<ul> और <li>): Bullets वाली lists और bullets के types (disc, circle, square, none)
13. Ordered List (<ol> और <li>): Numbered lists: type (1, a, A, i, I), start और reversed attributes
14. Description List (<dl>, <dt>, <dd>): Dictionary, glossary और FAQ के लिए lists
15. Nested Lists (List के अंदर List): Multi-level menus, sub-categories और syllabus बनाना

4. Links और Images

16. Hyperlinks और File Paths: href, target, mailto, tel and Relative vs Absolute Paths
17. Images और Captions (<img>, <figure>, <figcaption>): <img>, alt, loading='lazy', <figure>, <figcaption>

5. Tables

18. Table का Basic Structure (<table>, <tr>, <th>, <td>, <caption>): Rows, Columns और header cells की basic anatomy
19. Table Cells को जोड़ना (Colspan और Rowspan): Columns और Rows को जोड़ने का पूरा logic
20. Table के 3 हिस्से (<thead>, <tbody>, <tfoot>): Table का head, body और foot: लंबी tables का professional standard

6. Layout और Semantics

21. Block vs Inline Deep Dive: Screen पर elements का स्वभाव: पूरी line लेना या साथ-साथ बैठना
22. <div> vs <span> (Generic Containers): CSS styling और layout के लिए सबसे ज़्यादा इस्तेमाल होने वाले 2 boxes
23. class vs id: CSS और JavaScript के लिए elements की पहचान तय करना
24. पूरा Semantic HTML (Semantic Elements): <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <details>

7. Forms और Inputs

25. HTML Forms: Methods, Enctype और काम करने का तरीका: <form>, action, GET vs POST, enctype='multipart/form-data'
26. Text, Password, Email और Number Inputs: type='text', 'password', 'email', 'number', 'tel', 'url'
27. Radio Buttons vs Checkboxes: सिर्फ़ एक option चुनना vs कई options चुनना (name attribute का राज़)
28. Dropdowns और लंबे Messages (<select>, <textarea>, <datalist>): States की dropdown list, लंबा feedback box और auto-search suggestions
29. Modern HTML5 Inputs (date, time, color, range, file): Calendar picker, colour picker, slider bar और file uploader
30. Input Validation Attributes (required, readonly, disabled, pattern): required, placeholder, readonly, disabled, min, max, pattern

8. Multimedia और Graphics

31. Audio, Video और iframes (<video>, <audio>, <iframe>): Website पर गाने, movies और YouTube videos embed करना
32. Canvas vs SVG (<canvas> vs <svg>): Vector graphics (SVG) और pixel drawing board (Canvas) में फ़र्क

9. Modern Web APIs

33. Web Storage API (LocalStorage vs SessionStorage): Browser में data हमेशा के लिए रखना
34. Geolocation API (GPS Location): Finding the Latitude and Longitude with the user's permission

10. Accessibility और Tools

35. Web Accessibility (a11y Standards): Disabled लोगों और screen readers के लिए accessible websites
36. HTML Entities और Symbols: Special symbols: copyright ©, rupee ₹ और safe brackets
37. HTTP Methods और Status Codes: GET, POST, PUT, DELETE, 200, 301, 403, 404, 500 का मतलब
38. Top 3 Interview Questions और Study Plan: Job interviews में पूछे जाने वाले top सवाल और उनके सटीक जवाब

••••••

$ learn --course "Daily Spark: HTML Masterclass"

HTML Masterclass: Zero से Hero तक

✦ ✦ ✦

Progress: 0%

</>

Part 1: Fundamentals • Beginner Level (0 Level)

Loading...

Please wait...

🏡

असल ज़िंदगी की Analogy ज़ीरो से समझो

गहराई से Technical Concept

✨ Students के लिए Golden Rules

⚠️ आम Traps और Mistakes

live-playground.html

HTML Code (यहाँ code बदलकर experiment करो): Editable Sandbox

असली Browser Result (Live Output): Real Browser View

खुद को परखो (Quick Check Quiz)

Loading question...

✓ Completed successfully!

HTML Masterclass: Zero से Hero तक

Loading...

असल ज़िंदगी की Analogy ज़ीरो से समझो

गहराई से Technical Concept

Anatomy of a Tag:

खुद को परखो (Quick Check Quiz)

Final Exam

🎁 Welcome to Daily Spark

Hello, !

Claim Your Gift

Your Gift Claim is Recorded