Full-Stack Web Apps with HTMX

Duration

3 days

Description

This comprehensive course offers an in-depth exploration of HTMX, a powerful tool for modern web development. Starting with the basics, you'll learn how HTMX operates and how to integrate it into your web projects. The course also includes a review of HTML and CSS, as well as an introduction to Tailwind CSS, a utility-first framework for rapid UI development. You'll then dive into the core principles of HTMX, AJAX, and learn how to connect to the backend, use triggers and indicators, and more. Advanced topics include custom scripting, caching, security, and extensions. By the end of the course, you'll have a solid understanding of HTMX and its many features, and be able to design, implement, and deploy a web application using this powerful tool. Popular options include but are not limited to:

Python & Flask
Python & Django
C# & ASP.NET MVC
JavaScript/TypeScript & Express
Rust & Axum
Rust & Actix Web
PHP & Laravel
Go & templ
Java & Spring Web

Objectives

Understand the fundamentals of HTMX, including its setup, operation, and integration with backend web applications.
Design and implement a web application using HTMX, from choosing a supportive backend framework to testing and deployment.
Review HTML and CSS, focusing on their roles in structuring and styling web pages, and their syntax and common properties.
Explore Tailwind CSS (or Bootstrap), a utility-first framework for rapid UI development, and learn how to customize and optimize it for production.
Install HTMX and understand its core principles and debugging techniques.
Dive into HTMX & AJAX, learning about backend connections, triggers, indicators, targets, swapping, synchronization, CSS transitions, and more.
Discover HTMX features like attribute inheritance, boosting, web sockets, server-sent events, form validation, animations, and events and logging.
Explore advanced HTMX topics, including custom scripting, caching, security, configuration, and extensions.

Prerequisites

All students must have the selected web backend programming language (Python, Rust, Go, C#, PHP, etc) experience. Knowledge of HTML and CSS is helpful but not required. While HTMX helps programmers avoid JavaScript, knowledge of JavaScript and how it works in the browser is needed if the optional custom JavaScript topics are included (see the outline).

Training Materials

All HTMX training students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples.

Software Requirements

Students need a free, personal GitHub account to access the courseware and permission to install their backend programming language and Visual Studio Code on their computers. They also need permission to install packages for their backend programming language and Visual Studio Code Extensions. If students cannot configure a local environment, a cloud-based environment can be provided.

Outline

HTMX Overview
- What is HTMX and why use it?
- How HTMX works under the hood
- Setting up HTMX in your web project
- HTMX and the backend web application
Building a Web Application with HTMX
- Choosing a backend framework that supports HTMX
- Designing a web application with HTMX in mind
- Implementing the frontend and backend logic with HTMX
- Testing and deploying the web application
HTML (review as needed throughout the course)
- Semantic Language of the Web
- Structure and Content of Web Pages
- Tag Syntax
- Versions and Standards
- Common HTML elements (review as needed throughout the course)
- HTML, Head, and Body Elements
- Head Elements
  - Title
  - Style & Link
  - Script
  - Meta, & others
- Generic Tags
  - Div
  - Span
- Common Tags
  - “Semantic” Tags
  - Heading Tags
  - Paragraph
  - Lists
  - Links
- Form Tags
  - Form, Field Set
  - Input, Select, Text Area, Button
  - Configuring Input Type
  - Label
- Other Tags as Needed
CSS review as needed throughout the course)
- Styling Language of the Web
- Presentation and Layout of Web Pages
- Selector Syntax
- Cascading and Inheritance Rules
Common CSS Properties (review as needed throughout the course)
- Color and Background Properties
- Font and Text Properties
- Box Model Properties
- Display and Position Properties
- Flexbox and Grid Properties
- Responsive Design and Media Queries
- Transitions and Animations
Tailwind CSS (can be substituted with Bootstrap)
- Utility-First Framework for Rapid UI Development
- Using a CDN or Installing with NPM
- Customizing the Configuration File
- Using Predefined Utility Classes
- Creating Custom Utility Classes
- Extracting Reusable Components
- Optimizing for Production
HTMX
- Installing HTMX
- Core Principles
- Debugging HTMX Apps
HTMX & AJAX
- What is AJAX?
- Connecting to the Backend
- Triggers
  - Modifiers & Filters
  - Special Events
  - Polling & Load Polling
- Indicators
- Targets
- Swapping
- Synchronization
- CSS Transitions
- Out of Band Swaps
- Parameters
- Confirming
HTMX Features
- Attribute Inheritance
- Boosting
- Web Sockets
- Server-Sent Events
- Browser History API
- Requests & Responses – CORS
- Form Validation
- Animations & CSS Transitions
- Events and Logging
HTMX Custom Scripting (optional, requires knowledge of JavaScript)
- Hypermedia-Friendly Approach Preferred
  - Respect HATEOAS
  - Events to Communicate Between Components
  - Islands to Isolated Non-Hypermedia from the Rest of the Application
  - Inline Scripting
- Embedding Inline Scripts into HTMX
- Third-Party JavaScript
Additional HTMX Topics
- Caching
- Security
- Configuring HTMX
HTMX Extensions
- What are Extensions?
- Included Extensions
- Add Additional Extensions
- Custom Extensions (optional, requires knowledge of JavaScript)