HTMX – The Practical Guide

HTMX – The Practical Guide

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 60 Lessons (4h 5m) | 686 MB

Learn how to use the HTMX library to extend HTML and write simple yet powerful code.

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!

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!

Table of Contents

1 Welcome!
2 What Is HTMX_ And Why Would You Use It_
3 Module Introduction
4 Project Setup
5 Installing HTMX
6 Using HTMX & Sending GET Requests
7 Deep Dive Where & How Can You Use HTMX_
8 Defining Response Target with hx-target
9 Changing the Request Trigger with hx-trigger
10 From GET to POST with hx-post
11 Submitting Data with HTMX
12 Handling POST Requests & Responses with HTMX
13 Picking Parts of a Response with hx-select
14 Time to Practice!
15 Module Introduction
16 Starting Project
17 Sending DELETE Requests
18 Avoiding Client-Server Sync Issues
19 HTMX Inheritance
20 Reusing HTML Fragments
21 Advanced Targeting with hx-target
22 Requesting Confirmation with hx-confirm
23 Listening to Events with hx-on
24 Working with HTMX-specific Events
25 Disabling Elements During Requests
26 Onwards To A New Project & Sending A POST Request Without A Form
27 Adding Extra Request Values
28 Returning a List Fragment in the Response
29 Setting HTMX Attributes Dynamically (On The Server)
30 Performing Out Of Band Swaps
31 Out Of Band Swaps & Delete Requests
32 Advanced Swapping Configuration Scrolling Content Into View
33 Adding Separate JavaScript Files & Code
34 Updating The UI Without HTMX (With Custom JavaScript Code)
35 Using HTML Element Data With Help Of HTMX
36 Handling Default Events With JavaScript
37 Pausing & Resuming HTMX Requests
38 Preparing The Project For The Next Steps
39 Revisiting HTMX Requests & Event Handling
40 Implementing Polling
41 Configuring HTMX Globally
42 Working with HTMX Extensions
43 Module Introduction
44 Starting Project
45 Sometimes, HTMX Doesn’t Submit The Data We Need
46 Controlling Attached Data to Outgoing Request with hx-params
47 Adding Headers to Outgoing Requests
48 Implementing Form Validation With HTMX
49 Synchronizing Multiple Requests
50 Triggering _Real Redirects_
51 Retargeting Responses & Reconfiguring Response Handling
52 Handling Multi-Response Cases With A Special Extension
53 Module Introduction
54 From Multi-Page Application (MPA) to Single-Page-Application (SPA)
55 Using HTMX Attributes To Fetch & Render Entire Pages
56 Updating the URL & Saving Previous Page State
57 Unlocking Automatic & Progressive Enhancement with hx-boost
58 Boosting Forms & Post Requests
59 Summary
60 Course Roundup

Homepage