Notice: if you're interested in more courses than just this one, the best deal is to subscribe to the Yearly membership!
Alpine.js is a relatively new mini-framework for JavaScript, which has the tagline "jQuery for the modern web". And it delivers that promise: you can easily create dynamic elements on your pages, without creating a big app.js with jQuery methods, and without creating a bigger component structure like Vue/React.
In this 1-hour course, I will guide you through a dozen of practical real-life examples, teaching you the theory and the syntax along the way.
First, we'll dive into just general HTML + Alpine.js examples, and towards the end of the course, we'll wrap it with more complex examples based on Laravel and Livewire.
Testimonial from Youtube:
So, let's dive into the course?
Your Instructor
I consider myself a Laravel expert. Work with Laravel for around 7 years, sharing my thoughts on the YouTube channel "Laravel Daily": https://www.youtube.com/c/LaravelDaily
I also have written a Laravel Daily Blog for 5+ years.
Course Curriculum
-
PreviewFirst Practical Example: Alpine.js vs jQuery vs Vanilla JS (5:52)
-
PreviewShow/Hide Password: x-bind, x-text and Methods in x-data (3:45)
-
StartMulti-Step Form: Dynamic CSS Classes with :class (2:58)
-
StartShow/Hide Modals: Buttons, Escape Key, Clicking Outside (3:28)
-
StartSlow Connection and x-cloak (2:21)
-
StartForm with Progress Bar: x-model, x-ref, and More x-bind Examples (3:53)
-
StartMultiple Alpine Components on Page: Events and Parameters (3:21)
-
StartCountdown Timer: x-init with Vanilla JavaScript Syntax (1:51)
-
StartVisual Effects of Show/Hide with x-transition (1:45)
-
StartLive Character Count: Template Literals with Expressions (2:32)
-
StartLive-Search: x-for with index (2:26)
-
StartColor Picker: Mini-Recap of What We've Learned So Far (2:05)