Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Rapid Development with Flask, HTMX, TailwindCSS and AlpineJS
Rating: 4.5 out of 5(102 ratings)
1,222 students

Rapid Development with Flask, HTMX, TailwindCSS and AlpineJS

Build interactive web applications with minimal JavaScript, using server-side rendering
Created byJose Salvatierra
Last updated 11/2024
English
EnglishFrench [Auto],

What you'll learn

  • Rapidly build an RSS reader application using Flask, HTMX, TailwindCSS, and AlpineJS
  • Use server-side rendering with HTMX to update the page dynamically
  • Rapidly build interactive web applications with minimal JavaScript
  • Sprinkle in-page interactivity simply using AlpineJS
  • CSS fundamentals and how to use TailwindCSS
  • CSS flow, flex, and grid layouts and how to apply them with TailwindCSS

Course content

2 sections • 23 lectures • 2h 19m total length

  • Course welcome0:34

    Learn rapid web development with Flask, HTMX, Tailwind CSS, and Alpine JS by building an RSS reader, injecting server-side partials, adding pagination, and enabling in-page updates.

  • Temporary bug in Rye — issue with the next lecture0:21
  • Set up a modern Python project with Rye6:49

    Set up a modern Python project with Rye by initializing the repo, pinning Python 3.12, installing Flask and dotenv, and running the app inside a virtual environment.

  • Adding our external web dependencies3:00

    Add external web dependencies to your Flask app by creating templates/base.html and loading Tailwind CSS via CDN, along with HTMX and AlpineJS for dynamic updates and interactivity.

  • Build a Flask app to render a single RSS feed6:51

    Build a Flask RSS reader that parses a blog RSS feed, stores entries in a dictionary, and renders them with templates using Jinja partials and Tailwind CSS.

  • The CSS box model11:09

    Understand how the css box model uses content, padding, border, and margin to determine size, including block vs inline behavior, and how border-box sizing with Tailwind utilities simplifies layout.

  • CSS flow layout positioning8:54
  • CSS layouts: flex and grid5:29

    Explore flex and grid layouts in Tailwind CSS, learn to position items with justify content, gaps, and flex grow, and apply grid columns and column start techniques from CSS Tricks.

  • Creating our RSS feed template9:27

    Learn to build an RSS feed template in Flask using HTMX and Tailwind CSS, with a two-column grid, conditional media, and Jinja partial rendering for each entry.

  • Working with a list of different feeds in Flask4:15

    Build an interactive Flask app that lists RSS feeds and updates entries via HTMX without page reloads, using a dict mapping feed links to data and dynamic endpoints.

  • Media queries with TailwindCSS3:04

    Tailwind CSS enables responsive styling with breakpoints (sm, md, lg, xl, 2xl) and conditional classes, including color changes by size and dark mode variants, with styles co-located in markup.

  • Colors in TailwindCSS2:59

    Explore the Tailwind CSS colour palette and apply colours across text, background, border, divide, and outline utilities; define custom values in tailwind.config.js and note CDN limitations.

  • Adding a sidebar with TailwindCSS6:30

    Add a Tailwind CSS sidebar that hides on small screens and fixes on large screens. Implement a scrollable feed area with highlighted active items and htmx boosted links for updates.

  • When should you use partials vs. components?0:22
  • Adding dynamic pagination to our app9:57

    Implement dynamic pagination in a Flask app using htmx, showing five entries per page and a load more button that replaces itself with the next page via hx-get and hx-swap.

  • Adding a read status to articles, and updating the page without reloading9:59

    Add a read status to feed entries by marking reads via a Flask endpoint, store state in a dictionary, and update the UI with AlpineJS and Jinja.

  • Event dispatching and handling with AlpineJS7:22

    Display an unread count in the sidebar by filtering feeds with Jinja reject attr, then use AlpineJS event dispatch to decrement the counter when articles are read.

  • Letting users create new feeds (showing and hiding elements with AlpineJS)16:05

    Enable users to add new RSS feeds via a form, including URL, title, and show images, and render the form with HTMX or AlpineJS in a Flask app.

  • How to work with SVG icons in a Flask project5:02

    Add phosphor icons to a Flask project by creating a Jinja2 icons file with hamburger and closeX macros, choosing CDN or copied icons, and style with Tailwind CSS using currentColor.

  • How to create a mobile sidebar with TailwindCSS and AlpineJS10:49

    Build a collapsible mobile sidebar with Tailwind CSS and AlpineJS, refactor the sidebar into a reusable macro, and add a small-screen button to toggle a backdrop and close control.

  • How to animate a mobile sidebar with a sliding animation8:39

    Animate a mobile sidebar with AlpineJS using x show and x transition to slide in from left, fade the backdrop, and cloak elements until the script runs with Tailwind CSS.

  • Course conclusion, and thank you0:44

    Express gratitude while emphasizing rapid development with Flask, HTMX, TailwindCSS, and AlpineJS. Build a simple, deployable single Flask app, and scale later with databases and caches to reach product-market fit.

Requirements

  • Intermediate programming knowledge required, preferably with Python
  • Knowledge of Flask will be helpful as the course is fast-paced
  • No CSS, TailwindCSS, or JavaScript knowledge required

Description

Do you want to build interactive web applications quickly and simply?

Python with Flask, HTMX, TailwindCSS, and AlpineJS is a complete stack of technologies to build interactive, engaging web applications without having to write (almost) any JavaScript.

This means you can use your existing Python knowledge without having to learn a completely new language to build your web project.

Traditionally, building a web application without JavaScript would mean a slow and sluggish experience, with lots of page reloads at every button or link click.

With HTMX and AlpineJS, we can avoid almost all page reloads, and craft server-side rendered applications that feel fast, responsive, and engaging.

This includes things like adding pagination, hiding and showing elements, and updating page state.

Adding TailwindCSS into the mix will help us write our CSS quickly and efficiently.

In the course, we build an RSS feed reader that loads data from the internet to display articles from feeds you follow. It's a great project to get familiar with these technologies, and in no time you'll be building your own interactive web applications.

The course contains:

  • Use Flask to create a web application.

  • CSS fundamentals and how to apply them with TailwindCSS.

  • Avoid page reloads with HTMX by making requests to your backend and swapping parts of the page content.

  • Add in-page interactivity simply with AlpineJS using state and event dispatching.

  • Learn about CSS flex and grid to create a commonly used page structure with a sidebar and main content.


I'm sure you'll enjoy this course. See you on the inside!

Who this course is for:

  • Intermediate Python developers who want to quickly build their web application projects
  • Front-end developers who want to understand how to build server-side rendered applications
  • Developers who want to learn about web development, including HTML and CSS

Report abuse