Net Ninja
Net Ninja
  • 2 380
  • 180 976 202
HTMX Tutorial for Beginners #10 - Swapping Content (more practise)
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/iamshaunjp/htmx-for-beginners
📂🥷🏼 Starter project on GitHub:
github.com/iamshaunjp/htmx-for-beginners/tree/starter-project
🧠🥷🏼 HTML & CSS Crash Course:
czcams.com/video/hu-q2zYwEYs/video.html
🧠🥷🏼 Node.js & Express Crash Course:
czcams.com/video/zb3Qk8SG5Ms/video.html
🔗🥷🏼 HTMX docs:
htmx.org/docs/
zhlédnutí: 693

Video

HTMX Tutorial for Beginners #9 - Default & Custom Triggers
zhlédnutí 1,5KPřed 17 hodinami
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/iamshaunjp/htmx-for-beginners 📂🥷🏼 Starter project on GitHub: github.com/iamshaunjp/htmx-for-beginners/tree/starter-project 🧠🥷🏼 HTML & CSS Crash Course: czcams.co...
HTMX Tutorial for Beginners #8 - Delete Requests
zhlédnutí 1,6KPřed 19 hodinami
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/iamshaunjp/htmx-for-beginners 📂🥷🏼 Starter project on GitHub: github.com/iamshaunjp/htmx-for-beginners/tree/starter-project 🧠🥷🏼 HTML & CSS Crash Course: czcams.co...
HTMX Tutorial for Beginners #7 - Events & hx-on
zhlédnutí 2KPřed 22 hodinami
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/iamshaunjp/htmx-for-beginners 📂🥷🏼 Starter project on GitHub: github.com/iamshaunjp/htmx-for-beginners/tree/starter-project 🧠🥷🏼 HTML & CSS Crash Course: czcams.co...
HTMX Tutorial for Beginners #6 - Adding Redirects
zhlédnutí 2,1KPřed dnem
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/iamshaunjp/htmx-for-beginners 📂🥷🏼 Starter project on GitHub: github.com/iamshaunjp/htmx-for-beginners/tree/starter-project 🧠🥷🏼 HTML & CSS Crash Course: czcams.co...
HTMX Tutorial for Beginners #5 - POST Requests
zhlédnutí 3KPřed dnem
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/iamshaunjp/htmx-for-beginners 📂🥷🏼 Starter project on GitHub: github.com/iamshaunjp/htmx-for-beginners/tree/starter-project 🧠🥷🏼 HTML & CSS Crash Course: czcams.co...
HTMX Tutorial for Beginners #4 - Using hx-swap & hx-target
zhlédnutí 3,2KPřed dnem
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/iamshaunjp/htmx-for-beginners 📂🥷🏼 Starter project on GitHub: github.com/iamshaunjp/htmx-for-beginners/tree/starter-project 🧠🥷🏼 HTML & CSS Crash Course: czcams.co...
HTMX Tutorial for Beginners #3 - GET Requests (hx-get)
zhlédnutí 4KPřed dnem
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/iamshaunjp/htmx-for-beginners 📂🥷🏼 Starter project on GitHub: github.com/iamshaunjp/htmx-for-beginners/tree/starter-project 🧠🥷🏼 HTML & CSS Crash Course: czcams.co...
HTMX Tutorial for Beginners #2 - Starter Project Setup
zhlédnutí 5KPřed dnem
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/iamshaunjp/htmx-for-beginners 📂🥷🏼 Starter project on GitHub: github.com/iamshaunjp/htmx-for-beginners/tree/starter-project 🧠🥷🏼 HTML & CSS Crash Course: czcams.co...
HTMX Tutorial for Beginners #1 - What is HTMX?
zhlédnutí 25KPřed dnem
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/iamshaunjp/htmx-for-beginners 📂🥷🏼 Starter project on GitHub: github.com/iamshaunjp/htmx-for-beginners/tree/starter-project 🧠🥷🏼 HTML & CSS Crash Course: czcams.co...
Django Tutorial #13 - App Build (Part 3)
zhlédnutí 2,3KPřed 14 dny
In this Django tutorial series, you'll learn what Django is, how to setup a Django project, and how to use it to make a full web application, complete with a database and authentication. 🚀🥷🏼 Check out Bek Brace's channel for more of his content: czcams.com/channels/7EVSn5inapL20oPSwAwEUg.html 🔥🥷🏼Get access to premium courses on Net Ninja Pro: netninja.dev/ 📂🥷🏼 Access the course files on GitHub:...
Django Tutorial #12 - App Build (Part 2)
zhlédnutí 1,9KPřed 14 dny
In this Django tutorial series, you'll learn what Django is, how to setup a Django project, and how to use it to make a full web application, complete with a database and authentication. 🚀🥷🏼 Check out Bek Brace's channel for more of his content: czcams.com/channels/7EVSn5inapL20oPSwAwEUg.html 🔥🥷🏼Get access to premium courses on Net Ninja Pro: netninja.dev/ 📂🥷🏼 Access the course files on GitHub:...
Django Tutorial #11 - App Build (Part1)
zhlédnutí 3,4KPřed 14 dny
In this Django tutorial series, you'll learn what Django is, how to setup a Django project, and how to use it to make a full web application, complete with a database and authentication. 🚀🥷🏼 Check out Bek Brace's channel for more of his content: czcams.com/channels/7EVSn5inapL20oPSwAwEUg.html 🔥🥷🏼Get access to premium courses on Net Ninja Pro: netninja.dev/ 📂🥷🏼 Access the course files on GitHub:...
Django Tutorial #10 - Authentication
zhlédnutí 2,4KPřed 21 dnem
In this Django tutorial series, you'll learn what Django is, how to setup a Django project, and how to use it to make a full web application, complete with a database and authentication. 🚀🥷🏼 Check out Bek Brace's channel for more of his content: czcams.com/channels/7EVSn5inapL20oPSwAwEUg.html 🔥🥷🏼Get access to premium courses on Net Ninja Pro: netninja.dev/ 📂🥷🏼 Access the course files on GitHub:...
Django Tutorial #9 - Forms
zhlédnutí 2,4KPřed 21 dnem
In this Django tutorial series, you'll learn what Django is, how to setup a Django project, and how to use it to make a full web application, complete with a database and authentication. 🚀🥷🏼 Check out Bek Brace's channel for more of his content: czcams.com/channels/7EVSn5inapL20oPSwAwEUg.html 🔥🥷🏼Get access to premium courses on Net Ninja Pro: netninja.dev/ 📂🥷🏼 Access the course files on GitHub:...
Django Tutorial #8 - Static Assets
zhlédnutí 1,8KPřed 21 dnem
Django Tutorial #8 - Static Assets
Django Tutorial #7 - Admin Dashboard
zhlédnutí 2,5KPřed 21 dnem
Django Tutorial #7 - Admin Dashboard
Django Tutorial #6 - Displaying Records
zhlédnutí 2,9KPřed 28 dny
Django Tutorial #6 - Displaying Records
Django Tutorial #5 - Adding Database Records
zhlédnutí 2,6KPřed 28 dny
Django Tutorial #5 - Adding Database Records
Django Tutorial #4 - Database Setup
zhlédnutí 2,8KPřed měsícem
Django Tutorial #4 - Database Setup
Django Tutorial #3 - Django Basics
zhlédnutí 3,2KPřed měsícem
Django Tutorial #3 - Django Basics
Django Tutorial #2 - Setup & Installation
zhlédnutí 4,2KPřed měsícem
Django Tutorial #2 - Setup & Installation
Django Tutorial #1 - Introduction
zhlédnutí 9KPřed měsícem
Django Tutorial #1 - Introduction
Flutter Forms Tutorial #8 - Resetting the Form
zhlédnutí 2,1KPřed měsícem
Flutter Forms Tutorial #8 - Resetting the Form
Flutter Forms Tutorial #7 - Saving Form Data
zhlédnutí 2,1KPřed měsícem
Flutter Forms Tutorial #7 - Saving Form Data
Flutter Forms Tutorial #6 - Drop Down Form Field
zhlédnutí 2,1KPřed měsícem
Flutter Forms Tutorial #6 - Drop Down Form Field
Flutter Forms Tutorial #5 - Text Form Field
zhlédnutí 2KPřed měsícem
Flutter Forms Tutorial #5 - Text Form Field
Flutter Forms Tutorial #4 - Form Widget
zhlédnutí 2KPřed měsícem
Flutter Forms Tutorial #4 - Form Widget
Flutter Forms Tutorial #3 - Text Editing Controller
zhlédnutí 2,3KPřed měsícem
Flutter Forms Tutorial #3 - Text Editing Controller
Flutter Forms Tutorial #2 - TextField Widget
zhlédnutí 2,4KPřed měsícem
Flutter Forms Tutorial #2 - TextField Widget

Komentáře

  • @cyrlaineaparecidacasagrand2010

    I can't find this star animation anywhere in the asset pack!

  • @marcosaugustorodrigueszano5945

    where can I change the number of columns in the grid?

  • @emmanueloso6303
    @emmanueloso6303 Před 18 hodinami

    Wow now I feel more comfortable with tailwind

  • @fredgarati
    @fredgarati Před 23 hodinami

    This guy really is a ninja

  • @keanesetiawan
    @keanesetiawan Před dnem

    If any of you are facing the error coming from exitBeforeEnter, especially if you are using a new version of framer-motion, you can replace it with mode="wait" instead

  • @lowkyasarikareddypenna2532

    Have you animated Mario as well?

  • @paulblinder5729
    @paulblinder5729 Před dnem

    Great tutorial. The Cart screen should work stateless as well I believe. Since provider is managing state. There is no internal state managed by widget. I have tried it as ConsumerWidget and works fine. If I am not mistaking in my understanding, if Cart Screen had internal methods for state of lets say toggle switches with a SetState method than Stateful would be required. Please do an Async tutorial, as it get confusing figuring out 2.0 vs legacy class usage.

  • @HRUstudent
    @HRUstudent Před dnem

    i love the word gang😍😁😁😂

  • @kristophergeorgia8618

    board = [f"{a}{i}" for a in ("A","B","C","D","E") for i in range(1,6,1)] board.remove("C3") print (board) i did this

  • @bubblegum_lord
    @bubblegum_lord Před dnem

    thank you for the tutorial, I understood built-in signals like area/body enter or timeout but had trouble with custom ones, your video really helped me ❤

  • @FreeCourseGuru
    @FreeCourseGuru Před dnem

    Excellent tutorial on handling delete requests with HTMX! The step-by-step approach made it pretty easy to follow and implement. Looking forward to more HTMX content!

  • @FreeCourseGuru
    @FreeCourseGuru Před dnem

    Thanks for another insightful tutorial on HTMX! The explanation of default and custom triggers was pretty clear and practical. Looking forward to applying these techniques in my projects. Keep up the great work! 👍

  • @chocolatemagnum1174

    Great course. Thanks

  • @alexanderknyazev1022

    Just finished this course, this was my first programming language to learn, and heck, it was really enjoyable and understandble, i ve been practicing after each of your videos and it gave a realllllly solid understanding of php, thnx Ninja, it was my second course that i ve finished with you!

  • @lazmth
    @lazmth Před dnem

    Perfect explanation. Thanks very much.

  • @shubhrajit2117
    @shubhrajit2117 Před dnem

    Next steps: Custom install button App actions as shortcuts (appears on long tapping the app on home screen) Set app badge (like notification count) PWA Builder

  • @charliecharliewhiskey9403

    I didn't have the assets pack, so for me I had different size meteors. So I instead had an array of loaded packed scenes (each meteor type being a scene) which I then randomly selected to instantiate.

  • @dl_hines
    @dl_hines Před dnem

    As usual, spot on. You have to be one of the most thorough free coding instructors on youtube. Thanks again!

  • @SuperStyler-dot-io

    you kept saying *props, props, props* -- i was confused until I realized *props* is short for *properties*

  • @piecioshka
    @piecioshka Před dnem

    But why the user wasn't redirected to this new book profile page? :)

  • @shubhrajit2117
    @shubhrajit2117 Před dnem

    I had prior knowledge of firebase, but so much hassle just for the sake of offline support didn't seem worth it to me. If my user would be offline, I won't let them read and write any data. Simple.

  • @kukrejaa
    @kukrejaa Před dnem

    Hey Shaun, I am getting an error "dispatch is not a function" which is not updating my state. Can you help me to debug it.

  • @JunaidAli-hx4dl
    @JunaidAli-hx4dl Před dnem

    You are great. you teach me flutter 🙂 now i have done many projects in flutter.

  • @charliecharliewhiskey9403

    I did a really goofy "$PlayerImage.position += Vector2(int(Input.is_physical_key_pressed(KEY_RIGHT)) + -int(Input.is_physical_key_pressed(KEY_LEFT)), int(Input.is_physical_key_pressed(KEY_DOWN)) + -int(Input.is_physical_key_pressed(KEY_UP))) * speed * delta" xD

  • @maskman4821
    @maskman4821 Před dnem

    I like Htmx,especially learning from Shawn,trully enjoyable and pleasant,I am eagerly to know how to build a chat app with Express + Htmx + firebase,hopefully we can learn it from Shawn 🙏🥰😍🤩👏👍🫡😺 ❤

  • @Youssefchibi
    @Youssefchibi Před dnem

    I don't understand why this is not IN the VUE playlist , why making a different one just for pinia ?

  • @gelismissuriyeli4440

    Hey Shaun, Thanks so much for this fun tutorial, I was just wondering if you have a way to improve formatting and intellisense when writing html inside a string or is there even a way to get Prettier to do it?

  • @vladimirmryscuk8409

    Net Ninja, thank you very much for your effort!

  • @ShamsulHaq313
    @ShamsulHaq313 Před dnem

    I'm a backend developer and right now moving towards frontend. So i spent more than 4 hours to figure out an error. The text that was supposed to move to the left on md display and the image being visible at medium wasn't working. At the end, figured out i had unknowingly zoomed into my chrome upto 250% and that's the reason the content was looking damn big and the other properties didn't seemed to work expectedly.. Crazy day, haha.

  • @shubhrajit2117
    @shubhrajit2117 Před 2 dny

    Now chrome shows Install App instead of Add to Home screen

  • @hakimramzani9174
    @hakimramzani9174 Před 2 dny

    hey, thank you for the tutorial

    • @NetNinja
      @NetNinja Před 2 dny

      Thanks for your support Hakim :)

  • @futureboss7843
    @futureboss7843 Před 2 dny

    Any new review of this lesson ? (2024)

  • @ontheoffence
    @ontheoffence Před 2 dny

    After Logout, why we have to press the browser back navigation twice in order to return the previous state? I thought it's because the history is stored but even after "replace = {true}" we need to press twice (browser back navigation) to jump 2nd previous state.......................WHY??

  • @ZakharSurma
    @ZakharSurma Před 2 dny

    you are the best teacher !!!!!!!!!!!!!

    • @NetNinja
      @NetNinja Před 2 dny

      Thanks Zakhar, that means a lot :)

  • @1910X3
    @1910X3 Před 2 dny

    I love your way to teaching everyone! Hope you can make a latest version tutorial of Strapi like this series again!

  • @WhoKnows-un9kd
    @WhoKnows-un9kd Před 2 dny

    [01:39] HTML [05:45] CSS [13:00] Responsive

  • @siddhanth8539
    @siddhanth8539 Před 2 dny

    What a PERFECT playlist for a beginner for Nuxt !! Learned very easily, thanks a lot for the videos! Cheers!

    • @NetNinja
      @NetNinja Před 2 dny

      That's great to hear :) thanks for watching!

    • @siddhanth8539
      @siddhanth8539 Před 2 dny

      @@NetNinja 🫶🏼🗣️

  • @poncdoug789
    @poncdoug789 Před 2 dny

    Excellent series, thank you for the hard work!

    • @NetNinja
      @NetNinja Před 2 dny

      Glad you enjoy it! :) thanks for watching

  • @gloriousabel2771
    @gloriousabel2771 Před 2 dny

    Can we have updated version of this course, 2024 probably?

  • @h20streams
    @h20streams Před 2 dny

    Hi, can you combine html with htmx?

  • @Zaloganon
    @Zaloganon Před 2 dny

    Very nice course! Lot of thanks!

  • @shubhrajit2117
    @shubhrajit2117 Před 2 dny

    Awesome explanation of sw life cycle!

  • @ozanmuyes
    @ozanmuyes Před 2 dny

    That (redirection) is a good move towards de-duplicating the code, but it creates another round-trip for the client (get the response for the initial POST request to see 302 and make another request to get the resulting HTML). Why not using internal redirect or rendering the "component" on the POST handler?

  • @ne1711
    @ne1711 Před 2 dny

    I initially started with freecodecamp 37 hours + course on flutter by Vandad. that was a great one, but i somewhat felt bored because of not seeing things in action. In that course Vandad started from very basics of dart and other things. After finishing your tutorials i will go back to that one. I wish you all the good luck here and here after. It's such a great course and easy to follow. I am doing in 2024

  • @negativerfan
    @negativerfan Před 2 dny

    If I try createError serverside, I just get the error logged in the console. How do I react to it? I tried using nuxtApp.vueApp.config.errorHandler, but the error is never sent there.

  • @slaps_zrz
    @slaps_zrz Před 2 dny

    Wanted to start with flutter, nice crash course! Got to watch the other course now

  • @maskman4821
    @maskman4821 Před 2 dny

    Is "build an spa with htmx" in netninjadotdev a member course or it will come soon in youtube 🤔🙄

  • @Andrew.tate.biz7629

    Cannot read properties of null (reading 'useContext') TypeError: Cannot read properties of null (reading 'useContext') at useContext (localhost:3000/static/js/bundle.js:44573:25) at useParams (localhost:3000/static/js/bundle.js:43106:15) at BlogDetails (localhost:3000/static/js/bundle.js:161:66) at renderWithHooks (localhost:3000/static/js/bundle.js:19837:22) at mountIndeterminateComponent (localhost:3000/static/js/bundle.js:23808:17) at beginWork (localhost:3000/static/js/bundle.js:25111:20) at HTMLUnknownElement.callCallback (localhost:3000/static/js/bundle.js:10093:18) at Object.invokeGuardedCallbackDev (localhost:3000/static/js/bundle.js:10137:20) at invokeGuardedCallback (localhost:3000/static/js/bundle.js:10194:35) at beginWork$1 (localhost:3000/static/js/bundle.js:30092:11) pls I'm getting this error what could be the problem

  • @maskman4821
    @maskman4821 Před 2 dny

    This is really awesome Htmx tutorial, definitely the best, I feel very fun and excited to build apps with Htmx, hopefully in the near future Shawn would create a chat app with Express + Htmx + firebase, it must be very interesting to see this ❤🙏