Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
HTMX Crash Course
Rating: 4.6 out of 5(22 ratings)
86 students

HTMX Crash Course

Extend HTML with Simple yet Powerful Code
Created byGreg Lim
Last updated 7/2024
English

What you'll learn

  • Extend HTML by using HTMX
  • Let HTMX handle AJAX requests & focus on your UI and core business logic instead
  • Build website & web apps without writing complex client-side JS code
  • Build multiple demo projects & learn about all key HTMX features you need to know

Explore related topics

Course content

6 sections • 16 lectures • 1h 8m total length

  • Introduction3:57

    Discover HTMX and its hyper script attributes that let any HTML element perform HTTP requests and swap content without writing JavaScript.

  • Setting up our simple Node.js and Express Backend2:58

    Set up a basic Node.js and Express backend with a public directory to serve html files, install Node.js, npm, Express, and nodemon, and configure a dev script using import syntax.

  • server.js2:50

    Create server.js as the backend entry point, import and initialize express, serve a static public folder, parse json and urlencoded form data, and start the server on port 3000.

  • Get Started with HTMX2:46

    Create a public folder for html files and add an index.html with a hello world page, serve it via a static server, and learn html installation via CDN with Bootstrap.

  • Requesting from our own API with hx-get7:17

    Learn to trigger a fetch from your api using hx-get by clicking a button that sends an ajax get to /users, returning a list of users rendered in the page.

  • hx-swap, hx-target and hx-confirm3:07

    Learn how hx-swap replaces the triggering button with the response, using outerhtml or innerhtml, and how hx-target directs the output to a specific element, with hx-confirm for confirmations.

  • Getting Data from API1:50

    Learn to fetch data from an API using JSON placeholders, replacing a hard coded user array with an async fetch that returns JSON and displays user names.

  • hx-val2:47
  • htmx-indicator1:59

    Explore how the hx-indicator attribute shows a loading spinner while waiting for the server, by wiring a Bootstrap spinner with id loading and the html indicator class.

Requirements

  • No prior HTMX knowledge is required. Basic web development knowledge is required. Basic JavaScript knowledge helps but is not a strict requirement.

Description

HTMX is an amazing JavaScript library that helps you avoid writing client-side JavaScript code!

In this course, we take you on a fun, hands-on crash course to learning HTMX.

You'll start building your first app with HTMX within minutes.

Every section is written in a bite-sized manner and straight to the point as I don’t want to waste your time (and most certainly mine) on the content you don't need.

The goal of this book is to teach you HTMX in a manageable way without overwhelming you.

We focus only on the essentials and cover the material in a hands-on practice manner for you to code along.

I'll walk you through all core HTMX concepts step-by-step, without any prior HTMX knowledge assumed!

In this course, we will cover:

  • Chapter 1: Introduction to HTMX

  • Chapter 2: BMI Calculator

  • Chapter 3: Polling – Bitcoin Price Tracker App

  • Chapter 4: Building a Search Widget

  • Chapter 5: Form Inline Validation

  • Chapter 6: Show Edit Form and Update

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!

Who this course is for:

  • 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

Report abuse