HTML Academy logo
HTMLBeginnerWebLevels A1 → C122 languages

HTML Academy

Build strong foundations in web development by learning HTML at HTML Academy. A CoddyKit learning path of 40 short courses and 159 interactive lessons, with a 24/7 AI tutor at your side.

Courses
40
Lessons
159
Interactive steps
2,096
Free to start
Course 1
Curriculum

40 courses in this path

Every course in the HTML Academy path, in learning order. The first one is free.

1

A13 lessonsFree

Learn how browsers parse HTML, what DOCTYPE does, and how the html, head, and body elements organize every web page.

2

A14 lessonsPRO

Master headings, paragraphs, emphasis, inline elements, and whitespace control with HTML text tags.

3

A14 lessonsPRO

Build navigation with anchor elements, absolute and relative URLs, new-tab links, and fragment identifiers.

4

A14 lessonsPRO

Display images responsively with img, srcset, the picture element, and semantic figure captions.

5

A14 lessonsPRO

Create unordered, ordered, and description lists with proper nesting and semantic meaning.

6

A24 lessonsPRO

Build accessible data tables with proper structure, spanning cells, and table sections.

7

A24 lessonsPRO

Understand id, class, style, hidden, tabindex, and custom data-* attributes used across all HTML elements.

8

A24 lessonsPRO

Build accessible web forms with input types, labels, buttons, and the form element's action and method attributes.

9

A24 lessonsPRO

Enhance forms with dropdowns, textareas, checkbox groups, radio buttons, and autocomplete with datalist.

10

A24 lessonsPRO

Use HTML5 validation attributes like required, pattern, min, and max to validate user input before submission.

11

A24 lessonsPRO

Replace generic divs with meaningful HTML5 elements like header, nav, main, footer, article, and section.

12

A24 lessonsPRO

Explore aside, details, summary, progress, and meter to add richer meaning and interactivity to pages.

13

A24 lessonsPRO

Master the head section: title, meta tags, viewport, canonical URLs, robots directives, and favicons.

14

A24 lessonsPRO

Embed audio and video natively with HTML5, provide multiple formats, and add subtitles with track and WebVTT.

15

B14 lessonsPRO

Understand WCAG levels, heading hierarchy, alt text strategy, and keyboard navigation for inclusive web pages.

16

B14 lessonsPRO

Enhance accessibility with ARIA roles, labels, descriptions, and the rule of using native HTML first.

17

B14 lessonsPRO

Store and access custom metadata on HTML elements using data-* attributes, the dataset API, and CSS selectors.

18

B14 lessonsPRO

Use the template element to define inert markup, clone it efficiently, and compare it to innerHTML-based rendering.

19

B14 lessonsPRO

Draw shapes, text, and images on a 2D canvas and animate them with requestAnimationFrame.

20

B14 lessonsPRO

Embed scalable vector graphics inline, use basic shapes, control the viewBox, and animate SVG with CSS.

21

B14 lessonsPRO

Embed external content with iframe, understand sandboxing for security, and use lazy loading for performance.

22

B14 lessonsPRO

Store client-side data with localStorage and sessionStorage, listen for storage events, and follow security guidelines.

23

B14 lessonsPRO

Implement drag-and-drop interactions with the HTML5 Drag and Drop API and the dataTransfer object.

24

B14 lessonsPRO

Optimize pages for search engines and social sharing with OpenGraph, Twitter Cards, JSON-LD, and hreflang.

25

B14 lessonsPRO

Build email-safe HTML using table-based layouts, inline styles, and cross-client image techniques.

26

B24 lessonsPRO

Implement toggle patterns, tab interfaces, live regions, and test with real screen readers.

27

B24 lessonsPRO

Speed up page loads with async and defer scripts, preload hints, lazy-loaded images, and resource hints.

28

B24 lessonsPRO

Define reusable custom HTML elements with the Custom Elements API, lifecycle callbacks, and observed attributes.

29

B24 lessonsPRO

Encapsulate markup and styles inside Shadow DOM, distribute content with slots, and expose styling APIs with part.

30

B24 lessonsPRO

Use ES module scripts, import maps for bare specifiers, dynamic imports, and module federation concepts.

31

B24 lessonsPRO

Build with progressive enhancement: start with solid HTML, layer CSS and JavaScript, and detect features correctly.

32

B24 lessonsPRO

Prepare HTML for global audiences with lang, dir, bdi, bdo, charset, and right-to-left text support.

33

B24 lessonsPRO

Protect pages from XSS, clickjacking, and injection with CSP, sandboxing, SRI, and safe HTML handling practices.

34

B24 lessonsPRO

Leverage FormData, the Constraint Validation API, custom validity messages, and form state management.

35

B24 lessonsPRO

Manage browser history with pushState, popstate events, and the modern Navigation API for SPA routing.

36

B24 lessonsPRO

Use IntersectionObserver to implement lazy loading, infinite scroll, and scroll-linked animation triggers.

37

B24 lessonsPRO

Configure progressive web apps with the web app manifest, service worker registration, and offline fallback pages.

38

B24 lessonsPRO

Validate markup with the W3C Validator, audit HTML with Lighthouse, and test accessibility with pa11y and axe.

39

B24 lessonsPRO

Preview emerging HTML features: Declarative Shadow DOM, the Popover API, selectlist, and command attributes.

40

C14 lessonsPRO

Manage HTML in large projects with component extraction, server-side templating, design systems, and styleguide docs.

CoddyKit PRO

Unlock all 40 courses in this path, and every other path

AI tutor, certification exam and certificate. Works on web, iOS and Android.

See all plans
Yearly$29.90 / yearAbout $2.49 a monthPay onceLifetime$69.99 onceNo renewals. PRO forever.
Course Overview

HTML: The Language Behind Every Web Page

HTML is the structural foundation of the web — every browser tab, form submission, and embedded video starts with markup. This track builds genuine fluency in HTML, from the rules governing a valid document to the browser APIs and component models used in modern production sites. The goal is not just writing tags but understanding why each element exists and what it signals to browsers, assistive technologies, and search engines.

What You Will Learn

You will start with document structure, text content, links, images, and lists, then move into tables, forms, and form validation attributes. The track covers semantic HTML5 elements, the <head> and metadata, audio and video, and accessibility fundamentals including ARIA roles and attributes. Later courses address custom data attributes, HTML templates, the Canvas and SVG elements, Web Storage, the Drag and Drop API, SEO and social meta tags, and HTML email templates. Advanced sections go into Shadow DOM, Web Components and custom elements, HTML modules and import maps, progressive enhancement, internationalization, security, the History and Navigation API, the Intersection Observer, and building HTML for Progressive Web Apps.

The Learning Path

Forty courses progress from A1 through A2 and B1 to B2, finishing with a C1 capstone on HTML at Scale. The A1 and A2 courses establish the essentials — document structure, semantic elements, forms, and metadata. B1 introduces accessibility, ARIA, Canvas, SVG, and browser storage. B2 is the largest block, covering Web Components, Shadow DOM, performance, security, internationalization, and the Intersection Observer. The final C1 course, HTML at Scale, addresses the patterns and constraints that matter when HTML is authored, tested, and maintained across large codebases.

How It Works

Each course is split into short, hands-on lessons you complete in the built-in code editor with real-time feedback. An AI tutor is available whenever you get stuck, and you progress at your own pace — each lesson is self-contained so you can return to any topic as a reference later.

How You'll Learn

  1. 01

    Interactive Lessons

    Hands-on coding exercises with real-time feedback

  2. 02

    AI Tutor

    Get instant help from our AI when you're stuck

  3. 03

    Built-in Editor

    Write and run code directly in your browser

  4. 04

    Certificate

    Earn a certificate when you complete the course

FAQ

Frequently Asked Questions

Is the HTML Academy course free?

Yes. You can start the HTML Academy course for free and complete its interactive lessons at no cost. An optional PRO subscription unlocks advanced AI tools and a shareable certificate.

Do I need prior experience to learn HTML?

No. The course begins with the fundamentals and gradually moves to more advanced topics, so you can start even with no prior HTML experience.

How will I learn HTML on CoddyKit?

You learn by doing. Short interactive lessons pair a clear explanation with a hands-on coding exercise that runs in real time, and a 24/7 AI tutor gives personalized help whenever you get stuck.

Do I get a certificate for completing HTML Academy?

Yes. PRO learners can take an exam and earn a shareable certificate of completion with a verifiable code for the HTML Academy course.

Can I learn HTML on my phone?

Yes. CoddyKit is available on the web and as native iOS and Android apps, so you can learn HTML on any device and your progress syncs across them.

How much does CoddyKit PRO cost?

The first course of HTML Academy is free. CoddyKit PRO unlocks every course: $5.90 per week, $7.90 per month, $29.90 per year, or $69.99 once for lifetime access with no renewals.

How long does it take to complete HTML Academy?

HTML Academy has 40 courses and 159 lessons. Most lessons take about 5–10 minutes, so the whole path is roughly 19 hours of hands-on practice, at your own pace.

Start HTML Academy Now

Join thousands of learners mastering programming with AI-powered lessons.