Svelte.js training course

4. Forms & Data Binding (Svelte 5)

• $state for two-way binding
• Form elements: text, checkbox, radio, select, custom bindings
• Validation strategies:
  • Client-side validation
  • Server-side validation using SvelteKit Form Actions
• Handling complex form objects with $derived
• Hands-on: Build a multi-step form with validation & progress state

5. State Management & Data Models

• When to use local component state vs. shared state
• Stores in Svelte 5
  • Writable, readable, derived
  • spring and tweened
• Stores vs. Context: When to use each
• Structuring domain data models
• Hands-on:
  • Create global app stores (auth, theme, cart, etc.)
  • Build a real-time store-driven UI

6. Svelte Actions

• What Actions are & when to use them
• Creating and reusing advanced Actions
  • Event listeners
  • Intersection observer
  • Drag & drop
  • Tooltip / popover behavior
• Passing data via parameters
• Sharing Actions between components
• Hands-on: Build a custom Action library

7. Consuming Web Services

• Using fetch on client vs server
• Using SvelteKit server functions (+server.js)
• API error handling strategies
• Transforming and normalizing data
• Calling 3rd-party APIs securely
• Hands-on: Build a service module for CRUD operations

8. Routing, Navigation & SSR with SvelteKit

• Filesystem routing: +page.svelte, +page.js, +layout.svelte etc.
• Nested layouts, layouts with server data
• Server-side rendering vs CSR vs SPA mode
• Load functions: load, server load, and the new universal data flow
• Lazy loading components and pages
• Prefetching and streaming data
• Keeping stores in sync with navigation
• Hands-on: Build a multi-page app with layouts, parallel routes, and prefetching

9. Robust Application Architecture

• Separation of concerns in SvelteKit
• Error handling:
  • +error.svelte
  • throw error() in load/server modules
• Handling form errors in form actions
• Defensive programming in components
• Hands-on: Create a global error boundary & user-friendly error UI

10. Testing Svelte Applications

• Unit tests with Vitest
• Component testing with Testing Library
• Mocking fetch, stores, and form actions
• Snapshot testing
• End-to-end testing with Playwright
• Hands-on: Write a test suite for a component-driven feature

11. Development Workflow & Tooling

• The Svelte compiler: how it works, what it outputs
• Development vs production builds
• Vite configuration & optimization
• Debugging:
  • Svelte DevTools
  • Source maps and compiler warnings
• Managing environment variables securely

12. Deployment & Security

• Building & deploying SvelteKit apps:
  • Node adapter
  • Static adapter
  • Serverless / Edge environments
  • Docker
• Caching strategies & CDN configuration
• Protecting APIs and sensitive data
• Authentication strategies:
  • Cookies
  • OAuth
  • JWT (server-only usage)
• Hands-on: Deploy to Netlify, Vercel, or cloud of choice

13. Capstone Project

A full hands-on build combining all course concepts:

Example projects

• A full CRUD dashboard with authentication
• A marketplace with cart + checkout
• A knowledge base with search & pagination
• A real-time collaborative board using WebSockets

Includes:

• Full component library
• Server functions & API consumption
• Forms with validation
• Routing + layouts
• Stores & global state
• Deployment pipeline