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.
HTMX + Flask: Modern Python Web Apps, Hold the JavaScript
3h 3m 5s
English
Paid
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'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 Flask-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 three real-world features all building upon htmx.
Moreover, we show you the right way to use htmx with Flask and Python. The resulting code is incredibly clean and would impress almost any professional web developer.
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 Flask web app that allows us to save, explore, search, and play videos we've collected from YouTube.
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. ).
- Add click to edit to an existing data-driven Flask application.
- Learn about the package to refactor our jinja2 templates (with or without htmx).
- Add deep linking to our dynamic web application, allowing us to share links into interactive segments.
- Add active search to an existing data-driven Flask 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 Flask.
- And lots more
Additional
About the Author: Talk Python Training
Talk Python Training is the paid course platform of Michael Kennedy, the host of the long-running Talk Python To Me podcast — one of the most-listened-to podcasts in the Python ecosystem. The course platform extends Michael's interview-based knowledge of the field into structured video courses taught by Michael and a curated set of guest instructors.
The course catalog covers the full Python landscape: web development with Django, Flask, FastAPI, and the broader async-Python stack; data science and pandas; LLM / RAG application development; testing and CI/CD; deployment patterns; the data-engineering side of Python; and a long list of practical Python patterns aimed at working developers. Few platforms cover the language with this much breadth from inside the Python community itself.
The CourseFlix listing under this source carries over 18 Talk Python Training courses spanning that range. Material is paid; Talk Python Training runs on per-course pricing on the original platform. Courses are aimed at developers using Python as a serious primary language rather than as a scripting tool.
Watch Online 66 lessons
0:00
/ #1: Introduction to the course
All Course Lessons (66)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction to the course Demo | 02:29 | |
| 2 | What is htmx? | 05:04 | |
| 3 | The HOWL stack | 01:36 | |
| 4 | The big ideas covered in this course | 03:04 | |
| 5 | Student prerequisites | 01:22 | |
| 6 | Vue, React, and htmx: A quick comparison | 02:52 | |
| 7 | Git the source code | 00:55 | |
| 8 | Meet your instructor: Michael Kennedy | 01:10 | |
| 9 | A tour of htmx examples | 01:09 | |
| 10 | Example: Infinite scroll | 02:41 | |
| 11 | Example: Active search | 03:29 | |
| 12 | Example: Lazy loading | 02:37 | |
| 13 | Example: Bulk update | 03:18 | |
| 14 | Introducing our web app: Video Collector | 01:27 | |
| 15 | Setting up and running the Flask app | 03:38 | |
| 16 | Key elements of code organization | 05:50 | |
| 17 | Concept: Pydantic models | 02:04 | |
| 18 | Concept: View models | 02:18 | |
| 19 | Concept: Code organization | 01:32 | |
| 20 | Our first feature: Click to edit | 00:50 | |
| 21 | Introduction to building the non-htmx form | 00:57 | |
| 22 | Adding the HTML for the add video form | 06:35 | |
| 23 | 'Add video' view methods | 07:10 | |
| 24 | Creating the new video in the database | 03:36 | |
| 25 | Installing htmx | 02:27 | |
| 26 | A clean, enable add button, without the form | 04:56 | |
| 27 | Server returns the form on-demand | 03:42 | |
| 28 | Changing our mind, adding a cancel option | 05:59 | |
| 29 | Concept: Showing the edit UI | 02:05 | |
| 30 | Concept: Creating or canceling the video creation | 01:51 | |
| 31 | Concept: Processing the form submission on the server | 01:37 | |
| 32 | What do you mean by partials? | 01:49 | |
| 33 | The jinja-partials package | 02:06 | |
| 34 | Partials: A more realistic example | 01:50 | |
| 35 | Installing jinja-partials | 03:49 | |
| 36 | Removing duplication of add video HTML | 03:54 | |
| 37 | Concept: Using partials | 01:25 | |
| 38 | Introducing active search | 00:48 | |
| 39 | Where we're headed with active search | 02:01 | |
| 40 | Create the search page skeleton | 04:06 | |
| 41 | Search text is better as an optional URL element | 01:29 | |
| 42 | Performing the server-side search | 04:15 | |
| 43 | HTML input controls for search | 02:29 | |
| 44 | Searching as they type with htmx | 07:10 | |
| 45 | Rendering the videos found in search | 04:29 | |
| 46 | Search history in the address bar | 02:21 | |
| 47 | Deep linking to search results | 04:01 | |
| 48 | Concept: Triggering the search with htmx | 01:14 | |
| 49 | Concept: Is a request htmx originated? | 01:24 | |
| 50 | Concept: Supporting deep linking | 02:02 | |
| 51 | Introducing infinite scroll | 00:53 | |
| 52 | Popular sites using infinite scroll | 01:53 | |
| 53 | Reorganizing the feed HTML for infinite scrol | 04:18 | |
| 54 | Returning a limited set of videos | 03:23 | |
| 55 | The htmx scroll trigger | 05:23 | |
| 56 | Implementing more videos on the server | 03:54 | |
| 57 | Concept: Triggering another page as you scroll | 02:24 | |
| 58 | HOWL for the finish line | 01:59 | |
| 59 | Examples first, docs second | 01:04 | |
| 60 | Core elements of the starter Flask app | 03:14 | |
| 61 | Click to edit functionality | 01:54 | |
| 62 | Jinja-partials package | 02:11 | |
| 63 | Active search with htmx | 02:16 | |
| 64 | Partial or full response? | 01:59 | |
| 65 | Infinite scroll with htmx | 02:19 | |
| 66 | Thank you and goodbye | 00:59 |
Unlock unlimited learning
Get instant access to all 65 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 1y agoDjango for Beginners/APIs/Professionals
By: LeanpubDjango for Professionals Once you have learned the basics of Django there is a massive gap between building simple "toy apps" and what it takes to build a "pro -
Updated 2y agoMachine Learning: Natural Language Processing in Python (V2)
By: UdemyWelcome to Machine Learning: Natural Language Processing in Python (Version 2). NLP: Use Markov Models, NLTK, Artificial Intelligence, Deep Learning, Machine Le22h 4m -
Updated 2y agoThe Ultimate Flask Course
By: UdemyWelcome to The Ultimate Flask Course. This course is designed to teach you everything you need to know to get started building your own Python-based web apps us28h 4m
Frequently asked questions
What prerequisites should I have before taking this course?
Before enrolling in this course, students should have a foundational understanding of Python and basic web development concepts. Familiarity with Flask will be helpful, as the course involves setting up and running a Flask app. The course does not cover introductory programming or web development concepts, so prior experience in these areas is recommended.
What kind of project will I build in this course?
The course focuses on building a web application called 'Video Collector.' Students will implement features like click-to-edit, active search, and infinite scroll using htmx and Flask. The course guides learners through creating and updating video entries in a database and includes interactive UI components without heavy reliance on JavaScript frameworks.
Is this course suitable for someone new to web development?
This course is more suitable for those who already have some experience with web development, particularly with Python and Flask. It is not designed as an introductory course. The content assumes that students are comfortable with basic web development tasks and are looking to enhance their skills with modern tools like htmx.
How does this course differ from other courses on web development?
Unlike many web development courses that focus on JavaScript frameworks like Vue or React, this course emphasizes building interactive web applications using htmx and Flask. This approach minimizes frontend overhead and leverages server-side capabilities, providing a clean and efficient way to develop Python web apps.
What specific tools or platforms will I learn to use in this course?
The course covers the use of htmx and Flask for building web applications. Students will also learn about Pydantic models, view models, and code organization. Additionally, the course introduces the jinja-partials package for managing HTML partials and reducing code duplication.
What topics are not covered in this course?
This course does not cover introductory programming or basic web development concepts. It also does not delve into JavaScript frameworks like Vue or React beyond a brief comparison with htmx. Students should seek other resources if they need foundational knowledge in these areas.
What is the time commitment required for this course?
The course consists of 66 lessons, including practical examples and concept explanations. While the total runtime is not specified, students should allocate sufficient time for not only watching the lessons but also practicing the concepts through hands-on exercises and project development.