Day 1: Hello Svelte 5 - The Runes Era
Forget everything you know about frameworks. Introduction to Svelte 5, Runes, and the Vite setup.
Day 2: Reactivity with Runes
Master the new reactivity system. $state vs let, derived values with $derived, and inspecting changes.
Day 3: Logic Blocks
Control your template flow. #if, #each, and the new #snippet features for reusable template parts.
Day 4: Events & Modifiers
Handling user interaction. The new onclick attributes, managing event defaults, and event bubbling.
Day 5: The Magic of Bindings
Sync your state effortlessly. Master bind:value for inputs, bind:checked, and bind:group.
Day 6: Components & Props
Building block architecture. Passing data with $props() and communicating with parents.
Day 7: Snippets & Slots
Flexible content. The new #snippet syntax vs the classic <slot>.
Day 8: Lifecycle & Effects
Hooking into the system. The $effect rune and replacing onMount.
Day 9: Styles & Transitions
Making it pretty. Scoped CSS, built-in transitions, and animations.
Day 10: Stores & Universal Reactivity
Global state without the headache. Using .svelte.ts files for shared state across your app.
Day 11: Intro to SvelteKit
The full stack. File-system routing, layouts, and server-side rendering.
Day 12: Loading Data
Server to Client. The +page.server.ts file and the load function.
Day 13: Form Actions
The right way to mutate data. Server-side form handling without API endpoints.
Day 14: Final Project - Note Taker
Putting it all together. Build a CRUD Note Taking app with Svelte 5 and SvelteKit.