HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript

preview_player
Показать описание

Final Code:

Alpine Crash Course:

Check out my courses:

Social Media:

Timestamps:
0:00 - Intro
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
  1. Traversy Media
  2. htmx
  3. htmx tutorial
  4. htmx crash course
  5. hyperscript
  6. hyperscript attributes
Рекомендации по теме
HTMX Crash Course 0:56:47

HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript

Htmx crash course 0:01:28

Htmx crash course dynamic pages without writing any javascript

HTMX & Node.js 0:13:21

HTMX & Node.js Crash Course for Beginners | Build Dynamic Web Apps

Dynamic Web Pages 0:20:05

Dynamic Web Pages Without JavaScript? - Intro to HTMX

The HARDEST part 0:00:28

The HARDEST part about programming 🤦‍♂️ #code #programming #technology #tech #software #developer...

Best Programming Languages 0:00:16

Best Programming Languages #programming #coding #javascript

Django Dynamic Forms 0:48:27

Django Dynamic Forms Tutorial with Htmx

100+ Web Development 0:13:18

100+ Web Development Things you Should Know

Next JS 15 0:07:40

Next JS 15 Crash Course for Beginners | 17 Show Blog Posts

HTML in 5 0:05:12

HTML in 5 minutes

Web Design Timelapse: 0:00:21

Web Design Timelapse: Nike Homepage | Wix Studio (Webpage Design)

The Only Markdown 0:22:16

The Only Markdown Crash Course You Will Ever Need

HTML Form Crash 0:20:28

HTML Form Crash Course | For Beginners

Alpine.js Crash Course 0:42:02

Alpine.js Crash Course

Python WEB SCRAPING 0:00:32

Python WEB SCRAPING in 30 Seconds! 🔥👨‍💻 #shorts

10 CSS Pro 0:09:39

10 CSS Pro Tips - Code this, NOT that!

This Advanced Flexbox 0:00:57

This Advanced Flexbox Trick Is Amazing!

JavaScript Tutorial for 1:37:14

JavaScript Tutorial for Beginners [JS Crash Course 2024]

The 5 most 0:00:51

The 5 most HATED programming languages 👩‍💻 #programming #technology #software #career

4 Beginner Coding 0:00:16

4 Beginner Coding Project Ideas To Start Your Web Dev Portfolio (HTML & CSS only)

Learn HTML & 1:58:41

Learn HTML & CSS in 2022 | Crash Course

Bun Crash Course 1:07:29

Bun Crash Course 2023 with HTMX example

Learn DOM Manipulation 0:18:37

Learn DOM Manipulation In 18 Minutes

SVG Explained in 0:02:20

SVG Explained in 100 Seconds

Комментарии
Автор

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!

anggaradotnet
Автор

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.

jkiamafish
Автор

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

joel-rgxm
Автор

Hands down, this is the best HTMX tutorial on YouTube!

aham.manishverma
Автор

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!

zapphoddbubbahbrox
Автор

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. 😃

nizamuddinshaikh
Автор

Always there for the community! Thanks Brad!

anakobe
Автор

After 10:30 if you wondering why the button press not loading the JSON as the author shown here, that is because of some config change. Add `<meta name="htmx-config" to the <head> section you will be fine after that.

aruprakshit
Автор

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.

gbengaomoyeni
Автор

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

samnako
Автор

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

veenmikki
Автор

At 10:30 you may get an "htmx:invalidPath" error in your console when trying to fetch data by clicking the button. Adding the following to your index.html should fix it:

<meta name="htmx-config" content='{"selfRequestsOnly": false}' />

Great video so far! Thank you.

king.trismegistus
Автор

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.

MarkVolkmann
Автор

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".

codybishop
Автор

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 💖🥳

judevector
Автор

YouTube 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. ❤️

The-Untitled-One
Автор

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 <script> tag that does bad things into unescaped user input.

owenwexler
Автор

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

АртурЮсупов-ющ
Автор

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

mohammadjalifathi
Автор

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!

MarkusEicher