Exploring Alpine.js

Use Alpine.js to easily add elements of reactivity to your site

In this course, you will learn how to use Alpine.js in more advanced ways so that you can level up 🚀 your game.

Simplified Reactivity

Go Beyond
the Basics

Alpine.js is super powerful, but it can be challenging to go beyond some basic examples. After piecing together disparate articles, learning on my own via trial and error, and using Alpine.js to build over three dozen components across multiple production websites I wanted to share what I've learned to help you too Go Beyond the Basics.

Meet your instructor

👋, I’m Matt Vanderpol

I’m a man of many hats (husband, dad, outdoor enthusiast, builder, reader, programmer) and some radical, red sunglasses.

In the technical sphere, I’ve been a full stack web developer for over 25 years and I’m super excited about the power that Alpine.js provides to add simple reactive elements to any website.

Real World

Working Examples

Each video looks at both the code and the working example in the browser so you can see what is going on.

Zoom and Highlight

Code Explained

In every video, we will walk through the code, focusing on what's going on and zooming in on key points for clarity.

Alpen Peaks

Course Organization

The videos are organized into modules named after prominent peaks 🏔️ in the Alps. Each module focuses on a particular theme or technique with Alpine.js.

If you’re new to Alpine.js then I recommend going through them in order because each module builds on the previous ones. However, if you’ve worked with Alpine.js before or you are simply eager to learn about a particular feature then go ahead and jump to wherever it makes sense - you can always go back and review the earlier material later.

Eiger

Intro and Framework Features

This is a great module to start with if you have limited experience with Alpine.js.

We get started by looking at a sample Alpine.js component then build a firm foundation with a basic project setup. Next, we’ll look at some features of the framework that I learned about the hard way and wrap up with a discussion on how to leverage native events on the window 🪟 object.

Jungfrau

Code Organization and Communication

Now that we’ve got a foundation, we’ll look at how to extract our component code into external files for better organization 📁 and re-use. We’ll also dig into nested components to see how to leverage the cascade from outer to inner and explore options to pass data between non-nested components.

Zugspitze

Using
External Data

Showing data (especially tabular data) from an external data source is a fantastic use case for Alpine.js. In this module we’ll look at several different permutations and capabilities:

  • Loading data from an external source

  • Caching ⏳

  • Loading in chunks

  • Paginating 📖

  • Sorting

  • Filtering

  • Searching 🔍

Mont Blanc

Animation and Intersection

Don’t just react to user input, see how to add animation and whimsy 🦄 to your projects with intersection and scrolling triggers. We’ll also look at controlling a Lottie animation and leveraging Mutation Observer to react to other page changes.

Matterhorn

Real World Components

Learn from real-world components. We will walk through the actual code that I’ve used on production websites to deliver Alpine.js components to meet design and content requirements.

  1. Scoring on a Curve 💯

  2. (Fun With) Statistics

  3. Annotating 🖼️ Images

  4. Avoiding Underlap

  5. Dynamic 🧨 Datacards

  6. Image Marquee

Start Learning

Early Access

With over 60% of the planned videos completed, you can buy the course now at 50% off the completed price. Plus, you can request additional videos to cover your own use cases.

Course Updates

Not Ready?

Not ready to buy the course yet? Signup for the mailing list to be notified when additional modules are released or there is notable Alpine.js news.

Thank you!

Thanks for your interest in Exploring Alpine.js!