Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Svelte.js - The Complete Guide
Getting Started
Introduction (2:38)
Why Svelte? (7:13)
What is Svelte? (4:29)
Join our Online Learning Community
Setting Up a First App & The Course Project (11:09)
Writing Some Svelte Code (7:26)
Course Outline (4:48)
How To Get The Most Out Of The Course (3:27)
Course Resources
The Academind Pro Referral Program
Base Syntax & Core Features
Module Introduction (3:55)
Using Curly Braces & Understanding the Core Syntax (5:36)
Reactive Variables (5:48)
More Reactivity (2:09)
Binding to Element Properties (4:16)
Two-Way Binding Shortcut (1:41)
Using Multiple Components (8:30)
Components & Communication via Props (3:45)
Diving Deeper into Bindings (6:00)
Using Self-Extending Properties (1:10)
Outputting HTML Content (3:32)
A XSS Example
Setting Dynamic CSS Classes (4:15)
Assignment - Basics (Problem) (2:13)
Assignment - Basics (Solution) (10:27)
Wrap Up (1:16)
Useful Resources & Links
Working with Conditionals & Loops
Module Introduction (0:49)
Using "if" Statements in HTML (5:25)
if, else & else-if (4:27)
Outputting Lists with "each" (8:05)
"each", "else" & Extracting the Index (2:11)
Lists & Keys (9:55)
Assignment - Conditionals & Loops (Problem) (1:19)
Assignment - Conditionals & Loops (Solution) (9:07)
A Closer Look at List Keys (4:16)
Wrap Up (0:36)
Useful Resources & Links
A Closer Look At Reactivity
Module Introduction (0:58)
Updating Arrays & Objects Immutably (2:29)
Understanding Event Modifiers (5:04)
Using Inline Functions (3:11)
Wrap Up (0:44)
Useful Resources & Links
Course Project - First Steps
Module Introduction (1:18)
Project Setup & A First Component (8:41)
Different Ways of Mounting Components (5:07)
How to Embed Widgets
Adding Data (3:35)
Adding a New Component (MeetupItem) (4:18)
Working with Different Component Types (3:32)
Passing Data Into Components (5:37)
Adding a "MeetupGrid" Component (4:25)
Adding New Meetups via a Form (9:24)
Creating a "TextInput" Component (11:08)
Adding a Custom "Button" Component (5:58)
Wrap Up (2:20)
Useful Resources & Links
Diving Deeper Into Components
Module Introduction (1:43)
Understanding the Different Component Types (1:40)
Component Communication Overview (3:01)
Event Forwarding (4:52)
Emitting Custom Events (4:54)
How to Extract Event Data (2:27)
Using Spread Props & Default Props (6:56)
Working with Slots (6:25)
Named & Default Slots (3:30)
Example: Opening & Closing a Modal (3:18)
Using Slot Props (5:26)
The Component Lifecycle - Theory (4:53)
Creation & Update Lifecycle Hooks in Action (7:27)
Using "tick()" (9:18)
Wrap Up (0:56)
Useful Resources & Links
Course Project - Components Deep Dive
Module Introduction (0:33)
Adding Default Props (3:22)
Communication via Custom Events (11:16)
Utilizing Slots (5:11)
Creating an "EditMeetup" Component (7:56)
Communicating Between Components (3:45)
Time for More Slots! (3:21)
Adding a Re-Usable "Modal" Component (7:05)
Finishing the "Modal" Component (3:29)
Wrap Up (0:37)
Useful Resources & Links
Working with Bindings & Forms
Module Introduction (0:34)
Two-Way Binding Refresher (2:46)
Understanding Custom Component Bindings (6:05)
Relying on Automatic Number Conversion (2:55)
Binding Checkboxes & Radio Buttons (4:53)
Binding Dropdowns (2:04)
Binding to Element References (5:17)
Binding to Component References (2:49)
Validating Forms & Inputs (6:42)
Wrap Up (0:58)
Useful Resources & Links
Course Project - Bindings & Forms
Module Introduction (0:33)
Exploring Different Validation Solutions (2:31)
Adding Validation & Error Output to the "TextInput" Component (3:36)
Adding Some Validation Logic (3:24)
Finishing "TextInput" Validation (7:00)
Validating the Overall Form (2:50)
Improvements & Wrap Up (3:16)
Useful Resources & Links
Managing State & Data with Stores
Module Introduction (1:03)
What's the Problem? (3:41)
Creating a Writable Store & Subscribing (5:34)
Updating Store Data (4:35)
Stores and Stateful & Presentational Components (1:56)
Managing Store Subscriptions (3:52)
Using Autosubscriptions (2:49)
A Second Store! (6:48)
Subscribing for a Short Period (3:48)
Understanding Readable Stores (8:45)
Unlimited Power with Custom Stores (7:56)
Wrap Up (1:21)
Derived Store & Store Bindings
Useful Resources & Links
Course Project - Stores
Module Introduction (1:13)
Setting Up a Store (3:00)
Using a Custom Store (8:09)
Tapping into the Store from Different Components (5:06)
Adding a "MeetupDetail" Component (12:33)
Preparing the "Edit Meetup" Form (5:09)
Continuing Work on the "Edit" Feature (9:13)
Adding a "Delete" Functionality (3:22)
Adding a "Filter" Component (8:48)
Some Final Steps (2:36)
Wrap Up (0:48)
Useful Resources & Links
Motion, Transitions & Animations
Module Introduction (0:53)
Animating Values with a Tweened Store (6:54)
Using a Spring Store Instead (8:20)
Preparing a Transition Example (3:38)
Element Transitions (6:30)
More on Transitions (5:17)
Using Different "in" and "out" Transitions (1:30)
Animating Passive (Affected) Items (2:51)
Deferred Transitions
Wrap Up (0:47)
Useful Resources & Links
Course Project - Transitions
Module Introduction (1:03)
Animating the Modal (3:26)
Animating the Meetup Items (4:53)
Animating the "Favorite" Badge & Wrap Up (1:25)
Useful Resources & Links
Network Interaction via Http
Module Introduction (1:32)
Adding a REST API (2:44)
Sending Data via a POST Request (6:58)
Showing a Loading Indicator & Sending Correct Data (3:16)
Fetching & Transforming Data (4:12)
Things to Consider (2:48)
Using the "await" Block (3:35)
Http + A Store (5:34)
Wrap Up (0:59)
Useful Resources & Links
Course Project - Http
Module Introduction (0:34)
Storing Meetups on a Server (9:16)
Fetching & Transforming Data (4:53)
Adding a Loading Spinner (5:44)
Updating via PATCH (6:32)
Sending "Favorite" Updates & Deleting Data (3:56)
Fixing the Order of Items (1:09)
Adding Error Handling (7:13)
Wrap Up (0:47)
Useful Resources & Links
Special Elements
Module Introduction (0:35)
Dynamic Components (7:22)
Recursive Components (6:10)
Accessing Windows, Body & Head (6:45)
Cross-Component Scripts (5:38)
Useful Resources & Links
Routing & Server-side Rendering with Sapper
Module Introduction (0:46)
What and Why? (4:58)
Understanding the Folder Structure (2:53)
Inspecting the Web Page (2:20)
Filenames & Routes (6:45)
Error & Layout Pages (2:16)
Preloading in Components (5:12)
Pre-fetching Data (6:31)
Migrating the Meetup Project Files into the Sapper Project (6:45)
Fetching Data on the Client Side (9:14)
Prefetching Data on the Server (6:12)
Syncing Fetched Data & the Store (3:32)
Editing & Deleting Meetups (1:58)
Rendering the MeetupDetail Page (7:49)
Adding Global CSS (0:43)
Wrap Up (0:37)
Useful Resources & Links
Deployment
Module Introduction (0:35)
Different App Types & Deployment Options (4:35)
Building the App (4:38)
Rendering Content Correctly on the Server (2:52)
Deploying a SSR App (3:19)
Hosting a Static Site (4:49)
Wrap Up (0:42)
Useful Resources & Links
Course Roundup
Svelte vs React vs Angular vs Vue (8:56)
Course Summary (2:44)
Element Transitions
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock