Building Full-Stack Applications with HTMX

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.

Concepts

0. Introduction

01 - Hands on projects with HTMX
02 - What you need to know
03 - Cloning the seed project
04 - Using CoderPad challenges

1. Search Functionality

05 - Project 1 - Search functionality
06 - Seeding the database students records
07 - Developing the search page
08 - Solution - Delay and target destination

2. Paginated Data Tables

09 - Project 2 - Paginated data tables
10 - Seeding the database product records
11 - Displaying records in a table
12 - Adding pagination
13 - Solution - Target destination within container element

3. Infinite Scroll Implementation

14 - Project 3 - Infinite scroll
15 - Seeding the database with articles
16 - Displaying some articles
17 - Displaying all articles with infinite scrolling
18 - Solution - Appending content

4. Interactive Forms

19 - Project 4 - Interactive forms
20 - Writing the form sections
21 - Adding validation
22 - Submitting the form

5. Final Project - Building a Full Application Blog Platform

23 - Final project - Blog platform
24 - Solution # - Displaying All articles with infinite scroll
25 - Solution #2 - Searching articles
26 - Solution #3 - Viewing an article
27 - Solution #4 - Adding a new article

Conclusion

28 - Next steps