Htmx - The Practical Guide

Htmx - The Practical Guide
Published 3/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English

| Size: 2.58 GB[/center]
| Duration: 4h 10m
Learn how to use the HTMX library to extend HTML and write simple yet powerful code.

What you'll learn

Extend HTML by using HTMX

Build website & web apps without writing complex client-side JS code

Let HTMX handle AJAX requests & focus on your UI and core business logic instead

Build multiple demo projects & learn about all key HTMX features you need to know

Seamlessly blend HTMX into your existing fullstack projects - no matter which language you're using

Requirements

No prior HTMX knowledge is required!

Basic web development knowledge is required

Basic jаvascript knowledge helps but is not a strict requirement

Description

Are you tired of picking the right JS library from a vast sea of libraries? And do you sometimes feel like frontend jаvascript development & code became unnecessarily complex?HTMX might just be the right solution for you!Because HTMX is an amazing jаvascript library that helps you avoid writing client-side jаvascript 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 worksHow to add HTMX to a websiteHow to use HTMX for sending AJAX HTTP requestsHow to control request dataHow to control where the response will be renderedHow to control which part of the response will be renderedHow to handle responses with multiple content elementsHow to configure requests & responsesHow to build single-page-applications (SPAs) with HTMXAnd 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!

Overview

Section 1: Getting Started

Lecture 1 Welcome!

Lecture 2 What Is HTMX? And Why Would You Use It?

Lecture 3 Course Resources & Community

Section 2: HTMX Essentials

Lecture 4 Module Introduction

Lecture 5 Project Setup

Lecture 6 Installing HTMX

Lecture 7 Using HTMX & Sending GET Requests

Lecture 8 Controlling Response Content Rendering with hx-swap

Lecture 9 Deep Dive: Where & How Can You Use HTMX?

Lecture 10 Defining Response Target with hx-target

Lecture 11 Changing the Request Trigger with hx-trigger

Lecture 12 hx-trigger: Advanced Settings

Lecture 13 From GET to POST with hx-post

Lecture 14 Submitting Data with HTMX

Lecture 15 Handling POST Requests & Responses with HTMX

Lecture 16 Picking Parts of a Response with hx-select

Lecture 17 Time to Practice!

Section 3: Advanced HTMX: Beyond The Basics

Lecture 18 Module Introduction

Lecture 19 Starting Project

Lecture 20 Sending DELETE Requests

Lecture 21 Avoiding Client-Server Sync Issues

Lecture 22 HTMX Inheritance

Lecture 23 Reusing HTML Fragments

Lecture 24 Advanced Targeting with hx-target

Lecture 25 Requesting Confirmation with hx-confirm

Lecture 26 Listening to Events with hx-on

Lecture 27 Handling Events with hx-on

Lecture 28 Working with HTMX-specific Events

Lecture 29 Disabling Elements During Requests

Lecture 30 Onwards To A New Project & Sending A POST Request Without A Form

Lecture 31 Adding Extra Request Values

Lecture 32 Returning a List Fragment in the Response

Lecture 33 Setting HTMX Attributes Dynamically (On The Server)

Lecture 34 Setting HTMX Attributes Dynamically (On The Client)

Lecture 35 Performing Out Of Band Swaps

Lecture 36 Out Of Band Swaps & Delete Requests

Lecture 37 Advanced Swapping Configuration: Scrolling Content Into View

Lecture 38 Adding Separate jаvascript Files & Code

Lecture 39 Updating The UI Without HTMX (With Custom jаvascript Code)

Lecture 40 Using HTML Element Data With Help Of HTMX

Lecture 41 Handling Default Events With jаvascript

Lecture 42 Pausing & Resuming HTMX Requests

Lecture 43 Preparing The Project For The Next Steps

Lecture 44 Revisiting HTMX Requests & Event Handling

Lecture 45 Implementing Polling

Lecture 46 Configuring HTMX Globally

Lecture 47 Working with HTMX Extensions

Section 4: Working with HTMX Requests & Responses - Advanced Concepts

Lecture 48 Module Introduction

Lecture 49 Starting Project

Lecture 50 Sometimes, HTMX Doesn't Submit The Data We Need

Lecture 51 Controlling Attached Data to Outgoing Request with hx-params

Lecture 52 Adding Headers to Outgoing Requests

Lecture 53 Implementing Form Validation With HTMX

Lecture 54 Synchronizing Multiple Requests

Lecture 55 Triggering "Real Redirects"

Lecture 56 Retargeting Responses & Reconfiguring Response Handling

Lecture 57 Handling Multi-Response Cases With A Special Extension

Section 5: Building Single-Page-Applications (SPAs) With HTMX

Lecture 58 Module Introduction

Lecture 59 From Multi-Page Application (MPA) to Single-Page-Application (SPA)

Lecture 60 Using HTMX Attributes To Fetch & Render Entire Pages

Lecture 61 Updating the URL & Saving Previous Page State

Lecture 62 Unlocking Automatic & Progressive Enhancement with hx-boost

Lecture 63 Boosting Forms & Post Requests

Lecture 64 Summary

Section 6: Roundup

Lecture 65 Course Roundup

Beginner & advanced developers who are interested in getting more done in less time,Developers who worked with ReactJS or other libraries and are looking for a simpler yet powerful alternative