HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript

Ғылым және технология

Learn HTMX by creating a couple of small projects with a Node.js and Express backend, including a contacts search, temperature converter, mock weather app with polling and form validation component. We will learn about the common HTMX attributes like hx-get, hx-post, hx-swap, etc.
Final Code:
github.com/bradtraversy/htmx-...
Alpine Crash Course:
• Alpine.js Crash Course
Check out my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - / traversymedia
Instagram - / traversymedia
Facebook - / traversymedia
Linkedin - / bradtraversy
Timestamps:
0:00 - Intro
3:42 - Node.js/Express Server Setup
9:23 - Simple request with hx-get & hx-trigger
11:12 - hx-swap
11:58 - Route to get a list of users
16:04 - hx-target
17:00 - hx-confirm
17:30 - Get users from jsonplaceholder
18:40 - hx-indicator
21:06 - hx-vals
23:27 - Temperature converter with hx-post
29:44 - Polling
33:23 - Mock weather app with polling
36:44 - Contacts search widget
39:50 - Backend route for search
47:08 - Inline form validation
50:12 - Backend route for validation
56:01 - Wrap up

Пікірлер: 232

  • @anggaradotnet
    @anggaradotnet2 ай бұрын

    If one day a lot of people manage to create an app that revolutionizes the world, they should thank you for making such clear tutorial. Thank you so much! HTMX is cool!

  • @jkiamafish
    @jkiamafish3 ай бұрын

    You are the only person who has mad an actually valuable HTMX tutorial, to my knowledge. I needed to learn this for school and the docs were not super helpful for getting started. I'm 12 minutes in and I now understand how to get HTMX running.

  • @BGdev305

    @BGdev305

    16 күн бұрын

    I was just thinking the same thing! This is because he's a really good "teacher".

  • @user-yq4gk7th6m
    @user-yq4gk7th6m4 ай бұрын

    I have been exploring HTMX for the past few days and trying to build a todo app using the BETH Stack, which includes Bun, Elysia, Turso, and HTMX. This video has come in handy! Thank you!

  • @anakobe
    @anakobe4 ай бұрын

    Always there for the community! Thanks Brad!

  • @joel-rg8xm
    @joel-rg8xm3 ай бұрын

    heck of a "how a Crash Course should be", nice variety of mind-opening mini projects as well. Kudos

  • @nizamuddinshaikh3185
    @nizamuddinshaikh31853 ай бұрын

    A simple but lucid explanation of HTMX. Anyone can use this as a stepping stone in further advancement in web development. Thank you Brad for sharing. 😃

  • @gedaredorke5941
    @gedaredorke59414 ай бұрын

    First of Happy New Year to Brad. Your Crash Courses provide a wealth of knowledge and they always lay the foundation for exploring in-depth topics. Looking forward to more content this and hope that this year will be extremely great year for you.

  • @veenmikki27
    @veenmikki274 ай бұрын

    It's great to finally get a good HTMX tutorial. Happy New Year Brad and thanks for the great tutorials.

  • @MarkVolkmann
    @MarkVolkmann4 ай бұрын

    Excellent video! Thanks for sharing it! When picking a server-side stack, I think it’s a good idea to choose one that has good support for generating HTML (not just string concatenation) and has tooling support that gives syntax highlighting and understands what is valid in HTML.

  • @davidriveros5422
    @davidriveros54224 ай бұрын

    I was searching for an HTMX guide to start my next project, this came up right on time. This was a great tutorial, thank you!

  • @scotthallett
    @scotthallett4 ай бұрын

    Amazing! Been waiting for a course on this - Thank you Brad! Happy New Year.

  • @zapphoddbubbahbrox5681
    @zapphoddbubbahbrox56814 ай бұрын

    htmx, finally ;) You've just scratched the surface... Hope you will continue on this path as, IMO, you are probably the only YT coding instructor that is clear and devoid of fast-edit/fast-speak. Thanks!

  • @outwithrealitytoo

    @outwithrealitytoo

    2 ай бұрын

    My pet peeve is demos where the person keeps having to retype things because they are trying to talk and type at the same time. "Every once in a while... fine... but that's the third line in a row you've have at least three stabs at... and you have code completion switched on".

  • @giuzp95
    @giuzp954 ай бұрын

    Wow, what a treat! I've been looking for a quick and simple tutorial for HTMX. Thank you!

  • @user-yx1ic8kv5s
    @user-yx1ic8kv5s4 ай бұрын

    New Years gift from Brad is here! Thank you a lot! 😊

  • @NoahNobody
    @NoahNobody4 ай бұрын

    I'm really happy you took an interest in HTMX. I've been using it for personal projects and am very happy with it.

  • @wazeeharaa8100
    @wazeeharaa81003 ай бұрын

    The Excellent! Clear Notch Voice, Pace and Modulation which makes easy understanding

  • @gbengaomoyeni4
    @gbengaomoyeni44 ай бұрын

    Thank you Brad, the best and award-winning programming instructor in the world. Keep up the good work. May the good Lord bless you and water your garden as you water ours. Happy new prosperous year.

  • @ryandsouza7100
    @ryandsouza71004 ай бұрын

    Thank you Brad. Had been waiting for this one.

  • @codybishop7526
    @codybishop75264 ай бұрын

    I'm in love with this. It makes reasoning about what is going on, so much simpler than react. God, hooks and the complexities of react these days just makes my head hurt. This is so elegant, minimal and wonderful. Here's to hoping that HTMX becomes a web standard and breaks us away from these overly complex "solutions".

  • @arnaudpoutieu1331
    @arnaudpoutieu13313 ай бұрын

    Hey Brad, I wish you all the best for 2024!!! Regarding the vid, this is the best one I have seen about HTMx thanks 👍🏿

  • @adrianmisak07
    @adrianmisak07Ай бұрын

    that was just amazing… thank you, I needed an introduction to htmx, and this was better than i could have hoped for

  • @samnako
    @samnako4 ай бұрын

    Happy new year to you Brad. Thanks again for enriching our learning. Wishing you good health in 2024.

  • @TraversyMedia

    @TraversyMedia

    4 ай бұрын

    Thank you 😊Same to you!

  • @SiteStudio
    @SiteStudio3 ай бұрын

    Love seeing more HTMX knowledge content popping up.

  • @mohammadjalifathi6193
    @mohammadjalifathi61934 ай бұрын

    Brad we really need a full great next js course I really love your courses

  • @TraversyMedia

    @TraversyMedia

    4 ай бұрын

    Working on it next (pun intended)

  • @Sergatx
    @Sergatx4 ай бұрын

    Awesome, I’ll have to actually watch this course soon, I’m still learning some JS. From what I’ve seen online, lot of the content surrounding Htmx makes it seem like it’s not a serious thing.

  • @rangabharath4253
    @rangabharath42534 ай бұрын

    Impressive as always Brad. Just want to notify the fellow developers if you are facing an issue while running the project as fetch is not defined. Please install node-fetch package and import it in server.js. import fetch from "node-fetch"; Thanks

  • @therealnoel.
    @therealnoel.4 ай бұрын

    Yes 🥂. That's the course I've been waiting for. I literally used the documentation to learn it 6 months ago - something I never do 😂. Anyways, Happy New Year Brad 🎉

  • @chrisnortonjr
    @chrisnortonjr4 ай бұрын

    Whenever I want to learn something, I always check your channel first man.

  • @stiofanmacthomais
    @stiofanmacthomaisАй бұрын

    Excellent overview - easy and clear to follow along!

  • @NNNedlog
    @NNNedlog4 ай бұрын

    I just finished watching the tutorial. Thanks a lot for these videos sir, I really appreciate you and your efforts

  • @MarkusEicher70
    @MarkusEicher704 ай бұрын

    Hi Brad and hello community. Thank you for this intro to HTMX. I like the simplicity and the low footprint of HTMX. I want to use it with Rust and now need to figure out how. Overall it looks very nice. May you all have a great 2024!

  • @Bargains20xx

    @Bargains20xx

    7 күн бұрын

    I will be doing the same, there is something about performance that's very fascinating

  • @omomer3506
    @omomer35064 ай бұрын

    Following your github i always know new video is coming when you have a new repo, love it

  • @MrPanzerDragoon
    @MrPanzerDragoon4 ай бұрын

    Thanks for posting this!

  • @atibyte
    @atibyte4 ай бұрын

    I was waiting for an HTMX video from you. Thanks for posting!

  • @DarrelDavis
    @DarrelDavis4 ай бұрын

    Great video. It's what I needed to get on with HTMX. Thanks.

  • @abrafgesvbeac3676
    @abrafgesvbeac36762 ай бұрын

    I love you! ♥ Learning from your courses since 2019

  • @smddev
    @smddev3 ай бұрын

    This crash course was extremely helpful for a school project I’m working on.

  • @tanaht23
    @tanaht234 ай бұрын

    HTMX... by Traversy MediaX >> Happy New Year BradX ! Thank you.

  • @blue_mustang_
    @blue_mustang_4 ай бұрын

    Thax Brad.This is really cool! Happy new year!

  • @TraversyMedia

    @TraversyMedia

    4 ай бұрын

    Happy New Year!

  • @donovan8031
    @donovan80314 ай бұрын

    Thanks Brad, been curious about HTMX.

  • @tomasnovellino5980
    @tomasnovellino59803 ай бұрын

    That's a great video. I loved it. I kinda don't like the fact you still have to kinda pre-render or generate front-end HTML(X) code from the back-end. But I can also see how a multi tiered app can have a pseudo back-end just as a bridge between front-end and proper backend responses. I can't wait to try it

  • @paulthomas1052
    @paulthomas10524 ай бұрын

    Thanks for another great demo !

  • @stronglycorrelated
    @stronglycorrelated5 күн бұрын

    Great tutorial, gets straight to the point.

  • @JavedURRehman
    @JavedURRehman3 ай бұрын

    Thanks Brad, this is really a great introduction of HTMX.

  • @dee.s.4513
    @dee.s.45134 ай бұрын

    A book fitted into a 58 min video. HTMX is really amazing; hope there are no caveates. The code you give is so multi-utility. Thank you Brad! (Would be so happy to see more on Express.js from you.)🌻

  • @abhinavadarsh7150

    @abhinavadarsh7150

    4 ай бұрын

    Book(Hypermedia systems) is more than htmx tutorial. Its about what hypermedia is? why we should use it? What REST really means...

  • @The-Untitled-One
    @The-Untitled-One4 ай бұрын

    KZread Intro Tutorials are a requirement nowadays for people who cant even understand the documentation. Videos like this actually explain what you should/and should not do and I appreciate that. ❤ If more tutorials are done like this first, developers will understand the documentation better. Then they will he able to use these "steel lego bricks" to build "tools" to build components that (feel) very easy to reuse. You are the first best teacher on these things and I appreciate that. ❤ Thank you. ❤️

  • @azizkira7505
    @azizkira75054 ай бұрын

    Happy new year 🎉🎉 And thanks a lot because of you i learn dev the way it's supposed to be ❤❤❤❤❤

  • @user-zs6bp4qu8j
    @user-zs6bp4qu8j4 ай бұрын

    Great content! Thank you for this tutorial. Happy New Year. Do you have tutorials for framework agnostic components ? Like say LitElement or Adobe Spectrum ?

  • @judevector
    @judevector4 ай бұрын

    You never disappoints always coming through for the community when needed the most, now I can finally learn HTMX. Videos I have been seeing are not worth it Thank you and Happy New Year to everyone 💖🥳

  • @TraversyMedia

    @TraversyMedia

    4 ай бұрын

    Thanks so much. Yeah surprisingly, not a lot out there as far as content on HTMX. Happy New Year!

  • @user-bf6yx4nn5k

    @user-bf6yx4nn5k

    4 ай бұрын

    Also here to learn this new paradigm. Happy new year 🎉

  • @marilynlucas5128

    @marilynlucas5128

    3 ай бұрын

    @@TraversyMedia You should do a codux tutorial

  • @noodlespwn42

    @noodlespwn42

    3 ай бұрын

    you know you can read the docs ?

  • @ehabbustami7691
    @ehabbustami76913 ай бұрын

    thank you very much for a very useful course. It would a great addition to have another course on both HTMX and Alpine.js from your experience how to get the best of these two libraries.

  • @Andy-vh3ns
    @Andy-vh3ns4 ай бұрын

    This is awesome, thank you for sharing! =)

  • @jamesbell8148
    @jamesbell81484 ай бұрын

    The man is backkkkk 😊

  • @Rajisunusi
    @Rajisunusi4 ай бұрын

    I was about to email you and recommend this crash course.

  • @gnuter3000
    @gnuter30003 ай бұрын

    Mr Traversy! can you read my mind? I needed this htmx intro from YOU!!! Over the years I learned a lot from you. By the way: your voice sounds like having a cold?!

  • @ukaszzbrozek6470
    @ukaszzbrozek64704 ай бұрын

    Thank you for the tutorial ! It was very interesting. We should think of HTMX as a replacement of back end templates 🤔

  • @nftsasha
    @nftsasha2 ай бұрын

    Really great, thanks dude!

  • @scoppyeah
    @scoppyeah4 ай бұрын

    Brilliant as always

  • @LalitKumawat53
    @LalitKumawat534 ай бұрын

    Happy New Year! 🎉

  • @PhilParadis
    @PhilParadis3 ай бұрын

    Very nice intro; I’ve seen others use it in videos but none yet who explained it as well or as thoroughly. PS The regex for email addresses is outdated now ICANN has allowed vanity TLDs; there are now plenty of TLDs >4 characters.

  • @matteyahmed8956
    @matteyahmed89563 ай бұрын

    Great HTMX Crash Course . **thumbs up**

  • @evanter8180
    @evanter81802 ай бұрын

    Thank you for this amazing tutorial. I think you could explore more the potential of HTMX and Django in another tutorial, showing how to manipulate fetched data with jinja or post processing after a POST request. A CRUD application with python, django and htmx will be welcome.

  • @HuynhLuong227
    @HuynhLuong2274 ай бұрын

    Thank for sharing 🎉🎉🎉

  • @harpo187bling
    @harpo187bling4 ай бұрын

    Thanks Brad!

  • @markg1netsg
    @markg1netsg3 ай бұрын

    Hey Brad, great tutorials as per usual, quick question, if the form is updating some other part of the page like adding an item to a list, how do you clear out the form with htmx after updating the list - thanks

  • @demystifyingdev
    @demystifyingdev4 ай бұрын

    Thanks for doing this... just what people need to progress beyond the htmx example page and/or learn python for backend... question: have you considered Astro partials as "backend" for HTMX???

  • @TomNook.
    @TomNook.4 ай бұрын

    Happy new year Brad

  • @alnahian2003
    @alnahian20034 ай бұрын

    New Year started with this big ka-baooom from Brad Thanks so much for making the first day of the year so special

  • @owenwexler7214
    @owenwexler72143 ай бұрын

    Excellent video and a very good primer for HTMX. Very important note: anyone using HTMX to make a user-facing production project that takes user input should use a templating system that escapes user input to send the HTML as part of whatever backend stack they choose. res.send()ing raw HTML in strings is a big XSS vulnerability, as someone could easily inject a tag that does bad things into unescaped user input.

  • @PaulSpades

    @PaulSpades

    3 ай бұрын

    User input needs to be sanitised before it gets stored, in your backend controller. All input checks need to be performed on the server, not in the browser - because all users and malicious agents have full control of their browser (not just a text input), including js scripts. Escaping text input twice is also a common problem in inexperienced projects.

  • @LongJourneys
    @LongJourneys4 ай бұрын

    YASSS I'm loving HTMX so far. I'm trying to move away from stuff like React/Vue as much as possible.

  • @prashlovessamosa
    @prashlovessamosa4 ай бұрын

    Happy New Year Brad

  • @skyy_banerjee
    @skyy_banerjee4 ай бұрын

    Happy New Year sensei 🎊

  • @teaman7v
    @teaman7v3 ай бұрын

    Thank you for this

  • @OhFega
    @OhFega4 ай бұрын

    Thanks Brad

  • @razdelovski
    @razdelovski2 ай бұрын

    thanks for the great tutorial imho, implementation of the email validation though doesn't look like a good practice - having that complex piece of markup both in the frontend and backend is an issue in case that markup needs to be updated, it would be better to use a dedicated separate element to hold the validation message and only fetch that from the backend, keeping markup and styling only in the frontend

  • @Ipadstands
    @IpadstandsАй бұрын

    Thanks for the introduction. I am not a web developer and have stayed away because of the Giant Complex frameworks. Maybe certain sites like FB need those beast frame works but probably 80% of web sites do not. IMHO. So a easy to learn , expressive functionality and ease to maintain like this HTMX appears is a good thing., It would be neat to see a KZread tutorial building a site like this KZread web page I am editing this comment in. Any Takers ?

  • @Woeden
    @Woeden4 ай бұрын

    This is so magical wtffff

  • @user-tg8yf7sg8g
    @user-tg8yf7sg8g3 ай бұрын

    Great Brad ! A quick question - Since we don't use JS at client side , there is no way to do some client validations ? Lets say , we want to validate email format at client side before even hitting the server ?

  • @TomislavMiletic
    @TomislavMiletic3 ай бұрын

    Big thank you👏👏

  • @StannYo
    @StannYo4 ай бұрын

    Thanks ! Is htmx a good addition for the app developped in the course "PHP From Scratch 2024" ?

  • @likandokayombo
    @likandokayombo4 ай бұрын

    Helpful video

  • @arijitRoyFullyStressedOut
    @arijitRoyFullyStressedOut3 ай бұрын

    thanks, more HTMX videos please.

  • @AtacamaHumanoid
    @AtacamaHumanoid3 ай бұрын

    I saw people on Twitter regularly mocking htmx for reasons I didn't understand. I think some were saying it opens up security issues that haven't been around since the earlier days of javascript, but then I saw other people saying "nu-uh, you don't know what you're talking about" and explaining why their claims were wrong. But, after seeing that whole conversation a couple times, I gave up trying to figure out who was right because I'm trying to learn other stuff right now.

  • @Readraid_
    @Readraid_2 ай бұрын

    > uses htmx to avoid writing js > node js server backend

  • @peterkulik5943
    @peterkulik59433 ай бұрын

    Everywhere I hear about "no-js," "0% js," etc. Is htmx suitable for enterprise-level web applications? Can someone provide an example where htmx is used with a normal datagrid-like functionality? I'm not referring to a basic table but rather features such as column resizing, drag-and-drop movement, etc. Something like AgGrid.

  • @grandpowr
    @grandpowr4 ай бұрын

    Really liking what I'm seeing, I vastly prefer this style over what Next does currently (but still a must to learn because of jobs requirements), simplicity is king always

  • @pjosxyz
    @pjosxyz2 ай бұрын

    thanks Brad

  • @charlesbaldo
    @charlesbaldo2 ай бұрын

    This reminds me of the goal for originial Angular

  • @pratiyushs381
    @pratiyushs3814 ай бұрын

    Happy new year

  • @m3w7ub3
    @m3w7ub34 ай бұрын

    I wasn't sure if I should learn Vue or HTMX for my next project and I just happened to look at my notifications. HTMX it is.

  • @Hit307
    @Hit3074 ай бұрын

    Imagine using Htmx and Tailwind in your project... No comment , HTMX powerfull!💀

  • @Nab_001
    @Nab_0013 ай бұрын

    this Course was easy to follow, especially for those who already has ExpressJS background. HTMX is a great solution for applications that primarily focus on AJAX interactions and that doesn't require complex UI. it looks like it still worth to learn alongside with it React or any other popular framework to perform complex stuff like using websockets or using an API type other then REST (tRPC for example), am I wrong?

  • @mycloudvip
    @mycloudvip3 ай бұрын

    Awesome content! Where can I find your courses ONLINE? Kudos!

  • @berndeckenfels
    @berndeckenfels3 ай бұрын

    Btw beware injection attacks if you render html from the server and don’t use protection there (that’s better with the automatic quoting of eg angular)

  • @d.dwijanto
    @d.dwijanto3 ай бұрын

    Being a developer since the Netscape era, discovering htmx has been a delightful journey back to basics for me. This tutorial is particularly outstanding: it's not only easy for beginners to grasp, but it also comprehensively covers the key aspects of htmx in a single video. It's rare to find such an effective blend of simplicity and depth. Thank you for this enlightening tutorial.

  • @lolibonmamo3410
    @lolibonmamo34104 ай бұрын

    hello sir thank you for your best tutorial of js 12 hours,i have finished js tutorial 12 hrs shall i proceed to this one?

  • @vectoralphaAI
    @vectoralphaAI3 ай бұрын

    This is cool. Anything that lets me not write any JS is a plus. Man, i hate JavaScript.

  • @serychristianrenaud
    @serychristianrenaud4 ай бұрын

    Thanks 👍

  • @amarnathgangurde8979
    @amarnathgangurde89794 ай бұрын

    Damn 🔥

  • @ChristiaanHunter
    @ChristiaanHunter3 ай бұрын

    what theme are you using in VS code which makes your html tags green please? (mine are blue tags) I looked though a few videos of yours but this I could not find. Thanks

  • @majdeddinebentahar5434
    @majdeddinebentahar54344 ай бұрын

    hey brad, is your laravel course will be soon available?

Келесі