HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript

Learn HTMX by creating a couple of small projects with a Node.js and Express backend, including a contacts search, temperature converter, mock weather app with polling and form validation component. We will learn about the common HTMX attributes like hx-get, hx-post, hx-swap, etc.

Final Code:

https://github.com/bradtraversy/htmx-crash-course

Alpine Crash Course:

https://www.youtube.com/watch?v=r5iWCtfltso

Check out my courses:

https://traversymedia.com

Social Media:

Github - https://github.com/bradtraversy

Twitter - https://twitter.com/traversymedia

Instagram - https://www.instagram.com/traversymedia

Facebook - https://www.facebook.com/traversymedia

Linkedin - https://www.linkedin.com/in/bradtraversy

Timestamps:

0:00 - Intro

3:42 - Node.js/Express Server Setup

9:23 - Simple request with hx-get & hx-trigger

11:12 - hx-swap

11:58 - Route to get a list of users

16:04 - hx-target

17:00 - hx-confirm

17:30 - Get users from jsonplaceholder

18:40 - hx-indicator

21:06 - hx-vals

23:27 - Temperature converter with hx-post

29:44 - Polling

33:23 - Mock weather app with polling

36:44 - Contacts search widget

39:50 - Backend route for search

47:08 - Inline form validation

50:12 - Backend route for validation

56:01 - Wrap up