Free course

Alpine.js Course

Add focused browser interactions with Alpine.js while keeping HTML, accessibility, progressive enhancement, and state ownership clear.

5 modules · 25 lessons · No signup

Prerequisites: HTML, CSS and JavaScript

~~~

Your progress

of lessons completed.

Course completed.

What you'll learn

Build an accessible issue board with local state, forms, dynamic lists, reusable components, persistence, and an explicit HTMX boundary.

Take this course offline

Subscribe to my newsletter to get every free book and course in PDF and EPUB format.

Get the downloads

Course contents

  1. Local state and directives

    Choose Alpine-sized problems and bind local content, state, and visibility.

    1. ✓ Choose Alpine-sized problems
    2. ✓ Create an x-data scope
    3. ✓ Bind text, attributes, and visibility
    4. ✓ Inspect Alpine state
    5. ✓ Check your understanding: local state and directives

  2. Events and forms

    Handle events, native controls, derived state, and asynchronous submission.

    1. ✓ Handle events with intent
    2. ✓ Bind form controls
    3. ✓ Derive state instead of copying it
    4. ✓ Model async form states
    5. ✓ Check your understanding: events and forms

  3. Lists, transitions, and the DOM

    Preserve identity and focus through lists, conditional DOM, and transitions.

    1. ✓ Render keyed lists
    2. ✓ Choose x-show or x-if
    3. ✓ Add purposeful transitions
    4. ✓ Coordinate DOM updates and focus
    5. ✓ Check your understanding: lists, transitions, and the dom

  4. Reusable Alpine

    Extract data components, use stores sparingly, synchronize boundaries, and evaluate plugins.

    1. ✓ Extract Alpine.data components
    2. ✓ Use global stores sparingly
    3. ✓ Initialize, watch, and clean up
    4. ✓ Evaluate plugins and CSP
    5. ✓ Check your understanding: reusable alpine

  5. Accessible progressive UI

    Keep semantics in sync, persist deliberately, coordinate HTMX, and test failure.

    1. ✓ Keep semantics in sync
    2. ✓ Persist only user-owned state
    3. ✓ Coordinate Alpine and HTMX
    4. ✓ Finish and test the board
    5. ✓ Check your understanding: accessible progressive ui