Free course

HTMX Course

Learn HTMX by extending HTML with requests, targets, swaps, triggers, forms, indicators, errors, history, and progressive enhancement.

5 modules · 45 lessons · No signup

Prerequisites: HTML, HTTP and Web Forms

~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Build a progressively enhanced server-rendered interface that updates useful HTML fragments without a client-side application framework.

Course contents

  1. Hypermedia foundations

    Start from HTML, HTTP, server routes, and progressive enhancement.

    1. ✓ What HTMX adds to HTML
    2. ✓ Think in hypermedia
    3. ✓ Add HTMX to a page
    4. ✓ Make the first request
    5. ✓ Return a full page or a fragment
    6. ✓ Start from progressive enhancement
    7. ✓ The server remains the security boundary
    8. ✓ Check your understanding: hypermedia foundations

  2. Requests and responses

    Issue HTTP requests and return the HTML each interaction needs.

    1. ✓ Use the request method attributes
    2. ✓ Send request parameters
    3. ✓ Include extra values
    4. ✓ Inspect HTMX request headers
    5. ✓ Return the updated HTML
    6. ✓ Use status codes deliberately
    7. ✓ Control the result with response headers
    8. ✓ Debug an HTMX exchange
    9. ✓ Check your understanding: requests and responses

  3. Targets and swaps

    Choose which DOM region changes and how new HTML replaces it.

    1. ✓ Understand the default target
    2. ✓ Choose a target
    3. ✓ Use relative targets
    4. ✓ Choose innerHTML or outerHTML
    5. ✓ Insert before or after existing content
    6. ✓ Delete a target or skip the main swap
    7. ✓ Update another region out of band
    8. ✓ Understand swap and settle
    9. ✓ Check your understanding: targets and swaps

  4. Triggers, forms, and feedback

    Control timing, submit values, and explain in-flight work.

    1. ✓ Start from natural triggers
    2. ✓ Choose a custom trigger
    3. ✓ Use trigger modifiers
    4. ✓ Enhance a real form
    5. ✓ Upload a file
    6. ✓ Show request progress
    7. ✓ Prevent duplicate submissions
    8. ✓ Confirm a dangerous action
    9. ✓ Check your understanding: triggers, forms, and feedback

  5. History, errors, and enhancement

    Preserve navigation, recover from failures, and keep HTML usable.

    1. ✓ Boost links and forms
    2. ✓ Push a URL into history
    3. ✓ Keep sensitive content out of history snapshots
    4. ✓ Handle HTTP errors
    5. ✓ Handle connection errors
    6. ✓ Use request lifecycle events sparingly
    7. ✓ Manage focus after a swap
    8. ✓ Test without JavaScript
    9. ✓ Build a progressively enhanced task interface
    10. ✓ Check your understanding: history, errors, and enhancement