Svelte Crash Course
Svelte is a modern JavaScript framework that's similar to React or Vue, but takes a different approach when it comes to constructing your application. Svelte is actually a compiler that takes the code you write and compiles it down to vanilla JavaScript. This results in highly optimized, performant code with extremely small bundle sizes.
In this series, we'll review all of Svelte's features, including things like reactive state, components, templating, lifecycle hooks, binding, transitions and more.
Series episodes
Svelte Features (9)
Intro and Basics
16m 52sQuick Svelte intro: build a demo app while learning reactivity, props, events, conditionals, and template loops.
The Obligatory Todo App
16m 52sBuild a practical Todo app in Svelte to master reactivity, bindings, conditionals, loops, and dynamic class rendering.
More Todo App Features
14m 36sComplete your Todo app with filters and editing features using event listeners, conditionals, and reactive properties for a dynamic, user-friendly experience.
Transitions in Svelte
10m 12sLearn Svelte's built-in transitions (fade, fly, scale) and add easy, polished animations to your Todo app for smoother UI.
Component Communication using Events
11m 32sLearn how to connect multiple Svelte components by dispatching and listening to events, making your Todo app’s state flow smooth and efficient.
Component Communication using Events Part 2
13m 52sMaster component communication by using events and props in Svelte. Learn how to build a TodoList component that shares state smoothly and clearly.
Global Writable Stores
17m 37sLearn how to simplify state management with global writable stores in Svelte. Share and update state effortlessly across components for smoother apps.
Pass Markup Around with Slots
11m 5sUse slots to pass markup between components, enabling customizable instances - see a contact card example for practical, reusable patterns.
Data Fetching in Svelte
12m 20sLearn three practical ways to fetch API data in Svelte: state, await blocks, or libraries like Svelte Query and SWR.
SvelteKit (3)
SvelteKit Overview
18m 58sGet started with SvelteKit—install it and explore SSR, file-based routing, layouts, and static site generation to build modern Svelte apps.
API Endpoints
13m 14sBuild server-side API endpoints to fetch data, access databases, and call credentialed APIs with secure, practical examples.
Deploying your SvelteKit app
15m 35sLearn practical SvelteKit deployment options - Vercel serverless, Node (Forge), or static sites - pros, cons, and step-by-step guidance.
