Home › HTML Masterclass

HTML Masterclass: all 38 lessons

Read every lesson as a normal page, or use the interactive course with the live code editor and final exam.

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

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

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

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>

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

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>

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

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)

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

35. Web Accessibility (Accessibility / a11y Standards): Websites accessible to people with disabilities and to screen readers
37. HTTP Methods and Status Codes (HTTP Methods & Codes): The meaning of GET, POST, 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