HTMX Essential Training

1h 23mBeginner2025-01-07

Authors

Eve Porcello

Software Developer and Instructor

Course details

This course provides a comprehensive introduction to HTMX, a lightweight JavaScript library that enhances web development by enabling dynamic and interactive user interfaces with minimal effort. Learn how to use HTMX attributes to trigger server-side actions, handle asynchronous requests, and update the DOM. Instructor Eve Porcello covers practical examples and best practices for integrating HTMX into existing projects. By the end of the course, you should be familiar with the skills to create modern, responsive web applications using HTMX.

Learning objectives
Gain familiarity with the core features of HTMX and why it is currently used.
Interact with APIs via HTTP requests.
Handle common tasks like updating the DOM and managing forms.

Skills covered

HTMXWeb StandardsWeb DesignWeb Development ToolsFront-End Web DevelopmentEssential TrainingWeb DevelopmentProgramming LanguagesOpen SourceSoftware Development

Concepts

0. Introduction

01 - Dynamic web development with HTMX
02 - What you should know

1. HTMX Fundamentals

03 - What is HTMX
04 - Sending GET requests
05 - Swapping elements with hx-swap

2. Selecting Elements

06 - Using hx-trigger
07 - Creating a webserver
08 - Sending POST requests
09 - Processing JSON response data
10 - Challenge - Selecting HTML elements
11 - Solution - Selecting HTML elements

3. Handling Events

12 - Working with HTMX events
13 - Creating a loading indicator
14 - Incorporating custom animations
15 - Polling with HTMX
16 - Combining methods
17 - Displaying nested content

4. Advanced HTMX Features

18 - Handling server sent events
19 - Integrating with WebSocket
20 - Sending web socket messages
21 - Challenge - Handling transitions
22 - Solution - Handling transitions

Conclusion

23 - Building hypertext applications at scale