Svelte Fundamentals

• Master Svelte Framework Fundamentals: Learn the core concepts of Svelte, including reactivity, props, events, data binding, lifecycle functions, and stores.
• Explore Advanced Svelte APIs: Gain proficiency in using advanced APIs like animations, transitions, slots, and context for building dynamic web applications.
• Build a Complete Project: Create a full project from scratch with Svelte, an Emoji Matching Game, applying the concepts learned throughout the course.
• Understand Svelte's Reactive Programming Model: Dive deep into Svelte’s reactivity system and how it simplifies state management and UI updates.
• Utilize Lifecycle Functions: Learn to use lifecycle functions for managing component behavior at different stages of its existence.
• Implement Svelte Stores: Manage application state efficiently with Svelte’s built-in store system, including writable, readable, and derived stores.

Join Rich Harris, the creator of Svelte, in this comprehensive course that covers all the fundamentals of the Svelte framework. You’ll get hands-on experience with Svelte's core concepts, from reactivity to advanced APIs like animations and transitions. By the end of the course, you'll have built a complete project—a fun and interactive Emoji Matching Game—using Svelte. This course is ideal for developers looking to learn Svelte from the ground up and leverage its power to build dynamic and efficient web applications.

• Frontend developers interested in learning the Svelte framework.
• JavaScript developers looking to build dynamic web applications with Svelte.
• Developers seeking to understand reactive programming concepts in Svelte.
• Anyone curious about modern web development frameworks and their applications.

• Basic JavaScript Knowledge: Familiarity with JavaScript and web development concepts is recommended.
• Interest in Modern Web Development: A desire to learn about building applications using Svelte.

Introduction

Rich Harris introduces the course, providing background on Svelte and an overview of what participants will learn.

Basics

• Svelte Basics: Understand the composition of a Svelte component, including declaring variables, using JavaScript shorthand attributes, and styling with CSS.
• Reactivity: Learn about Svelte's reactivity system, including event handlers, reactive declarations, and updating arrays and objects.
• Declaring Props: Discover how to pass data from components to their children using props, default values, and spread props.
• Logic: Explore using logic in Svelte to render HTML conditionally with if, else, else-if, each, keyed each, and await blocks.
• Events: Learn to handle DOM events, including inline event handlers, event modifiers, component events, and event forwarding.

Bindings, Lifecycle, and Stores

• Bindings: Use bindings to synchronize values between variables and input elements, covering various input types.
• Lifecycle: Understand Svelte's lifecycle functions like onMount, beforeUpdate, afterUpdate, and tick for managing component behavior.
• Stores: Manage state outside of specific components using Svelte's store system, including writable, readable, and derived stores.

Advanced APIs

• Motion & Transitions: Implement animations using motion stores, easing functions, transitions, and custom CSS/JavaScript transitions.
• Key Blocks, Deferring, & Animate: Coordinate transitions with key blocks, defer transitions, and apply motion to non-transitioning elements.
• Actions: Interface with third-party libraries and add custom event handlers with Svelte's actions.
• Advanced Bindings: Explore advanced uses of bindings with content-editable elements, media elements, and component instances.
• Classes & Styles: Specify classes and styles using shorthand and component styles for efficient styling.
• Slots: Utilize slots to define where child components are accepted, with slot fallbacks and props.
• Context API: Communicate between components without passing data or dispatching events using the context API.
• Special Elements: Learn about Svelte's built-in elements, including self, component, element, window, and more.
• Module Context & Debugging: Implement and export context in script blocks and use the debug tag for debugging.

The Emoji Matching Game

• Creating a Svelte Project: Set up a base Svelte project for the Emoji Matching Game.
• Game Interface & Styles: Create the game UI and apply styling for a responsive and interactive design.
• Game Board Grid: Define styles for the game board grid, including responsive sizing.
• Levels: Implement different levels of difficulty for the game using TypeScript-defined level objects.
• Passing Data to Game Components: Pass data into the game components and render a random array of emoji pairs.
• Selecting Squares: Implement logic for selecting squares, handling matches, and resetting incorrect selections.
• Dispatching Found Event: Handle correct matches, update the game state, and display matched emojis.
• Countdown Timer: Create and animate a countdown timer component for the game.
• Replacing Emojis with SVGs: Use SVGs from Twemoji for consistent emoji styling across platforms.
• Game Animations: Add animations to the emoji cards for visual effects.
• Send & Receive Transitions: Implement transitions for matched emojis to enhance the gaming experience.
• Game Play States: Implement game states like win, lose, and pause, and add a welcome screen.
• Switching Game States: Manage game states and difficulty levels, updating CSS styling based on difficulty.
• Adding Neoconfetti: Add a confetti effect using the Neoconfetti package for game wins.