Front-end Engineering in Svelte

Overview

Develop your Svelte skills with this comprehensive course covering basics through advanced techniques. Learn component creation, reactivity with $state and $effect, styling, transitions and component communication. Build efficient applications with Svelte's intuitive, compile-time approach.

Syllabus

Course 1: Svelte Basics: Getting Started and Core Concepts
Course 2: Styling & Transitions in Svelte
Course 3: Component Communication & Events in Svelte
Course 4: Svelte: Reactivity & State Management
Course 5: Svelte: Advanced Concepts

Courses

0 reviews
2 hours
View details

This course introduces Svelte, a modern JavaScript framework that simplifies UI development through compile-time optimization. Learn to create projects, build components, and master reactivity with Svelte's $state API. Explore control flow with #if and #each directives. Discover how Svelte's declarative approach makes state management more intuitive than traditional frameworks.
0 reviews
1 hour
View details

This course explores styling and transitions in Svelte for creating dynamic interfaces. Learn to implement scoped and global styles, dynamic class bindings, and CSS variables. Master built-in transition directives like transition:, in:, and out: for smooth animations. Discover advanced techniques including the animate: directive for list updates and combining transitions for creative effects.
0 reviews
1 hour
View details

This course covers component communication in Svelte, teaching efficient data flow management. Learn DOM event handling, props passing, and two-way binding for state synchronization. Master parent-child communication via callbacks and use the context API for sharing data across nested components. These skills are essential for building scalable Svelte applications with clear data management.
0 reviews
2 hours
View details

This course explores Svelte's reactivity and state management for optimized applications. Learn to use $effect for side effects, $derive for computed values, and Svelte's reactive components. Master form state management with $state and implement debounce techniques for dynamic user input. Develop skills to handle complex state updates while maintaining clean, maintainable code.
0 reviews
1 hour
View details

This course covers advanced Svelte concepts including async rendering, optimized lists, and lifecycle management. Learn to use #await for async operations, keyed #each blocks for efficient rendering, and create reusable snippets. Master component lifecycle with $effect and synchronize updates using tick() to build high-performance applications.