HTMX: Fundamentos para el Desarrollo Web reactivo sin JavaScript

Secciones del curso

Sección 1: Introducción a HTMX y fundamentos

• Lección 1: ¿Qué es HTMX?

• Lección 2: ¿Cuándo usar HTMX y cuándo no?

• Lección 3: Páginas estáticas - Código

• Lección 4: Páginas dinámicas con HTMX - Código

Sección 2: Solicitudes AJAX, respuestas y eventos con HTMX

• Lección 1: Qué contenido cargar

  1. Introducción a AJAX - Código

  2. Uso de AJAX - Código

• Lección 2: Dónde insertar una respuesta

  1. Seleccción de elementos mediante CSS - Código

  2. Selección de elementos relativos - Código

• Lección 3: Cómo insertar una respuesta

  1. Modificadores de Posicionamiento y Contenido - Código

  2. Modificadores de Comportamiento y Visualización - Código

• Lección 4: Cuándo activar una solicitud

  1. Eventos de interacción - Código

  2. Modificadores delay, changed, thottle - Código

  3. Modificadores from, every, once - Código

Sección 3: CSS Transitions, animaciones, View Transitions

• Lección 1: CSS Transitions

  1. Concepto, JavaScript y hx-on - Código

  2. Transiciones con HTMX - Código

  3. Clase htmx-swapping - Código

  4. Clase htmx-settling - Código

• Lección 2: Animaciones CSS y hx-select - Código

• Lección 3: View Transitions y hx-boost

  1. View Transitions con JavaScript - Código

  2. View Transitions con HTMX y hx-boost - Código

Sección 4: Proyecto HTMX con Python

• Lección 1: Instalación del framework Flask

• Lección 2: Creación del CRUD en Flask con HTMX

Código