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.
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
Introduction
- Dynamic web development with HTMX
- What you should know
HTMX Fundamentals
- What is HTMX
- Sending GET requests
- Swapping elements with hx-swap
Selecting Elements
- Using hx-trigger
- Creating a webserver
- Sending POST requests
- Processing JSON response data
- Challenge - Selecting HTML elements
- Solution - Selecting HTML elements
Handling Events
- Working with HTMX events
- Creating a loading indicator
- Incorporating custom animations
- Polling with HTMX
- Combining methods
- Displaying nested content
Advanced HTMX Features
- Handling server sent events
- Integrating with WebSocket
- Sending web socket messages
- Challenge - Handling transitions
- Solution - Handling transitions
Conclusion
- Building hypertext applications at scale