Skip to content
Vladimir Chavkov

Svelte Fundamentals Training

Start building modern web interfaces with this comprehensive 2-day introduction to Svelte. Learn the compiler-first approach that generates lean, reactive JavaScript without a virtual DOM, and build interactive components from the ground up.

Training Details

Section titled “Training Details”
Duration2 days (16 hours)
LevelBeginner
DeliveryIn-person, Live online, Hybrid
CertificationN/A

Who Is This For?

Section titled “Who Is This For?”
  • Frontend developers learning Svelte for the first time
  • React or Vue developers exploring alternative frameworks
  • Full-stack developers adding Svelte to their toolkit
  • Teams evaluating Svelte for new projects

Learning Outcomes

Section titled “Learning Outcomes”

After completing this training, you’ll be able to:

  • Understand the Svelte compiler and how it differs from runtime frameworks
  • Build reactive components with props, events, and bindings
  • Use Svelte template syntax including each blocks, await blocks, and conditionals
  • Implement transitions, animations, and motion effects
  • Compose complex UIs using slots and component composition
  • Apply Svelte scoped styling and CSS custom properties

Detailed Agenda

Section titled “Detailed Agenda”

Day 1: Svelte Core Concepts

Section titled “Day 1: Svelte Core Concepts”

Module 1: Introduction to Svelte

  • Svelte compiler architecture vs runtime frameworks
  • Project setup with Vite and SvelteKit scaffolding
  • Component anatomy: script, markup, style
  • Hands-on: Create your first Svelte application

Module 2: Reactivity and State

  • Reactive assignments and the $: syntax
  • Reactive declarations and statements
  • Arrays and objects: triggering reactivity correctly
  • Hands-on: Build a reactive dashboard widget

Module 3: Template Syntax

  • Conditional rendering with {#if} and {:else}
  • List rendering with {#each} and keyed each blocks
  • Await blocks for async data
  • HTML rendering and special elements
  • Hands-on: Build a dynamic data display

Day 2: Components and Interaction

Section titled “Day 2: Components and Interaction”

Module 4: Component Communication

  • Props and default values
  • Event dispatching with createEventDispatcher
  • Two-way binding with bind:
  • Component lifecycle: onMount, onDestroy, beforeUpdate, afterUpdate
  • Hands-on: Build a form component system

Module 5: Transitions and Animations

  • Built-in transitions: fade, slide, fly, scale, draw
  • Custom transitions and animation parameters
  • Deferred transitions and crossfade
  • The animate: directive for list reordering
  • Hands-on: Create an animated notification system

Module 6: Composition and Styling

  • Slots and named slots
  • Slot props and render delegation
  • $$restProps and prop forwarding
  • Scoped CSS and :global() selectors
  • CSS custom properties with --style-props
  • Hands-on: Build a reusable card component library

Prerequisites

Section titled “Prerequisites”
  • Solid understanding of HTML, CSS, and JavaScript
  • Familiarity with ES6+ features (arrow functions, destructuring, modules)
  • No prior Svelte or framework experience required

Delivery Formats

Section titled “Delivery Formats”
FormatDescription
In-PersonOn-site at your company’s location, hands-on with direct interaction
Live OnlineInteractive virtual sessions with screen sharing and real-time labs
HybridCombination of on-site and remote sessions, flexible scheduling

All formats include hands-on labs, course materials, starter templates, and post-training support.