HTMX Tutorial for Beginners #1 - What is HTMX?

In this HTMX tutorial series for beginners, you'll learn what HTMX is, and how to make dynamic web applications with it.
🔥🥷🏼Get access to premium courses on Net Ninja Pro:
netninja.dev/
📂🥷🏼 Access the course files on GitHub:
github.com/iam...
📂🥷🏼 Starter project on GitHub:
github.com/iam...
🧠🥷🏼 HTML & CSS Crash Course:
• HTML & CSS Crash Cours...
🧠🥷🏼 Node.js & Express Crash Course:
• Node.js Crash Course T...
🔗🥷🏼 HTMX docs:
htmx.org/docs/

[@abhinavadarsh7150]

As a CEO of HTMX I would like to say to everyone - Trust the process 🙏

[@mzohaib27]

ja ja tur ja praaan..... 😂😂😂😂

[@QGXN]

😂😂

[@98f5]

Ceo of a github repo 🎉 i like the energy

[@user-tw2nw2up7g]

CEO of facebook. good luck

[@naranyala_dev]

finally, it's coming

[@mschwanitz]

Yeah Baby! This is what I've been waiting for!!! I've been using HTMX with Astro for several months to build an app that is destined to fail. Can't wait to watch this series and see how a real engineer does it. :)

[@jay_wright_thats_right]

What is a real engineer? He shows the most basic things and I think you don't know what an engineer is. SMH

[@shayokhshorfuddin2576]

Lets go!! ✨✨

[@bmehder]

I'm inpatient, so I am about to go buy the course from your website. I would like to suggest a follow up series using AlpineJS to add interactivity to the frontend. I hear that HTMX and AlpineJS provide a nice development experience together.

[@NetNinja]

Thanks for your support and also for the suggestion :)

[@this.channel]

In my experience as a backend guy, I use one or the other depending on the thing i need to do.

[@nickmurdaugh9856]

Alpine and HTMX are great together. The project I've been working on for work the last few months is with Alpine, HTMX, and Django, and it's been excellent to work with. Along with DaisyUi, I call it the ADHD stack.

[@clevermissfox]

This is so exciting🎉

[@BekBrace]

Great Tutorial as always 😊

[@vladimirmryscuk8409]

Net Ninja, thank you very much for your effort!

[@SUlutas]

Thanks for the series. Please re-order the playlist videos. ;)

[@NetNinja]

Done!

[@TheStoibz]

The issue I have found is that no complex examples are out there for HTMX. For example replace a small react SPA. What should the file structure look like? Components a good option? Anyone can build simple apps but complex are tough. Appreciate the tutorial, as always, just wish it went deeper! It says for beginners in the title I know!

[@housemajaliwa]

Watched this and bought the course right away. Got the whole weekend to learn HTMX the right way. Thank you

[@jay_wright_thats_right]

You can simply read the documentation. 🤣🤣🤣🤣🤣🤣🤣🤣

[@housemajaliwa]

@@jay_wright_thats_right true

[@ozanmuyes]

I was waiting for this... 🙏🏻

[@NetNinja]

Awesome, hope you find it helpful! :)

[@joy-jitsu]

I was waiting for it 😃 thanks a lot 😌

[@birsingh5388]

Looks like a great tutorial, I want to learn HTMX.

[@allisterfiend_2112]

Thanks!

[@NetNinja]

You're welcome, and thank you so much for the tip :)!

[@jay_wright_thats_right]

THIS is how you say thanks.

[@housemajaliwa]

Just completed the beginner course. Got to say, value for money >>>

[@NetNinja]

Legend! thanks :)

[@davidconnelly]

Just to let you know, I did a live stream tonight where I mentioned this series. I've taken that down because I had some troll come along and he basically ruined it. Nevertheless, it's just to say, I was complimentary. What you're doing is good. I do have concerns about (what I'm calling) 'rewrite culture' and that was discussed in my live stream. However, that issue has nothing whatsoever to do with you. So, thanks for what you're doing. It's a great channel (clearly!) and all the best to you. Your training is excellent.

[@RobbPage]

it's funny how your demo has brandon sanderson books, a writer who churns out quality novels monthly, and then patrick rothfuss, who might even be lazier than grr martin when it comes to writing. looking forward to this series (your tutorial, not the books!)

[@NetNinja]

Patrick Rothfuss is killing me... I've given up hope of ever reading that 3rd book :(.

[@fakepants]

Perhaps the real Doors of Stone were the Waystones we passed along the way?

[@ggsheet]

I needed this!!!!

[@fortunatmutunda4194]

Finally 😄

[@bothorsen4292]

I had hoped this would be a good series. But using javascript in the backend is a trend that must die as soon as possible. I may still watch this for the HTMX content, though

[@kuntaldey4471]

Hey Ninja, can we make websites using HTMX, CSS and Python only, without learning JavaScript?

[@SAMUEL__DEV2]

I'll love to learn this library

[@gokusaiyan1128]

Hi shaun, my issue with frontend is I can never style anything properly, I know basics of css but it's just I have no visual ux/ui intelligence , can't fit anything properly. Also there is so much stuff in frontend i get confused. can you just tell me a basic stack that I can stick to?

[@jay_wright_thats_right]

You're not a designer. You build things based on what designers hand to you.

[@this.channel]

Hey, It's my favorite JS library!!!

[@LukePuplett]

This with new view transitions smells like the simple future and I'm only 4 minutes in

[@fredriksandebert7450]

Nice tutorial. Even better in 0.75x to better hear what you're saying. 😊

[@NetNinja]

Haha, thank you Fredrik!

[@tertiusscheepers8357]

NN love your work but -> Why you talking so fast, lukely YT added speed controls. @shaun can you enlighten me, why would i use HTMX instead of PHP -> PROs and CONs 🙏 Thank you 🙇‍♂

[@KTUMBA-qb4rk]

would have loved to to see it in Django, and creating dynamic drop downs

[@NetNinja]

I do have plans for HTMX with Django :)

[@nickmurdaugh9856]

In the mean time, Bug Bytes does a massive series on HTMX with Django.

[@WinnerSingh]

Can you make the video on Swift IOS app for simple form(resume, feedback, query application) include data base and also receive email.

[@bilkisuyahaya1614]

Would you advice learning a beginner to learn react or HTMX

[@SusanthCom]

@netninja How good HTMX plays with search engine optimization ?

[@juanmacias5922]

LFG! Server Side Rendering is the way!

[@iBen-jz5xz]

That'll be slow for applications with large large concurrent users.

[@juanmacias5922]

@@iBen-jz5xz ah yes, that's something to worry about when you actually have a large user base. Not needlessly optimizing now.

[@iBen-jz5xz]

@@juanmacias5922 I do a lot of serverless web apps so am very conscious about 'execution minutes'. That's just why I have that pov.

[@user-iy1ch3lv3h]

Ruby, then Ruby on rails pls

[@SciMoTeAr]

No

[@Elduque40]

Awesome

[@alaminiumar]

Thanks 🎉❤

[@patolorde]

NICE!

[@user-vl4gh7pt3d]

awesome thanks a lot.

[@NetNinja]

Thanks for watching :)

[@sauravsingh4497]

Just what I wanted One request can you please do full stack apps using htmx and go?

[@juanmacias5922]

I'll be honest, I was a bit bummed he didn't pick go ha

[@NetNinja]

I think over time, I will create a few different HTMX playlists - some with Go, some with Django etc.

[@sauravsingh4497]

@@NetNinja that would be really cool Appreciate your effort.

[@proteus1]

Does this work for linking a contact form to gmail?

[@truthteachers]

Bro, why use Nodejs and Express? Will not work on plain HTML? This is what the HTMX site says " htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML". Can this course be for beginners when the poor newbie has to know Nodejs and Express?

[@NetNinja]

You don't need to really know much about node & express, I do walk through all the express setup. The course keeps the focus mainly on HTMX, but we still need a server to send back HTML responses - that's the crux of HTMX.

[@truthteachers]

@@NetNinja May be. But it still adds a lot of confusion, noise and distraction.

[@benoitbuyse7811]

You NEED a backend. You cannot use HTMX without a backend! Creating a backend with Express is as simple as it gets.

[@monoq_]

Hi Shaun.

[@theroboticscodedepot7736]

You don't need HTMX to do any of this. So what I want to know is how is it better than standard techniques?

[@georgikyshenko4380]

Sounds less scalable for enterprise apps

[@mijunakano2955]

Is it new?l have never heard

[@h20streams]

Hi, can you combine html with htmx?

[@jay_wright_thats_right]

Huh? Are you looking at the same code I'm looking at?

[@fun2rideadventure]

LIT JS?

[@peterenglish3720]

🌹🌹🌹🌹🌹

[@optimal1993]

why learn this over React or NextJS?? just curious is it more in demand in todays job market or ?

[@MrKooops]

no, htmx is not a framework. you learn this additionally, it's easy. just learn the concept and you'll know when to use it.

[@juanmacias5922]

I'd say if you are a backend dev (because you are basically just building a server that responds to api calls with html, aka Server Side Rendering) who needs to build a quick frontend, HTMX is the way to go.

[@drivebuss8079]

I am one of the gangs

[@tryingtobebetterr]

Add timestamps to your videos, please

[@roywilliamvermeulen]

We are going to use htmx so we don't have to use javascript. Proceeds to use javascript on the backend lmao.

[@NetNinja]

You still need a backend. The idea here is that we don't need to use additional JS in the browser.

[@abishektamilan9733]

Pls don't use node js cause I hate js just make php with htmx it's good for freelancers 😢

[@Pareshbpatel]

{2024-07-03}

[@PiyushSharma12479]

Lfg

[@cwhyles]

I have been around web technologies almost from the beginning, and the first thing you should have done is define this strange word ‘hypermedia’. I understand everything that you claimed was ‘hypermedia’, but could not understand why it needed this word. So I gave up watching.

[@FXLinc]

take a breath and slow down man.

[@NetNinja]

You can always adjust the playback speed on KZbin if it's a little fast :)

[@FXLinc]

@@NetNinja useless... your ego has outgrown your channel. Thanks anyway and goodluck

[@TesterAnimal1]

So you can make forms. Wow. 🥱