📘 Curriculum — Lessons (HTML only)

⬅ Back to Home
Lesson 1: What is HTML? (Concept & role) Lesson 2: HTML vs CSS vs JavaScript Lesson 3: Browsers and how they read HTML Lesson 4: Installing a code editor (VS Code) Lesson 5: Writing your first index.html Lesson 6: The <!DOCTYPE html> declaration Lesson 7: The <html> root element Lesson 8: The <head> section basics Lesson 9: The <body> section basics Lesson 10: The <title> element Lesson 11: Your first heading (<h1>) Lesson 12: Paragraphs (<p>) Lesson 13: Multiple headings (<h2>–<h6>) Lesson 14: Line breaks (<br>) Lesson 15: Horizontal rules (<hr>) Lesson 16: HTML comments (<!-- -->) Lesson 17: Bold text (<b>) Lesson 18: Italics (<i>) Lesson 19: Emphasis (<em>) Lesson 20: Strong importance (<strong>) Lesson 21: Underlined text (<u>) Lesson 22: Highlighting text (<mark>) Lesson 23: Subscript (<sub>) Lesson 24: Superscript (<sup>) Lesson 25: Small text (<small>) Lesson 26: Combining formatting tags Lesson 27: Inline vs block elements Lesson 28: White space & HTML collapsing rules Lesson 29: Semantic vs non-semantic tags Lesson 30: Intro project — Build a simple article page Lesson 31: Nesting elements Lesson 32: Proper indentation & clean code Lesson 33: Common beginner mistakes Lesson 34: Using validator (W3C) Lesson 35: HTML entities (&lt;, &amp;, etc.) Lesson 36: Unicode characters Lesson 37: Special symbols Lesson 38: Emoji in HTML Lesson 39: Document language attribute (lang) Lesson 40: Accessibility importance from day 1 Lesson 41: Basic page structure recap Lesson 42: Hands-on quiz — identify broken HTML Lesson 43: Debugging in browser dev tools Lesson 44: Live Server setup (instant refresh) Lesson 45: Saving and opening HTML files Lesson 46: Hello World mini-project Lesson 47: Creating your own cheat sheet Lesson 48: First review — Build a personal bio page Lesson 49: Practice challenge — 5 short exercises Lesson 50: Milestone project — My First Homepage Lesson 51: Hyperlinks (<a>) Lesson 52: The href attribute Lesson 53: Linking to external sites Lesson 54: Linking to internal pages Lesson 55: Anchor links (#id) Lesson 56: Target attribute (_blank, _self) Lesson 57: Titles on links Lesson 58: Relative vs absolute URLs Lesson 59: Navigation menus with <a> Lesson 60: Images (<img>) Lesson 61: The src attribute Lesson 62: The alt attribute Lesson 63: Image width & height Lesson 64: Responsive images basics Lesson 65: Linking an image Lesson 66: Image as a button Lesson 67: Adding captions Lesson 68: Audio element basics Lesson 69: Supported formats (mp3, wav, ogg) Lesson 70: Adding controls Lesson 71: Autoplay vs loop Lesson 72: Muted audio Lesson 73: Video element basics Lesson 74: Video formats Lesson 75: Adding poster images Lesson 76: Captions for video Lesson 77: YouTube embedding Lesson 78: Iframes overview Lesson 79: Iframe attributes Lesson 80: Embedding Google Maps Lesson 81: Embedding external widgets Lesson 82: Security with iframes Lesson 83: <object> vs <embed> Lesson 84: Using <source> for multiple formats Lesson 85: Accessibility in media Lesson 86: Lazy loading images Lesson 87: Optimization tips Lesson 88: CDN images Lesson 89: Stock vs self-hosted media Lesson 90: Mini-project — image gallery Lesson 91: Mini-project — audio player page Lesson 92: Mini-project — video showcase Lesson 93: Mini-project — embed a Google Map Lesson 94: Quiz — media elements Lesson 95: Project — Media-rich profile page Lesson 96: Debugging broken media Lesson 97: Common file paths Lesson 98: Organizing media folders Lesson 99: Relative vs absolute file linking Lesson 100: Milestone project — Multimedia Portfolio Lesson 101: Ordered lists (<ol>) Lesson 102: Unordered lists (<ul>) Lesson 103: List items (<li>) Lesson 104: Nested lists Lesson 105: Custom list markers Lesson 106: Definition list (<dl>) Lesson 107: <dt> (term) Lesson 108: <dd> (definition) Lesson 109: When to use definition lists Lesson 110: Building a navigation list Lesson 111: Breadcrumbs with lists Lesson 112: Sidebars with lists Lesson 113: Nested menus Lesson 114: Horizontal menus Lesson 115: Dropdown menus (HTML only) Lesson 116: Checklists Lesson 117: Accessible lists Lesson 118: Styling hooks with lists Lesson 119: Avoiding list misuse Lesson 120: Mini-project — To-Do list Lesson 121: Mini-project — Recipe ingredients Lesson 122: Mini-project — Navigation menu Lesson 123: Mini-project — Nested navigation Lesson 124: Quiz — lists Lesson 125: Challenge — Build site navigation Lesson 126: Review exercise Lesson 127: Project — Blog structure with lists Lesson 128: Debugging list nesting Lesson 129: Multi-level menu recap Lesson 130: Milestone project — Site Navigation System Lesson 131: Case study — real site menus Lesson 132: Practice formatting lists Lesson 133: Checklist project Lesson 134: Resume skill list Lesson 135: Ordered steps guide Lesson 136: Product feature list Lesson 137: Milestone project — Product Landing List Lesson 138: Lists + media combined Lesson 139: Lists inside tables Lesson 140: Review & reflection Lesson 141: <table> basics Lesson 142: Table rows (<tr>) Lesson 143: Table data (<td>) Lesson 144: Table headers (<th>) Lesson 145: Adding captions Lesson 146: Borders Lesson 147: Cell padding & spacing Lesson 148: Rowspan Lesson 149: Colspan Lesson 150: Table headers (<thead>) Lesson 151: Table body (<tbody>) Lesson 152: Table footer (<tfoot>) Lesson 153: Scope attributes Lesson 154: Accessible tables Lesson 155: Simple data table Lesson 156: Advanced data table Lesson 157: Tables for layout (history) Lesson 158: Why not to use tables for layout Lesson 159: Responsive tables Lesson 160: Scrollable tables Lesson 161: Sorting tables (HTML only) Lesson 162: Mini-project — Pricing table Lesson 163: Mini-project — Schedule table Lesson 164: Mini-project — Student gradebook Lesson 165: Mini-project — Leaderboard Lesson 166: Project — Sports statistics Lesson 167: Quiz — table structure Lesson 168: Debugging table issues Lesson 169: Semantic vs non-semantic tables Lesson 170: Milestone project — Company Dashboard Table Lesson 171: Complex nesting Lesson 172: Adding forms into tables Lesson 173: Merging data Lesson 174: Real-world examples Lesson 175: Accessibility checks Lesson 176: Organizing with IDs Lesson 177: Table & CSS recap Lesson 178: Validation & common mistakes Lesson 179: Table best practices Lesson 180: Final recap project Lesson 181: Introduction to forms (<form>) Lesson 182: The action attribute Lesson 183: The method attribute (GET vs POST) Lesson 184: Text input (<input type="text">) Lesson 185: Password input Lesson 186: Email input Lesson 187: Number input Lesson 188: Range slider Lesson 189: Date & time inputs Lesson 190: Color picker Lesson 191: File upload Lesson 192: Checkbox basics Lesson 193: Radio button basics Lesson 194: Grouping radio buttons Lesson 195: Dropdowns (<select>) Lesson 196: Grouped options (<optgroup>) Lesson 197: Multi-select dropdown Lesson 198: <textarea> element Lesson 199: Placeholder text Lesson 200: Labels (<label for>) Lesson 201: Fieldset & legend Lesson 202: Disabled inputs Lesson 203: Read-only inputs Lesson 204: Default values Lesson 205: Required fields Lesson 206: Pattern attribute (regex validation) Lesson 207: Min & max attributes Lesson 208: Step attribute Lesson 209: Autocomplete attribute Lesson 210: Autofocus attribute Lesson 211: Hidden inputs Lesson 212: Submit button Lesson 213: Reset button Lesson 214: Button element vs input button Lesson 215: Custom button text Lesson 216: Image as a submit button Lesson 217: Actionless forms Lesson 218: GET request demo Lesson 219: POST request demo Lesson 220: Form accessibility basics Lesson 221: Grouping inputs with <fieldset> Lesson 222: HTML5 validation (built-in) Lesson 223: Custom validation attributes Lesson 224: Novalidate attribute Lesson 225: Input modes (mobile optimization) Lesson 226: <datalist> element Lesson 227: Search input Lesson 228: URL input Lesson 229: Telephone input Lesson 230: Multiple file uploads Lesson 231: Multiple email entries Lesson 232: Progress element Lesson 233: Meter element Lesson 234: Range vs slider difference Lesson 235: Grouping with divs Lesson 236: Form semantics for screen readers Lesson 237: ARIA roles in forms Lesson 238: Mini-project — Contact form Lesson 239: Mini-project — Login form Lesson 240: Mini-project — Signup form Lesson 241: Mini-project — Feedback form Lesson 242: Mini-project — Survey form Lesson 243: Mini-project — Order form Lesson 244: Mini-project — File upload form Lesson 245: Project — Newsletter signup Lesson 246: Project — Multi-step form Lesson 247: Debugging forms Lesson 248: Common mistakes (missing labels) Lesson 249: Required vs optional fields Lesson 250: Milestone project — Full Registration Form Lesson 251: Introduction to semantic HTML Lesson 252: Why semantics matter Lesson 253: <header> element Lesson 254: <footer> element Lesson 255: <main> element Lesson 256: <section> element Lesson 257: <article> element Lesson 258: <aside> element Lesson 259: <nav> element Lesson 260: <figure> element Lesson 261: <figcaption> element Lesson 262: <time> element Lesson 263: <address> element Lesson 264: <mark> revisited Lesson 265: <abbr> element Lesson 266: <cite> element Lesson 267: <q> (inline quotation) Lesson 268: <blockquote> element Lesson 269: <code> inline code Lesson 270: <pre> preformatted text Lesson 271: <kbd> keyboard input Lesson 272: <samp> sample output Lesson 273: <var> variable element Lesson 274: <dfn> definition element Lesson 275: <bdo> element Lesson 276: <ruby> annotations Lesson 277: <rt> ruby text Lesson 278: <rp> ruby parentheses Lesson 279: Landmarks for screen readers Lesson 280: Combining semantics + ARIA Lesson 281: Mini-project — Blog layout Lesson 282: Mini-project — Article with author info Lesson 283: Mini-project — Navigation bar Lesson 284: Project — Semantic resume Lesson 285: Accessibility testing with semantic HTML Lesson 286: Case study — semantic vs div soup Lesson 287: SEO improvements with semantics Lesson 288: Best practices for modern sites Lesson 289: Debugging semantic structure Lesson 290: Milestone project — Semantic Portfolio Page Lesson 291: Document metadata intro Lesson 292: <title> best practices Lesson 293: <meta charset="UTF-8"> Lesson 294: Viewport meta Lesson 295: Description meta tag Lesson 296: Keywords meta tag Lesson 297: Author meta tag Lesson 298: <link> for CSS Lesson 299: <script> basics Lesson 300: Script loading (defer vs async) Lesson 301: Favicon link (rel="icon") Lesson 302: Apple-touch icons Lesson 303: Theme color meta Lesson 304: Robots meta (index, noindex) Lesson 305: Open Graph tags Lesson 306: Twitter cards meta Lesson 307: Schema.org microdata in meta Lesson 308: Charset options Lesson 309: Language meta Lesson 310: Social preview images Lesson 311: SEO best practices with metadata Lesson 312: Validating metadata with tools Lesson 313: Debugging missing metadata Lesson 314: Project — SEO-ready webpage head Lesson 315: Quiz — metadata tags Lesson 316: Case study — real-world head tag examples Lesson 317: Performance optimizations with preload Lesson 318: <noscript> tag Lesson 319: <base> tag (rare use cases) Lesson 320: Milestone project — Complete HTML head setup Lesson 321: Introduction to SVGs Lesson 322: Inline SVG vs external SVG Lesson 323: Simple shapes in SVG Lesson 324: Text in SVG Lesson 325: Accessible SVGs Lesson 326: Using <use> for icons Lesson 327: Icon systems with SVG Lesson 328: Canvas basics (<canvas>) Lesson 329: Drawing shapes with JS on canvas Lesson 330: Animating canvas Lesson 331: <picture> element for responsive images Lesson 332: srcset attribute Lesson 333: <source> element in picture Lesson 334: Adaptive images with media queries Lesson 335: Art direction with picture Lesson 336: Video <source> multiple formats Lesson 337: Fallback content for media Lesson 338: <embed> element Lesson 339: <object> element Lesson 340: Differences between embed and object Lesson 341: Embedding PDFs Lesson 342: Embedding flash (legacy) Lesson 343: Third-party embeds (social media posts) Lesson 344: Security implications of embeds Lesson 345: Sandboxing iframes Lesson 346: Allowing features in embeds Lesson 347: Mini-project — Responsive image demo Lesson 348: Mini-project — Video player with sources Lesson 349: Mini-project — Embed social media post Lesson 350: Project — Multimedia article page Lesson 351: Debugging media issues Lesson 352: File format compatibility Lesson 353: Optimization for performance Lesson 354: Lazy loading media Lesson 355: Case study — responsive design with picture Lesson 356: Accessibility audit for embeds Lesson 357: Modern media strategies Lesson 358: Best practices recap Lesson 359: Tools for image optimization Lesson 360: Milestone project — Responsive Media Portfolio Lesson 361: Purpose of accessibility & assistive tech Lesson 362: Alt text — when to write it Lesson 363: Decorative images (empty alt) Lesson 364: Complex images with figure + figcaption Lesson 365: Meaningful link text Lesson 366: Keyboard navigation basics Lesson 367: Natural tab order Lesson 368: Tabindex best practices Lesson 369: Focusable skip links Lesson 370: “Skip to content” implementation Lesson 371: Focus states & :focus-visible Lesson 372: Outlines and focus indicators Lesson 373: Landmarks (main, nav, footer) Lesson 374: Roles on non-semantic containers Lesson 375: aria-label vs aria-labelledby Lesson 376: aria-describedby Lesson 377: Marking required fields accessibly Lesson 378: Error message patterns Lesson 379: Validation messaging dos and don’ts Lesson 380: Grouping with fieldset + legend Lesson 381: Proper input labeling Lesson 382: Placeholders vs labels Lesson 383: Autocomplete tokens Lesson 384: Input types that aid accessibility Lesson 385: Accessible tables overview Lesson 386: Scope on th Lesson 387: Headers/id technique Lesson 388: Table captions Lesson 389: Accessible abbreviations Lesson 390: Document language attribute Lesson 391: Inline language changes Lesson 392: Directionality (dir) for RTL Lesson 393: Isolating bidi text (bdi) Lesson 394: Media captions via track Lesson 395: Audio transcripts Lesson 396: Descriptive destinations for links Lesson 397: Avoiding duplicate link text Lesson 398: Accessible icons Lesson 399: Accessible SVGs Lesson 400: Icon fonts pitfalls Lesson 401: Semantics for dialogs (<dialog>) Lesson 402: Preventing keyboard traps Lesson 403: Roving tabindex pattern Lesson 404: Disclosure state with aria-expanded Lesson 405: <details> + <summary> for FAQs Lesson 406: Live regions (aria-live) Lesson 407: Announcing async states Lesson 408: Iframes with title Lesson 409: Avoiding auto-play audio Lesson 410: Managing focus in modals Lesson 411: Accessible breadcrumbs Lesson 412: Accessible pagination Lesson 413: Testing with screen readers Lesson 414: Lighthouse accessibility audits Lesson 415: Mapping WCAG to HTML techniques Lesson 416: Accessibility checklist for reviews Lesson 417: HTML style guide Lesson 418: Boolean attributes Lesson 419: Prefer semantic elements over div soup Lesson 420: Avoid inline event handlers Lesson 421: Defer/async for scripts Lesson 422: Module scripts Lesson 423: Preload critical assets Lesson 424: Preconnect/DNS prefetch Lesson 425: Referrer policy Lesson 426: Subresource Integrity (SRI) Lesson 427: Crossorigin attribute Lesson 428: fetchpriority for images/resources Lesson 429: Native lazy loading Lesson 430: Image decoding options Lesson 431: <base> usage & pitfalls Lesson 432: Anchor IDs vs fragment links Lesson 433: Avoid deprecated tags Lesson 434: Escaping entities properly Lesson 435: Safe external links Lesson 436: Link types (nofollow, ugc, sponsored) Lesson 437: Microdata vs RDFa vs JSON-LD Lesson 438: Breadcrumb structured data Lesson 439: PWA manifest link Lesson 440: <noscript> fallbacks Lesson 441: i18n attributes Lesson 442: contenteditable best practices Lesson 443: HTML drag & drop Lesson 444: Mobile text control attributes Lesson 445: spellcheck attribute Lesson 446: <template> for inert markup Lesson 447: Slots overview Lesson 448: data-* attributes Lesson 449: http-equiv cautions Lesson 450: Avoid duplicate IDs Lesson 451: Logical heading order & outline Lesson 452: Favicon sets & variants Lesson 453: Build-time validation in CI Lesson 454: Versioning generated HTML Lesson 455: Production-ready HTML checklist Lesson 456: Project — Hello World page Lesson 457: Project — Personal bio page Lesson 458: Project — Contact card with microdata Lesson 459: Project — Semantic resume Lesson 460: Project — Two-column article layout Lesson 461: Project — Article with table of contents Lesson 462: Project — FAQ with details/summary Lesson 463: Project — Pricing table page Lesson 464: Project — Product comparison table Lesson 465: Project — Product features list page Lesson 466: Project — Landing page skeleton Lesson 467: Project — Newsletter signup page Lesson 468: Project — Login page Lesson 469: Project — Registration form Lesson 470: Project — Profile settings form Lesson 471: Project — Search results markup Lesson 472: Project — Blog index (articles list) Lesson 473: Project — Blog post template Lesson 474: Project — Comments section markup Lesson 475: Project — Gallery page Lesson 476: Project — Portfolio grid Lesson 477: Project — Lightbox skeleton Lesson 478: Project — Video page with tracks Lesson 479: Project — Podcast episode + transcript Lesson 480: Project — Event page + schedule table Lesson 481: Project — Restaurant menu Lesson 482: Project — Recipe page Lesson 483: Project — Documentation page Lesson 484: Project — API reference structure Lesson 485: Project — E-commerce product page Lesson 486: Project — Cart page Lesson 487: Project — Checkout form Lesson 488: Project — Order confirmation page Lesson 489: Project — Email template Lesson 490: Project — Invoice template Lesson 491: Project — Admin dashboard skeleton Lesson 492: Project — Kanban board markup Lesson 493: Project — Multilingual page Lesson 494: Project — Accessibility statement Lesson 495: Project — 404 Not Found page Lesson 496: Project — 500 Error page Lesson 497: Project — HTML sitemap page Lesson 498: Project — Breadcrumb demo Lesson 499: Project — Pagination demo Lesson 500: Project — Tabs markup (ARIA pattern) Lesson 501: Project — Accordion markup (ARIA/disclosure) Lesson 502: Project — Modal dialog markup Lesson 503: Project — Status/toast live region Lesson 504: Project — Skip link implementation Lesson 505: Project — Navbar with dropdowns Lesson 506: Project — Sidebar navigation tree Lesson 507: Project — Mega menu skeleton Lesson 508: Project — Header with breadcrumbs + search Lesson 509: Project — Footer with site map Lesson 510: Project — Contact page + map iframe Lesson 511: Project — Unsubscribe form Lesson 512: Project — Preferences center Lesson 513: Project — Multi-section survey Lesson 514: Project — Quiz page Lesson 515: Project — Rating widget Lesson 516: Project — Audio playlist page Lesson 517: Project — Video playlist page Lesson 518: Project — Social embeds page Lesson 519: Project — Careers listing page Lesson 520: Project — Job application page Lesson 521: Project — Help center index Lesson 522: Project — Knowledge base article Lesson 523: Project — Changelog/release notes page Lesson 524: Project — Terms of service page Lesson 525: Project — Privacy policy page Lesson 526: Project — Cookie consent markup Lesson 527: Project — RTL section demo Lesson 528: Project — A/B variant landing markup Lesson 529: Project — Case study template Lesson 530: Project — Multi-step breadcrumb form Lesson 531: Project — Newsletter archive index Lesson 532: Project — Press/media kit page Lesson 533: Project — Author profile page Lesson 534: Project — Team directory page Lesson 535: Project — Conference schedule Lesson 536: Project — Complex tables demo Lesson 537: Project — Accessibility statement Lesson 538: Project — Resume builder Lesson 539: Project — Multi-language site Lesson 540: Project — Interactive documentation site Lesson 541: Expert HTML — WHATWG Living Standard Lesson 542: Reading spec & MDN efficiently Lesson 543: <dialog> deep dive Lesson 544: popover attribute Lesson 545: popovertarget / popovertargetaction Lesson 546: inert attribute Lesson 547: hidden vs aria-hidden vs inert Lesson 548: Advanced <details> usage Lesson 549: Native lazy-loading strategies Lesson 550: fetchpriority for images/links Lesson 551: decoding attribute for images Lesson 552: referrerpolicy on media/iframes Lesson 553: crossorigin on media assets Lesson 554: <source type> & codecs hints Lesson 555: type="module" + nomodule Lesson 556: Module preloading Lesson 557: Prefetch & prerender hints Lesson 558: <template> patterns Lesson 559: Shadow DOM semantics & accessibility Lesson 560: Custom elements lifecycle Lesson 561: Slots & accessible names Lesson 562: Form-associated custom elements Lesson 563: form attribute (controls outside form) Lesson 564: Button overrides (formaction, etc.) Lesson 565: File input advanced usage Lesson 566: enterkeyhint usage Lesson 567: Full autocomplete token set Lesson 568: autocapitalize nuances Lesson 569: Advanced i18n attributes Lesson 570: translate attribute Lesson 571: Microdata — itemscope, itemtype, itemprop Lesson 572: RDFa primer Lesson 573: JSON-LD overview Lesson 574: Link types registry deep dive Lesson 575: rel attributes nuances Lesson 576: <base> with SPA/MPA caveats Lesson 577: Accessibility & Shadow DOM Lesson 578: Print-friendly HTML structures Lesson 579: Email HTML constraints Lesson 580: HTML security checklist Lesson 581: Capstone — Multipage personal site Lesson 582: Capstone — Blog (index, posts, archives) Lesson 583: Capstone — Product marketing site Lesson 584: Capstone — Documentation site Lesson 585: Capstone — E-commerce prototype Lesson 586: Capstone — Portfolio site Lesson 587: Capstone — Conference/event site Lesson 588: Capstone — Accessible component library Lesson 589: Capstone — Multilingual + RTL site Lesson 590: Capstone — Media-rich site Lesson 591: Assessment — Accessibility audit Lesson 592: Assessment — SEO & metadata audit Lesson 593: Assessment — Performance pass Lesson 594: Assessment — Validation & semantics pass Lesson 595: Portfolio assembly Lesson 596: Case-study writeups Lesson 597: Rebuild a public site’s HTML Lesson 598: Contribute to MDN Lesson 599: Interview prep Lesson 600: Graduation checklist & next steps