HTMX - The Practical Guide
Are you tired of picking the right JS library from a vast sea of libraries? And do you sometimes feel like frontend JavaScript development & code became unnecessarily complex?
HTMX might just be the right solution for you!
Because HTMX is an amazing JavaScript library that helps you avoid writing client-side JavaScript code!
It's a library that extends HTML by adding new attributes which you can use to add & control element behavior. Specifically, HTMX is a library that simplifies the process of sending AJAX requests and updating the DOM based on the response.
But you'll learn all about the core HTMX features as well as advanced HTMX concepts you need to know in detail in this course!
HTMX is a such an amazing library that allows you to write efficient client-side code that I simply had to create a course on it - even though I originally didn't plan to do that!
Therefore, in this course, I'll walk you through all core HTMX concepts step-by-step, without any prior HTMX knowledge assumed!
More
In detail, you'll learn:
- What HTMX is & how it works
- How to add HTMX to a website
- How to use HTMX for sending AJAX HTTP requests
- How to control request data
- How to control where the response will be rendered
- How to control which part of the response will be rendered
- How to handle responses with multiple content elements
- How to configure requests & responses
- How to build single-page-applications (SPAs) with HTMX
- And much, much more!
And you'll learn all that by working on multiple demo projects which allow you to dive deeper and deeper into HTMX.
Therefore, by the end of the course, you'll be able to add HTMX to your next web projects and reap its benefits!
Watch Online HTMX - The Practical Guide
| # | Title | Duration |
|---|---|---|
| 1 | Welcome! | 01:47 |
| 2 | What Is HTMX? And Why Would You Use It? | 02:23 |
| 3 | Module Introduction | 01:02 |
| 4 | Project Setup | 05:09 |
| 5 | Installing HTMX | 03:24 |
| 6 | Using HTMX & Sending GET Requests | 09:02 |
| 7 | Deep Dive: Where & How Can You Use HTMX? | 03:43 |
| 8 | Defining Response Target with hx-target | 04:29 |
| 9 | Changing the Request Trigger with hx-trigger | 04:10 |
| 10 | From GET to POST with hx-post | 04:02 |
| 11 | Submitting Data with HTMX | 04:37 |
| 12 | Handling POST Requests & Responses with HTMX | 06:54 |
| 13 | Picking Parts of a Response with hx-select | 03:47 |
| 14 | Time to Practice! | 12:43 |
| 15 | Module Introduction | 01:32 |
| 16 | Starting Project | 01:16 |
| 17 | Sending DELETE Requests | 08:59 |
| 18 | Avoiding Client-Server Sync Issues | 05:59 |
| 19 | HTMX Inheritance | 03:13 |
| 20 | Reusing HTML Fragments | 03:30 |
| 21 | Advanced Targeting with hx-target | 04:28 |
| 22 | Requesting Confirmation with hx-confirm | 02:12 |
| 23 | Listening to Events with hx-on ( | 03:20 |
| 24 | Working with HTMX-specific Events | 05:05 |
| 25 | Disabling Elements During Requests | 03:06 |
| 26 | Onwards To A New Project & Sending A POST Request Without A Form | 04:08 |
| 27 | Adding Extra Request Values | 03:24 |
| 28 | Returning a List Fragment in the Response | 02:43 |
| 29 | Setting HTMX Attributes Dynamically (On The Server) | 06:42 |
| 30 | Performing Out Of Band Swaps | 06:26 |
| 31 | Out Of Band Swaps & Delete Requests | 02:18 |
| 32 | Advanced Swapping Configuration: Scrolling Content Into View | 05:27 |
| 33 | Adding Separate JavaScript Files & Code | 07:42 |
| 34 | Updating The UI Without HTMX (With Custom JavaScript Code) | 05:32 |
| 35 | Using HTML Element Data With Help Of HTMX | 03:33 |
| 36 | Handling Default Events With JavaScript | 01:49 |
| 37 | Pausing & Resuming HTMX Requests | 03:51 |
| 38 | Preparing The Project For The Next Steps | 06:05 |
| 39 | Revisiting HTMX Requests & Event Handling | 06:30 |
| 40 | Implementing Polling | 03:02 |
| 41 | Configuring HTMX Globally | 03:28 |
| 42 | Working with HTMX Extensions | 02:55 |
| 43 | Module Introduction | 01:35 |
| 44 | Starting Project | 02:16 |
| 45 | Sometimes, HTMX Doesn't Submit The Data We Need | 03:04 |
| 46 | Controlling Attached Data to Outgoing Request with hx-params | 04:10 |
| 47 | Adding Headers to Outgoing Requests | 02:40 |
| 48 | Implementing Form Validation With HTMX | 04:06 |
| 49 | Synchronizing Multiple Requests | 04:07 |
| 50 | Triggering "Real Redirects" | 04:29 |
| 51 | Retargeting Responses & Reconfiguring Response Handling | 06:29 |
| 52 | Handling Multi-Response Cases With A Special Extension | 05:35 |
| 53 | Module Introduction | 01:44 |
| 54 | From Multi-Page Application (MPA) to Single-Page-Application (SPA) | 03:30 |
| 55 | Using HTMX Attributes To Fetch & Render Entire Pages | 02:36 |
| 56 | Updating the URL & Saving Previous Page State | 02:26 |
| 57 | Unlocking Automatic & Progressive Enhancement with hx-boost | 02:37 |
| 58 | Boosting Forms & Post Requests | 03:13 |
| 59 | Summary | 00:56 |
| 60 | Course Roundup | 04:00 |
Similar courses to HTMX - The Practical Guide
Clean Code: Writing Code for Humans pluralsight
Animating the web with Framer MotionJeroen Reumkens
