HTML Masterclass: From Zero to 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. Basic Introduction (Basics)

1. What HTML is and what it is not: Understand the real difference between a programming language and a markup language
2. Difference between Tag, Element and Attribute: The detailed anatomy of Tag vs Element vs Attribute
3. HTML5 Boilerplate Code (Line-by-Line Explanation): Understand every single word of DOCTYPE, html, head, meta, viewport, body

2. Headings and Text

4. All 6 Headings from H1 to H6 (Headings H1-H6): <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - the exact meaning and level of each
5. Paragraphs, Line Breaks and Dividers (<p>, <br>, <hr>): Spacing between text, starting a new line and drawing a dividing line
6. Preformatted Text (<pre> Tag): Preserving spaces, tabs and Enter: what you write is what you see
7. <b> vs <strong> and <i> vs <em>: The difference between purely visual styling and semantic importance
8. Text Marking and Editing (<mark>, <del>, <ins>, <small>): Highlighting, striking out old prices, adding new prices and small text
9. Maths and Science Formulas (<sub> and <sup>): Writing chemical and mathematical equations like H2O, CO2 and (A+B)2
10. Quotations and Abbreviations (<blockquote>, <q>, <abbr>, <bdo>): Writing quotes, abbreviations and writing text in the reverse direction
11. HTML Colors (Colors: Names, HEX, RGB, RGBA, HSL): 4 ways to decorate a website with vibrant and attractive colours

3. Lists

12. Unordered List (Unordered List - <ul> and <li>): Lists with bullet points and the types of bullets (disc, circle, square, none)
13. Ordered List (Ordered List - <ol> and <li>): Numbered lists: the type (1, a, A, i, I), start and reversed attributes
14. Description List (Description List - <dl>, <dt>, <dd>): Lists for dictionaries, glossaries and Frequently Asked Questions (FAQ)
15. Nested Lists (Nested Lists - a list inside a list): Building multi-level menus, sub-categories and syllabi

4. Links and Images

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

5. Tables

18. Basic Structure of a Table (<table>, <tr>, <th>, <td>, <caption>): The basic anatomy of Rows, Columns and header cells
19. Table Cell Merging (Colspan and Rowspan): The complete logic of joining Columns and Rows together
20. The 3 Parts of a Table (<thead>, <tbody>, <tfoot>): The head, body and foot of a table - the professional standard for long tables

6. Layout and Semantics

21. Block vs Inline (Block vs Inline Deep Dive): The nature of elements on screen: taking up the whole line or sitting side by side
22. <div> vs <span> (Generic Containers): The 2 most widely used boxes for CSS styling and layout
23. class vs id: Defining the identity of elements for CSS and JavaScript
24. Semantic HTML in Full (Semantic Elements): <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>, <details>

7. Forms & Inputs

25. HTML Forms: Methods, Enctype and How They Work: <form>, action, GET vs POST, enctype='multipart/form-data'
26. Text, Password, Email and Number Inputs: type='text', 'password', 'email', 'number', 'tel', 'url'
27. Radio Buttons vs Checkboxes (Radio vs Checkbox): Choosing only one option vs choosing many options (the secret of the name attribute)
28. Dropdowns and Long Messages (<select>, <textarea>, <datalist>): A dropdown list of states, a long feedback box and auto-search suggestions
29. Modern HTML5 Inputs (date, time, color, range, file): Calendar picker, colour picker, slider bar and file uploader
30. Input Validation Attributes (required, readonly, disabled): required, placeholder, readonly, disabled, min, max, pattern

8. Multimedia and Graphics

31. Audio, Video and iframes (<video>, <audio>, <iframe>): Embedding songs, movies and YouTube videos on a website
32. Canvas vs SVG (<canvas> vs <svg>): The difference between vector graphics (SVG) and a pixel drawing board (Canvas)

9. Modern Web APIs

33. Web Storage API (LocalStorage vs SessionStorage): Keeping data in the browser permanently
34. Geolocation API (Geolocation API - GPS Location): Finding the Latitude and Longitude with the user's permission

10. Accessibility and Tools

35. Web Accessibility (Accessibility / a11y Standards): Websites accessible to people with disabilities and to screen readers
36. HTML Entities and Symbols (Entities, Symbols & Emojis): Special symbols: copyright ©, rupee ₹ and safe brackets
37. HTTP Methods and Status Codes (HTTP Methods & Codes): The meaning of GET, POST, PUT, DELETE, 200, 301, 403, 404, 500
38. Top 3 Interview Questions and Study Plan (Interview Q&A): The top questions asked in job interviews and their precise answers

••••••

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

HTML Masterclass: From Zero to Hero

✦ ✦ ✦

Progress: 0%

</>

Part 1: Fundamentals • Beginner Level (0 Level)

Loading...

Please wait...

🏡

Real-Life Analogy Understand from 0

In-Depth Technical Concept

✨ Golden Rules for Students

⚠️ Common Traps & Mistakes

live-playground.html

HTML Code (edit the code here and experiment): Editable Sandbox

Actual Browser Result (Live Output): Real Browser View

Test Yourself (Quick Check Quiz)

Loading question...

✓ Completed successfully!

HTML Masterclass: From Zero to Hero

Loading...

Real-Life Analogy Understand from 0

In-Depth Technical Concept

Anatomy of a Tag:

Test Yourself (Quick Check Quiz)

Final Exam

🎁 Welcome to Daily Spark

Hello, !

Claim Your Gift

Your Gift Claim is Recorded