AboutTeamsPricing
New content added weeklyLive

Master Svelte with Adaptive AI.

Master Svelte across 20 topics - Foundations, Intermediate, and Advanced - guided by Leyaa's adaptive intelligence.

3Parts
20Topics
153Patterns
40hEst. duration
Start Learning Free
Svelte
Svelte Course
3 - part learning journey
Beginner
Foundations
7 topics · 56 patterns
Beginner
Intermediate
Intermediate
7 topics · 51 patterns
Intermediate
Advanced
Advanced
6 topics · 46 patterns
Advanced
Begin Part 1: Foundations
✦ Course Structure

Your Svelte Journey in 3 Parts

Each part builds on the last - a deliberate progression from beginner to advanced.

Beginner
Beginner
Part 1: Foundations
Covers Svelte Basics and Philosophy, Component Structure, Reactivity and State and 4 more topics.
7Topics
56Patterns
View topics
Intermediate
Intermediate
Part 2: Intermediate
Covers Lifecycle Methods, Stores, Transitions and Animations and 4 more topics.
7Topics
51Patterns
View topics
Advanced
Advanced
Part 3: Advanced
Covers SvelteKit Routing, SvelteKit Data Loading, SvelteKit Forms and Actions and 3 more topics.
6Topics
46Patterns
View topics
Curriculum

Everything You'll Learn

Explore every topic and pattern in the course.

Svelte

3 parts · 20 topics · 153 patterns
Beginner
Part 1: Foundations7 topics · 56 patterns
Beginner
01
Svelte Basics and Philosophy
8 patterns
Why Svelte exists
Svelte vs React vs Vue comparison
Compiler-based approach (no virtual DOM)
SvelteKit overview
Project setup with create-svelte
Project structure
First Svelte component
Development server and HMR
02
Component Structure
6 patterns
Why components are the building blocks
Script, markup, and style sections
Component file (.svelte) anatomy
Scoped styles by default
Global styles
Component naming conventions
03
Reactivity and State
8 patterns
Why reactivity drives UI updates
Reactive declarations (let)
Reactive assignments trigger updates
Reactive statements ($:)
Derived values with $:
Reactive blocks for side effects
Array and object reactivity gotchas
Immutable patterns for updates
04
Template Syntax
9 patterns
Why template syntax renders dynamic content
Text interpolation with {}
HTML rendering with {@html}
If blocks ({#if})
Else and else-if blocks
Each blocks ({#each})
Keyed each blocks
Await blocks ({#await})
Debugging with {@debug}
05
Event Handling
7 patterns
Why events drive user interaction
DOM event listeners (on:click)
Event modifiers (preventDefault, stopPropagation)
Component events (createEventDispatcher)
Event forwarding
Inline event handlers
Multiple event listeners
06
Props and Component Communication
9 patterns
Why props pass data to children
Declaring props with export let
Default prop values
Spread props
Readonly props
Component composition
Slot basics (default slot)
Named slots
Slot fallback content
07
Bindings
9 patterns
Why bindings enable two-way data flow
Input bindings (bind:value)
Checkbox and radio bindings
Select bindings
Textarea bindings
Group bindings
Element reference bindings (bind:this)
Component bindings
Dimension bindings (clientWidth, clientHeight)
Intermediate
Part 2: Intermediate7 topics · 51 patterns
Intermediate
01
Lifecycle Methods
6 patterns
Why lifecycle hooks run code at key moments
onMount
onDestroy
beforeUpdate and afterUpdate
tick function
Lifecycle in nested components
02
Stores
8 patterns
Why stores manage shared state
Writable stores
Readable stores
Derived stores
Auto-subscription with $ prefix
Custom store logic
Store contract (subscribe method)
Context API vs stores
03
Transitions and Animations
9 patterns
Why transitions enhance user experience
Transition directive (transition:fade)
In and out transitions
Transition parameters (duration, delay)
Custom transitions
Animate directive
Flip animations
Crossfade for list items
Deferred transitions
04
Actions
6 patterns
Why actions add reusable element behavior
Use directive syntax
Action parameters
Action update and destroy
Common action patterns (click-outside, tooltip)
Action with event dispatching
05
Special Elements
8 patterns
Why special elements handle edge cases
svelte:component for dynamic components
svelte:element for dynamic tags
svelte:window for window events
svelte:body for body events
svelte:head for document head
svelte:self for recursive components
svelte:fragment for grouping
06
Context API
6 patterns
Why context shares data without prop drilling
setContext
getContext
Context with stores
Context key patterns
Context vs stores decision
07
Advanced Styling
8 patterns
Why advanced styling creates polished UIs
CSS custom properties (variables)
Passing styles to components (--style-props)
Conditional classes (class:name)
Dynamic inline styles
CSS-in-JS patterns with Svelte
Preprocessor support (SCSS, PostCSS)
Global vs scoped style strategies
Advanced
Part 3: Advanced6 topics · 46 patterns
Advanced
01
SvelteKit Routing
8 patterns
Why SvelteKit handles full-stack routing
File-based routing
Dynamic route parameters
Layout files (+layout.svelte)
Error pages (+error.svelte)
Route groups
Optional parameters
Rest parameters
02
SvelteKit Data Loading
8 patterns
Why load functions fetch data server-side
Page load functions (+page.js)
Server load functions (+page.server.js)
Layout load functions
Using data in pages
Invalidation and reloading
Streaming with promises
Error handling in load
03
SvelteKit Forms and Actions
7 patterns
Why form actions handle mutations
Default actions
Named actions
Progressive enhancement
Form validation
Action return data
Redirect from actions
04
SvelteKit API Routes
6 patterns
Why API routes serve data endpoints
Server routes (+server.js)
GET, POST, PUT, DELETE handlers
Request parsing
Response helpers (json, error)
API authentication patterns
05
SvelteKit Advanced Features
8 patterns
Why advanced features enable production apps
Hooks (handle, handleError, handleFetch)
Middleware patterns with hooks
Environment variables ($env)
Page options (SSR, CSR, prerender)
Adapter configuration
Service workers
SEO and meta tags
06
Testing and Deployment
9 patterns
Why testing validates Svelte applications
Component testing with Testing Library
Unit testing logic
Vitest setup
E2E testing with Playwright
Static adapter deployment
Node adapter deployment
Vercel and Netlify deployment
Docker deployment
Why Leyaa

Not just a course. A learning intelligence.

Leyaa doesn't just deliver content - it understands where you are, what you need, and how to get you there fastest.

Adaptive Diagnostics
Adaptive Diagnostics
Leyaa identifies which of the 153 patterns you've mastered and which need work - before you waste time on what you already know.
Pattern-Level Precision
Pattern-Level Precision
Every pattern gets a verdict - Learn, Practice, or Skip - so your study time goes exactly where it counts.
Intelligent Pacing
Intelligent Pacing
Leyaa reads your velocity across the whole course and adapts your focus list dynamically, keeping you in the optimal learning zone.
Before & After Visibility
Before & After Visibility
Every assessment creates a snapshot. Retake anytime to see exactly how much you've grown - topic by topic, pattern by pattern.
Learner Autonomy
Learner Autonomy
Leyaa recommends, never restricts. Override any suggestion and explore at your own pace - the system tracks everything regardless.
Clear Learning Path
Clear Learning Path
Foundations → Intermediate → Advanced - a structured journey where each part sets you up perfectly for the next.
Svelte

Ready to master Svelte?
Start your journey today

Start your diagnostic now. Build mastery across all 20 topics in under 15 minutes.

20 Topics
153 Patterns
Personalized roadmap
Leyaa Swift Bird