HTMX + Django: Modern Python Web Apps, Hold the JavaScript Course

Course Summary

htmx is one of the hottest properties 🔥 in web development today, and for good reason. This framework, along with the libraries and techniques introduced in this course, will have you writing the best Python web apps you've ever written: clean, fast, and interactive without all that frontend overhead.

If you are a Python web developer that has wanted to build more dynamic, interactive apps, but just don't want to (or can't) write a significant portion of your app in a rich frontend JavaScript framework, you'll absolutely love htmx. This library lets you write Python code you love and still add that clientside interactive aspect.

What students are saying

In these first 13 minutes I learned so many techniques and best practices.

Quite a few times I found myself cursing that it had taken me weeks to learn what Michael was demonstrating in meer minutes.

The beauty of the course however lies in the fact that you're not spoon fed everything. You're expected to have prior knowledge of concepts such as Python Classes, data structures and so on.
-- Julian Sequeira (from @pybites)

Source code and course GitHub repository

github.com/talkpython/htmx-django-course

What's this course about and how is it different?

htmx is a very compelling technology. It's one of the first legitimate libraries that delivers on the promise of dynamic, interactive web applications without complex JavaScript. htmx allows us to write server-side code in any language (Python in our case) and, through a few simple HTML attributes, bring our pages to life.

This is the only course (that we're aware of) that shows you the full lifecycle of building Python and Django-based applications centered around htmx. Unlike basic tutorials where you'll find only just quick coverage of a simple feature, we take a full-fledged web app and extend it by adding four real-world features all building upon htmx.

Moreover, we show you the right way to use htmx with Django and Python. The resulting code is incredibly clean and would impress almost any professional web developer.

Sister course for Flask developers

If you're using Flask rather than Django, we also have a very popular HTMX + Flask course available from Talk Python.

What will we build

In the course, we will add a bunch of htmx-powered features to an existing application. This app, called Video Collector, is a beautiful Django web app that allows us to save, explore, search, and play videos we've collected from YouTube.

Demo app from the course

The Video Collector application we'll build during this course.

What topics are covered

In this course, you will:

  • See how htmx differs from common JavaScript front-end frameworks such as Vue and React.
  • Understand the server-side exchange enabled by htmx attributes (e.g. hx-trigger).
  • Add click to edit to an existing data-driven Django application.
  • Add deep linking to our dynamic web application, allowing us to share links into interactive segments.
  • Add active search to an existing data-driven Django application.
  • Implement browser history for htmx actions (allowing back and forth navigation).
  • Add infinite scroll to our app.
  • Distinguish between full page requests and partial htmx requests within a single view method in Django.
  • And lots more

View the full course outline.

Who is this course for?

This course is for anyone who creates Python web applications and needs them to be more interactive in manners often characterized as SPAs (single page applications) but doesn't want to (re)write the application largely in a complex JavaScript frontend framework such as Vue.js or React.js.

The experience level for taking this course is not significantly high. You'll need

  • A basic understanding of how Django works
  • Experience with core Python concepts (such as classes, functions, and decorators) but nothing complex (such as async or metaclasses)
  • You'll need to know a little about HTML and HTTP

That's it.

Concepts backed by concise visuals

While exploring a topic interactively with demos and live code is very engaging, it can mean losing the forest for the trees. That's why when we hit a new topic, we stop and discuss it with concise and clear visuals.

Here's an example of understanding how you can use htmx along with other front-end JavaScript frameworks (specifically Bootstrap functionality here).

Example: Concepts backed by concise visuals

Get hands-on for almost every chapter

While watching videos is great to give you that high level overview of what you need to know about a technology, nothing makes that skill your own like writing actual code and creating real webapps that use htmx.

In this course, you'll have access to all the source code at github.com/talkpython/htmx-django-course.

Each chapter, which corresponds to each major feature roughly, has a starter and final code section. This means you can start from the beginning and work along side us as we build out final application. And if you get stuck, or want to jump around, you can grab the starter code for any chapter and carry on from them.

You are strongly encouraged to work along as you go through the course. Remember that in programming, you learn by doing.

This course is delivered in very high resolution

Example of 1440p high res video

This course is delivered in 1440p (4x the pixels as 720p). When you're watching the videos for this course, it will feel like you're sitting next to the instructor looking at their screen.

Every little detail, menu item, and icon is clear and crisp. Watch the introductory video at the top of this page to see an example.

Follow along with subtitles and transcripts

Each course comes with subtitles and full transcripts. The transcripts are available as a separate searchable page for each lecture. They also are available in course-wide search results to help you find just the right lecture.

Each course has subtitles available in the video player.

Who am I? Why should you take my course?

Who is Christopher Trudeau?

My name is Christopher and I'm happy to be delivering this Django course for you. I've been writing Django web applications for over a decade at a variety of companies both small and large. I am a consultant who provides organizations advice on both their technical stack and software development processes.

I've taught thousands of students in person and virtually on a variety of topics, including Agile methodologies, Testing, Requirements management, and DevOps. My Python screencasts cover Django, PyGame, SQLAlchemy, Data structures, Unicode, cryptography, and more.

You may also know me from The Real Python Podcast, where twice a month I cover recent articles and news items in the Python world, or from my book Django In Action, available at Manning.com.

The time to act is now

htmx is one of the hottest properties in the web world today, and for good reason. This framework, along with the libraries and techniques introduced in this course, will have you writing the best Python web apps you've ever written: clean, fast, and interactive without all that frontend overhead.

Not sure? You've got nothing to lose. Every one of our courses comes with a 2-week money-back guarantee including this one!

Course Outline: Chapters and Lectures

Welcome to the course
8:35
What is HTML?
0:54
The HOWL stack
1:24
Big ideas covered in the course
1:12
Prerequisites
1:11
Comparing web frameworks to HTMX
2:14
Git the course sample code
0:38
Your Guide: Christopher Trudeau
0:41
Interview with HTMX creator Carson Gross
0:21
Exploring the examples on htmx.org
14:10
Intro to HTMX examples
0:44
HTMX examples with Michael
1:09
Example: Infinite scroll
2:41
Example: Active search
3:29
Example: Lazy loading
2:37
Example: Bulk update
3:17
On to the code
0:13
Surveying the non-JS-enabled Django app
19:55
Surveying the base project
1:24
Project directory structure
4:10
View for the home page
1:56
Category model object
1:22
View for the category page
0:48
Video model object
1:06
Views for feed and player pages
0:56
Setting up your environment
1:50
Creating a PyCharm project
3:43
Packages
0:40
Tour of the code
2:00
Feature 1: Click-to-edit
19:24
Adding the form to the template
1:34
Adding the form to the template
1:44
Adding post handling to the category view
3:10
Introducing Click to edit
0:57
Creating the partials template for the form
1:15
Inserting the Click to edit link
3:16
Adding HTMX to the base HTML file
0:36
The view for the form partial
1:28
Cancelling the form
0:44
Moving the click to edit link into a partial
1:14
Inserting the cancel button
1:07
Adding the view that cancels the form
1:02
Concepts review
1:17
Feature 2: Active search
19:38
Intro to search as you type
2:31
Django Q objects
1:14
Creating the search page template
2:32
View with hard coded search results
2:38
Add HTMX attributes to the input tag
1:55
Installing the django-htmx package
2:02
Update the search view
3:16
Deep linking
1:48
Concepts review
1:42
Feature 3: Infinite scroll
8:29
Intro to infinite scrolling
1:51
Modifying the feed template
2:05
Adapting the feed view
3:18
Infinite scroll demo
0:56
Concepts review
0:19
Feature 4: Integrating with front-end frameworks
7:19
Mixing frameworks with HTMX intro
0:28
Boostrap modals
2:44
The about partial and modal HTML
2:33
The About view
1:05
Concepts review modals
0:29
Course conclusion and review
6:55
You're finished
0:37
Setup
0:31
Using HTMX
0:46
HTMX attributes
3:33
Further investigation
1:28
Buy for $49 + tax Bundle and save 85% Team Gift

Questions? Send us an email: contact@talkpython.fm

Talk Python's Mastodon Michael Kennedy's Mastodon