HTML

Beginner

The skeleton of every website. Learn to structure content with the language every front-end developer starts with.

0 / 31 lessons

Lessons

31

Complete to finish this stage

Est. time

14.7h

At a comfortable pace

Difficulty

Beginner

For complete beginners

Why HTML Matters

HTML — HyperText Markup Language — is the foundation of the entire web. Every website, app, and document you have ever seen in a browser is built on HTML.

12-Level Learning Path

Level 1 — HTML Fundamentals: Introduction, Document Structure & Boilerplate, Block vs Inline Elements
Level 2 — Text & Content: Headings (h1-h6), Paragraphs, Text Formatting, Lists, Quotes & Code
Level 3 — Links & Navigation: Anchor Links, Absolute & Relative URLs, Navigation, Security
Level 4 — Images & Media: Images, Responsive Formats, Figures, Video & Audio, iframes
Level 5 — Tables: Semantic Tables, Cell Spanning, Accessible Headers
Level 6 — Forms & User Input: Form Structure, GET vs POST, HTML5 Inputs, Controls, Validation
Level 7 — Semantic HTML: Semantic Meaning, Landmark Layouts, Generic Containers
Level 8 — Accessibility: WCAG Principles, Accessible Forms & Media, ARIA
Level 9 — SEO: Search Crawlers, Metadata, Open Graph, Structured Data
Level 10 — Best Practices: Formatting, W3C Validation, Progressive Enhancement, Performance
Level 11 — Advanced HTML: Templates, Web Components & Shadow DOM, Browser APIs
Level 12 — Real Projects: CSS Integration, JavaScript Script Loading, DevTools Mastery

Stage progress0%

HTML lessons

31 lessons · follow them in order for best results.

HTML Fundamentals & Document ArchitectureMaster core HTML fundamentals: Document Structure, DOCTYPE declaration, elements, opening and closing tags, global attributes, nesting rules, comments, and block vs inline formatting context.Beginner 30 min Level 1 — Beginner Text Formatting, Headings & Typography ElementsMaster HTML text formatting: Heading hierarchy (h1-h6), paragraphs, line breaks, semantic emphasis (strong, em), citations, blockquotes, code blocks, and typographic modifiers.Beginner 25 min Level 1 — Beginner Hyperlinks, Navigation & URL ProtocolsMaster HTML hyperlinks: Anchor element (<a>), href syntax, absolute vs relative URLs, internal jump anchors, target attributes, security with rel="noopener", mailto, tel, and download links.Beginner 25 min Level 1 — Beginner Images, Media Paths & Semantic FiguresMaster HTML images: The img element, alt text accessibility decision trees, intrinsic aspect ratios (width & height), image paths, responsive basics, and semantic figure & figcaption.Beginner 25 min Level 1 — Beginner Lists, Hierarchy & Description Data StructuresMaster HTML lists: Unordered lists (<ul>), ordered lists (<ol>), list items (<li>), description lists (<dl>, <dt>, <dd>), nested multi-level lists, and navigation menus.Beginner 25 min Level 1 — Beginner Tables, Tabular Data & Grid AlignmentMaster HTML data tables: Table structure (<table>, <tr>, <th>, <td>), semantic segmentation (<thead>, <tbody>, <tfoot>), column spanning (colspan, rowspan), captions, and accessible headers.Beginner 25 min Level 1 — Beginner Forms, Controls & User Input FundamentalsMaster HTML forms: The form element, input types (text, password, email, number, date, checkbox, radio), accessible labels, textarea, select, option, fieldset, legend, and validation attributes.Beginner 30 min Level 1 — Beginner Semantic HTML5 & Structural LandmarksMaster Semantic HTML5 elements: header, nav, main, section, article, aside, footer, time, address, figure, and the elimination of generic div-soup architectures.Beginner 25 min Level 1 — Beginner Document Metadata, Head Elements & Basic SEOMaster HTML document metadata: The head element, title tags, character encoding (UTF-8), responsive viewport directives, meta descriptions, favicons, and language attributes.Beginner 25 min Level 1 — Beginner Beginner Projects: Building Real Semantic Web PagesApply beginner HTML skills to real-world projects: Authoring complete semantic markup for a Developer Portfolio, Restaurant Menu, Blog Article, and User Registration portal.Beginner 35 min Level 1 — Beginner Advanced HTML5 Forms, Constraint Validation & FormDataMaster advanced HTML5 forms: Specialized input types (url, tel, range, color, file, hidden), autocomplete tokens, pattern regex validation, native Constraint Validation API, and FormData processing.Intermediate 30 min Level 2 — Intermediate Advanced Semantic HTML & Interactive ElementsMaster advanced semantic HTML: The native dialog element, accessible accordions with details and summary, progress vs meter gauges, output calculations, abbr, and cite.Intermediate 25 min Level 2 — Intermediate Web Accessibility (a11y), WCAG & ARIA FundamentalsMaster web accessibility (a11y) in HTML: WCAG principles, keyboard focus navigation (tabindex), skip links, screen reader announcements, and foundational ARIA roles, labels, and live regions.Intermediate 30 min Level 2 — Intermediate Responsive Images, Media & Art DirectionMaster responsive HTML media: The picture element, resolution switching with srcset and sizes, art direction crops, responsive video and audio, and WebVTT caption tracks.Intermediate 25 min Level 2 — Intermediate Search Engine Optimization (SEO) & Social Graph MetadataMaster technical on-page SEO in HTML: Canonical URLs, Robots directives, JSON-LD Structured Data, Open Graph social share cards, Twitter Cards, sitemaps, and robots.txt.Intermediate 25 min Level 2 — Intermediate HTML Performance, Resource Hints & Script LoadingMaster HTML loading performance: Script execution models (async, defer, type=module), resource hints (preload, prefetch, preconnect), native lazy loading, and fetchpriority optimization.Intermediate 25 min Level 2 — Intermediate HTML5 Browser APIs & Client StorageMaster HTML5 browser platform APIs: DOM manipulation, Web Storage (localStorage, sessionStorage), Cookies, IndexedDB, History API, Clipboard API, Geolocation, and Worker threads.Intermediate 30 min Level 2 — Intermediate HTML, CSS & JavaScript Integration PatternsMaster HTML integration with CSS and JavaScript: DOM querying, event delegation, custom data-* attributes (dataset), Progressive Enhancement philosophy, and Graceful Degradation.Intermediate 25 min Level 2 — Intermediate Intermediate Projects: Advanced Accessible SystemsBuild intermediate-level production web applications: Accessible Analytics Dashboard, E-Commerce Product Page with Art Direction, and a Multi-Step Wizard Registration Portal.Intermediate 35 min Level 2 — Intermediate Browser Rendering Mechanics & DOM ConstructionMaster the low-level browser rendering pipeline: HTML tokenization, DOM tree assembly, CSSOM construction, Render Tree calculation, Layout (Reflow), Paint, and GPU Compositing.Advanced 30 min Level 3 — Advanced Advanced Performance, Core Web Vitals & DOM OptimizationMaster enterprise web performance: Optimizing Core Web Vitals (LCP, INP, CLS), critical CSS inlining, font loading strategies, DOM size pruning, and automated Lighthouse performance budgets.Advanced 30 min Level 3 — Advanced Accessibility Engineering, WCAG 2.2 & ARIA PatternsMaster enterprise accessibility engineering: WCAG 2.2 compliance, Accessible Name and Description Computation, ARIA Authoring Practices Guide (APG), focus trapping algorithms, and automated Axe testing.Advanced 30 min Level 3 — Advanced Advanced Form Architecture & Accessible Error RecoveryMaster enterprise form architecture: Multi-step checkout flows, custom constraint validation, accessible error summary banners (role=alert), state persistence, and drag-and-drop file uploads.Advanced 30 min Level 3 — Advanced HTML Security, CSP, Trusted Types & Iframe SandboxingMaster enterprise HTML security: Cross-Site Scripting (XSS) defense, Content Security Policy (CSP Level 3), Trusted Types, Clickjacking frame protection, Subresource Integrity (SRI), and Iframe sandboxing.Advanced 30 min Level 3 — Advanced Advanced HTML Media, MSE Streaming & WebVTTMaster enterprise media delivery in HTML: Media Source Extensions (MSE), HLS/DASH streaming, Encrypted Media Extensions (EME), WebVTT subtitle cue styling, and Picture-in-Picture.Advanced 30 min Level 3 — Advanced Web Components, Shadow DOM & Custom ElementsMaster native Web Components: Custom Elements API, encapsulated Shadow DOM, HTML <template> and <slot> projections, component lifecycle callbacks, and Constructable Stylesheets.Advanced 30 min Level 3 — Advanced Advanced Browser Platform APIs & Offline PWAsMaster enterprise browser platform APIs: Service Workers (Cache API), Offline Progressive Web Apps (PWAs), IndexedDB, Broadcast Channel, WebSockets, Web Crypto, and File System Access.Advanced 30 min Level 3 — Advanced SEO Engineering, Schema.org & Internationalization (hreflang)Master enterprise SEO engineering in HTML: Schema.org Graph schemas (BreadcrumbList, FAQPage, Product), multi-region internationalization with hreflang, JavaScript SEO rendering, and pagination strategies.Advanced 30 min Level 3 — Advanced Enterprise HTML Architecture, Design Systems & Micro-FrontendsMaster enterprise-scale HTML architecture: Standardized design system markup contracts, Micro-Frontend HTML composition, SSR hydration boundaries, and progressive enhancement standards.Advanced 30 min Level 3 — Advanced HTML Validation, Tooling & Automated CI TestingMaster enterprise HTML validation & testing tooling: W3C Nu HTML Checker, Axe accessibility automation, Lighthouse CI performance assertions, and cross-browser testing with Playwright.Advanced 25 min Level 3 — Advanced Advanced Projects: Enterprise Systems & PWA ArchitectureBuild enterprise-grade HTML systems: Accessible Design System Web Components, Offline-First Progressive Web App (PWA), and High-Performance SSR News Platform.Advanced 35 min Level 3 — Advanced