Building Full-Stack Applications with HTMX

Building Full-Stack Applications with HTMX

2h 54mIntermediate2025-05-09

Authors

Fikayo Adepoju

Fikayo Adepoju

Technical Writer | Software Developer

Course details

Get up and running with HTMX in this hands-on course with software developer Fikayo Adepoju. Discover the essentials of building real-world web functionalities with HTMX and a Hypermedia API. Fikayo demonstrates how to use HTMX in your applications by first building common web functionalities like search to find information, paginated tables to manage data, infinite scroll, and a dynamic web form powered by a Hypermedia back end. Along the way, you’ll get a chance to practice your new skills and technical know-how by building a complete application, a blogging platform, from the ground up.

Learning objectives
Perform client/server interactions with HTMX.
Return dynamic Hypermedia for HTMX front ends.
Build dynamic web components with HTMX.

Skills covered

HTMXWeb Development ToolsFull-Stack Web DevelopmentWeb DevelopmentOpen SourceOne-Off

Concepts

Introduction

  • Hands on projects with HTMX
  • What you need to know
  • Cloning the seed project
  • Using CoderPad challenges

Search Functionality

  • Project 1 - Search functionality
  • Seeding the database students records
  • Developing the search page
  • Solution - Delay and target destination

Paginated Data Tables

  • Project 2 - Paginated data tables
  • Seeding the database product records
  • Displaying records in a table
  • Adding pagination
  • Solution - Target destination within container element

Infinite Scroll Implementation

  • Project 3 - Infinite scroll
  • Seeding the database with articles
  • Displaying some articles
  • Displaying all articles with infinite scrolling
  • Solution - Appending content

Interactive Forms

  • Project 4 - Interactive forms
  • Writing the form sections
  • Adding validation
  • Submitting the form

Final Project - Building a Full Application Blog Platform

  • Final project - Blog platform
  • Solution # - Displaying All articles with infinite scroll
  • Solution #2 - Searching articles
  • Solution #3 - Viewing an article
  • Solution #4 - Adding a new article

Conclusion

  • Next steps
80,000 Toman