Front-End Engineering
3 learners
Svelte Basics: Getting Started and Core Concepts
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.
Svelte
See path
6 lessons
23 practices
2 hours
Badge for Page Layout and Rendering with SPAs,
Page Layout and Rendering with SPAs
Lessons and practices
Lesson 1: What is Svelte?
Observe Svelte in Action
Lesson 2: Creating Your First Svelte Component
Create and Integrate Svelte Component
Combine and Style Svelte States
Enhance Your Svelte Component
Lesson 3: Reactivity in Svelte
Reactive Greeting with Svelte
Building a Reactive Counter
Reactive Parity Checker in Svelte
Reactive Number Array in Svelte
Reactive Text Transformation in Svelte
Lesson 4: Control Flow in Svelte: Using `#if`, `#else-if`, and `#else`
Toggle Visibility with Svelte
Toggle Visibility with Conditional Rendering
Adding a Moderator Role
Handle Unrecognized User Roles
Lesson 5: Optimized List Rendering with Keyed `#each`
Keyed Each Block Conversion
Sorting with Keyed Each Blocks
Adding Items to Keyed Lists
Random Removal in Keyed Lists
Updating Keyed List Items Efficiently
Lesson 6: Universal Reactivity and State Inspection in Svelte
Reactive Store and State Logging
Reactive Store Expansion in Svelte
Reactive Cart Summary Component
Enhance Cart with Total Cost
Enhance Cart with Discounts
Meet Cosmo:
The smartest AI guide in the universe
Our built-in AI guide and tutor, Cosmo, prompts you with challenges that are built just for you and unblocks you when you get stuck.
Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal