Full-Stack Web Apps with HTMX
Class Duration
- 3 days of live online training
- Comprehensive hands-on development experience
Target Audience
- Web backend programming language experience (Python, Rust, Go, C#, PHP, etc)
- HTML and CSS knowledge helpful but not required
- JavaScript knowledge needed for optional custom scripting topics
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
Learning 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.
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.
Training Topics
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)