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.thecodec...
Join The Code Creative Community on Facebook:
/ thecodecreative
🔴Subscribe for more free Code Creative videos: : / @thecodecreative
🌐 The Code Creative Official Website
www.thecodecre...
🎓 The Code Creative Courses
www.thecodecre...
▬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

[@Mozescodes]

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]

😮

[@emausdetiquicia6636]

This is great. Not only learned about Alpine but saw a real life application of the knowledge acquired.

[@TheCodeCreative]

Awesome!

[@paulfx5019]

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

[@TheCodeCreative]

That would be cool!

[@dmitryzhuravlev-nevsky1388]

Thank you for the detailed explanation. You helped me a bunch in my work on the current project!

[@TheCodeCreative]

Great to hear!

[@HeyNoah]

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

[@TheCodeCreative]

Hey Noah, glad to hear!

[@mohamedmidou3494]

can you make a crud application with alpine js ?

[@th3ja]

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

[@TheCodeCreative]

Yes, it is! Thanks for watching!

[@TheCodeCreative]

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

[@TheCodeCreative]

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

[@리진-s3m]

Thank you so much.🥰

[@TheCodeCreative]

Thanks for checking it out!

[@PraveenKumarThakur-h3x]

Excellent 👌

[@TheCodeCreative]

Thank you! Cheers!

[@JaimitoAleman]

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

[@TheCodeCreative]

Glad you enjoyed it, thanks!

[@asghariarash]

thank you so much

[@TheCodeCreative]

Thanks for checking it out!

[@TheCodeCreative]

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

[@abdelrazeksayedmohmmed2891]

very awesome

[@TheCodeCreative]

👍🏻👍🏻👍🏻

[@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?

[@silasbispo01]

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

[@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 👍🏻

[@AMDesignAndDev]

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

[@TheCodeCreative]

Thanks for watching, I appreciate it!

[@AnuradhaPathirana]

straight to the point! Thank you! ♥

[@TheCodeCreative]

Glad to hear, thanks for watching!

[@jaybah]

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

[@TheCodeCreative]

Thanks for the sub Jeffrey!

[@ademineshat]

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

[@TheCodeCreative]

Thanks! I appreciate it!

[@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!

[@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...

[@matchflixCH]

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!

[@Way_Of_The_Light]

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

[@TheCodeCreative]

Thanks! Will do!

[@Snowboardbound]

Absolutely amazing tutorial! Thanks!

[@TheCodeCreative]

Glad it was helpful!

[@DejanAleksic007]

Great tutorial. I've really enjoyed ;)

[@TheCodeCreative]

Thanks Dejan, glad you enjoyed it!

[@rafaeldiasmartins4369]

THE BEST TUTORIAL VIDEO ABOUT ALPINE JS

[@TheCodeCreative]

Glad to hear, thanks for watching!

[@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.

[@Cenit16]

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

[@TheCodeCreative]

Glad you enjoyed it!

[@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?

[@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]

✊🏻 💯

[@juguetestoys1137]

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

[@gaetano222]

Just excellent! Thank you!

[@TheCodeCreative]

Thanks Gaetano!

[@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?

[@rickybarabba7866]

Another gem. Thanks.

[@TheCodeCreative]

Glad you enjoyed it

[@jeremiahhasudungansihombin1882]

Thank Youuu🙌🙌

[@TheCodeCreative]

Welcome!!

[@ahmedserag7072]

good job

[@TheCodeCreative]

thanks 👍🏻

[@Anonymous-op7yy]

Great video

[@TheCodeCreative]

Thanks Fardeen!