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

Duration	2 days (16 hours)
Level	Beginner
Delivery	In-person, Live online, Hybrid
Certification	N/A

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

After completing this training, participants will 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

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

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

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

Delivery Formats

Format	Description
In-Person	On-site at your company's location, hands-on with direct interaction
Live Online	Interactive virtual sessions with screen sharing and real-time labs
Hybrid	Combination of on-site and remote sessions, flexible scheduling

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