Alpine JS/HTMX/Astro JS: Building Fast Web Apps the Fun Way

Course Curriculum

Chapter 1: Introduction

Lecture 1: Overview

Lecture 2: The AHA stack and why you should use it

Chapter 2: Jumping in at the deep end – A complete example project

Lecture 1: Creating our first Astro project

Lecture 2: Introducing HTMX

Lecture 3: Specifying the target element

Lecture 4: Implementing the counter

Lecture 5: Add the decrement button

Lecture 6: Introducing Alpine.js

Lecture 7: Combining Astro, Alpine and HTMX

Chapter 3: First game: Get out! – Escape Room Adventure Game

Lecture 1: Intro to Get out – Escape Room Game

Lecture 2: Start page and first room

Lecture 3: Navigating the HTMX way

Lecture 4: Tool Support for Alpine

Lecture 5: Using Alpine to create a player id

Lecture 6: Refactoring the navigation

Lecture 7: HTMX target, trigger and swap

Lecture 8: Extracting the cookie value from a request

Lecture 9: Initializing game data on the server

Lecture 10: New game or resume game

Lecture 11: First actions with form submission

Lecture 12: Astro components with props

Lecture 13: Updating multiple elements from one response

Lecture 14: Fixing two problems

Lecture 15: Another action and small bug fix

Lecture 16: Actions for opening the drawer and finding the pin code

Lecture 17: Introducing the inventory

Lecture 18: First action on inventory item

Lecture 19: Show PIN input with Alpine

Lecture 20: Check the PIN and allow the player to leave

Lecture 21: Improving the UX for the PIN pad input

Lecture 22: Allow player to go to next room

Lecture 23: Action handlers refactoring

Lecture 24: Layout changes and images

Lecture 25: Fix resume

Chapter 4: Second game: Virtual Crypto Trader

Lecture 1: Virtual Crypto Trader Intro

Lecture 2: Filtering the data

Lecture 3: Refactoring into Components and local styling

Lecture 4: Drop-down menu with Alpine

Lecture 5: Adding menu functionality

Lecture 6: Opening the settings dialog

Lecture 7: Initializing, saving and loading the settings

Lecture 8: Implementing the coin filter

Lecture 9: Opening the buy dialog and adding the first transaction

Lecture 10: Providing the correct coin symbol

Lecture 11: Let the player enter the amount and adjust balance

Lecture 12: Display amount of coins bought

Lecture 13: Display more info in the overview

Lecture 14: Form validation with HTMX

Lecture 15: Opening the sell dialog

Lecture 16: Saving the sell transaction

Lecture 17: Calculating and showing the total portfolio value

Lecture 18: SSE – Server Sent Events

Lecture 19: Handling SSE on the client with HTMX

Lecture 20: Sending events only when coin price changed

Chapter 5: Space Explorer – a turn based space strategy game

Lecture 1: Introduction

Lecture 2: First code overview

Lecture 3: Exploration

Lecture 4: The event dialog

Lecture 5: Conclusion

Chapter 6: Bonus

Lecture 1: Bonus