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

Download this course as PDF or EPUB

Read it offline, on your Kindle, or print it. Join my free newsletter and you get this course plus every other book and course I published.

Download PDFDownload EPUB
~~~

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