Alpine JS Tutorial | Build a Todo App

A tutorial on Alpine JS, a lightweight but powerful JavaScript framework. In this Alpine.js tutorial, we learn the basics of AlpineJS and build a todo app using the framework.
Created by Gregg Fine.
#javascript #alpinejs #webdevelopment
Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
store.thecodecreative.com/goo...
Join The Code Creative Community on Facebook:
/ thecodecreative
🔴Subscribe for more free Code Creative videos: : / @thecodecreative
🌐 The Code Creative Official Website
www.thecodecreative.com/
🎓 The Code Creative Courses
www.thecodecreative.com/courses
▬About The Code Creative ▬▬▬▬▬▬▬▬▬▬▬▬
The Code Creative helps web developers learn the fundamentals of programming, algorithms, as well as the latest frameworks and libraries. You can expect web development content that is fun, clear and concise, and keeps you engaged with visuals and a touch of humor.
▬Social Media ▬▬▬▬▬▬▬▬▬▬
▸ Twitter - @GreggFine
▸ Instagram - /greggfinedev
▸ Facebook - / thecodecreative
✅ Recommended related videos:
Debouncing Explained
• Debouncing Explained |...
Memoization Explained
• JavaScript Memoization...
Sorting in JavaScript Explained
• JavaScript Comparator ...
✅ For business inquiries contact me at [e-mail]

[@TheCodeCreative]

Download my FREE "Google Search Secrets for Developers" Cheat Sheet: store.thecodecreative.com/google-secrets-cheat-sheet

[@AnuradhaPathirana]

straight to the point! Thank you! ♥

[@TheCodeCreative]

Glad to hear, thanks for watching!

[@th3ja]

Short, sweet and straight to the point! Thank you! Alpine's amazing!

[@TheCodeCreative]

Yes, it is! Thanks for watching!

[@silasbispo01]

This is powerful!! Jquery should work like this...

[@rafaeldiasmartins4369]

THE BEST TUTORIAL VIDEO ABOUT ALPINE JS

[@TheCodeCreative]

Glad to hear, thanks for watching!

[@raheescodenex1707]

cool and easy , please make more video on alpineJs, ( a video x-for with key id)

[@TheCodeCreative]

Thanks for watching and for the suggestion!

[@HeyNoah]

Super cool video Gregg! Thanks so much! Really valuable!

[@TheCodeCreative]

Hey Noah, glad to hear!

[@gaetano222]

Just excellent! Thank you!

[@TheCodeCreative]

Thanks Gaetano!

[@VVesson]

Sure I'd love to watch more videos about Alpine. I like small framework like this. Make any videos you feel right to make 👍

[@TheCodeCreative]

Great! Thanks for the feedback 👍🏻

[@ademineshat]

very nice tutorial, very well explained, also interesting voice. This deserves more likes and subscribers

[@TheCodeCreative]

Thanks! I appreciate it!

[@Way_Of_The_Light]

Very cool man! Please keep making cool tutorials like this. Subscribed 🙏

[@TheCodeCreative]

Thanks! Will do!

[@Cenit16]

Great tutorial, straigth to the point and clear explanation, thanks!!!

[@TheCodeCreative]

Glad you enjoyed it!

[@jaybah]

Very short and simple video! Keep it up man. You got yourself a subscriber :)

[@TheCodeCreative]

Thanks for the sub Jeffrey!

[@rickybarabba7866]

Another gem. Thanks.

[@TheCodeCreative]

Glad you enjoyed it

[@JaimitoAleman]

Greatly enjoyed this simple walk-through. Thanks for taking it slow & easy for us Newbs :)

[@TheCodeCreative]

Glad you enjoyed it, thanks!

[@Snowboardbound]

Absolutely amazing tutorial! Thanks!

[@TheCodeCreative]

Glad it was helpful!

[@BobbyBundlez]

This basically turns html into a programming language. So cool.

[@BobbyBundlez]

This with tailwind is a fucking beast. Literally everything compact and written snugly in your html. Unreal

[@TheCodeCreative]

✊🏻 💯

[@AMDesignAndDev]

This is a great video my friend! Keep up the great work

[@TheCodeCreative]

Thanks for watching, I appreciate it!

[@DejanAleksic007]

Great tutorial. I've really enjoyed ;)

[@TheCodeCreative]

Thanks Dejan, glad you enjoyed it!

[@user-xo1vk1bl4t]

Thank you so much.🥰

[@TheCodeCreative]

Thanks for checking it out!

[@jeremiahhasudungansihombin1882]

Thank Youuu🙌🙌

[@TheCodeCreative]

Welcome!!

[@SimonFerndriger]

This was very useful for me. I would love to see to go further with AlpineJS and even add some JS modules to it.

[@TheCodeCreative]

Glad to hear, thanks Simon!

[@kasiparimal7768]

This is a good resource to learn alpine. How would you go about adding an edit button to an already created todo task? While editing the task how if you want to cancel the edit how could you implement a cancel button?

[@kidbrave_7673]

Thank you The Code Creative for creating such an amazing tutorial teaching us how to use alpine js from a beginner level! 😁🙏

[@TheCodeCreative]

Thank you for watching!

[@kidbrave_7673]

@@TheCodeCreative Absolutely! I did want to ask, since I'm new to learning alpine.js. Do you know if you could build a front-end game using this framework like you would with OOP in vanilla js?

[@jeno427]

Cool tutorial! How would you sync it with a form rendered on the server side? Can't find any examples of that, yet Alpine is used with SSR sites.

[@asghariarash]

thank you so much

[@TheCodeCreative]

Thanks for checking it out!

[@abdelrazeksayedmohmmed2891]

very awesome

[@TheCodeCreative]

👍🏻👍🏻👍🏻

[@paulfx5019]

Great tutorial! Would be cool to combine HTMX & Alpine.js together don't you think?

[@TheCodeCreative]

That would be cool!

[@Anonymous-op7yy]

Great video

[@TheCodeCreative]

Thanks Fardeen!

[@juguetestoys1137]

great !! could you implement local storage in this project ?

[@jugibur2117]

Great stuff, thank you for your effort! I'm only wondering why this works: :class="{'completed' : todo.completed}" An objects property name with a 'true' value is assigned to a css class So there seems to be some magic under to hood...

[@ahmedserag7072]

good job

[@TheCodeCreative]

thanks 👍🏻

[@ramsundararaman6615]

This is really a cool and crisp tutorial on Alpine. Thanks for doing this. What is the intellisense plugin you had used for VSCode?

[@TheCodeCreative]

Thanks! I believe it's just the built-in Intellisense from VSCode

[@ramsundararaman6615]

@@TheCodeCreative I did post a reply to this but seems to be disappearing!

[@TheCodeCreative]

@@ramsundararaman6615 not sure why

[@ramsundararaman6615]

@@TheCodeCreative i posted a link to GitHub page where I posted an update. Does this prevent links?

[@TheCodeCreative]

🎓 Course Available!: "DOM Events and JavaScript": store.thecodecreative.com/dom-events-and-javascript

[@TheCodeCreative]

Join "The Code Creative Community" group on Facebook: facebook.com/groups/thecodecreative

[@TheCodeCreative]

🎓 New Course Available! "Scrollytelling 101": store.thecodecreative.com/scrollytelling

[@mozescodes6618]

It's basically just copy paste of VueJS only difference it's lightweight as it doesn't have a CLI

[@pamungkasandono]

I cant imagine alphine js + tailwind how long the div is 😂😂😂

[@TheCodeCreative]

😮