Svelte & SvelteKit: The Complete Guide

Course Curriculum

Chapter 1: Introduction to Svelte

Lecture 1: Before Getting Started

Lecture 2: A Demo of the App that We Are Going to be Building

Lecture 3: What is Svelte?

Lecture 4: Tools & Extensions

Lecture 5: Svelte vs. SvelteKit

Chapter 2: Getting Started With Svelte

Lecture 1: Creating a Svelte Vite Template

Lecture 2: Svelte Components Basic Structure

Lecture 3: Exploring State With A Simple Counter Component

Lecture 4: Reactive Statements

Lecture 5: Reactive Statements Gotchas

Lecture 6: Component Props

Chapter 3: Exploring More Svelte by Creating a Button Component

Lecture 1: Accessing Component Children With Slots

Lecture 2: Using SCSS in a Svelte Project Using svelte-preprocess

Lecture 3: Adding Classes Dynamically Using The Class Directive

Lecture 4: The Style Directive

Lecture 5: Using Named Slots

Lecture 6: Using Slot Props

Lecture 7: Event Forwarding and Modifiers

Lecture 8: Forwarding Props With $respProps

Chapter 4: Diving Deeper With a Todo List Component

Lecture 1: {#each} Loops

Lecture 2: Binding Input Value to a Variable

Lecture 3: Updating Arrays & Objects in Svelte

Lecture 4: Binding Component Props

Lecture 5: Custom Component Events

Lecture 6: Working With Immutable Data

Lecture 7: Removing Todos Event

Lecture 8: Toggling Todos Event

Lecture 9: Readonly Props

Lecture 10: Code Debugging in Svelte

Lecture 11: Component Lifecycle Functions

Lecture 12: Lifecycle Functions Practical Example

Lecture 13: Binding Dimensions

Lecture 14: The tick lifecycle function

Lecture 15: Cleaning Up Our Component

Lecture 16: Styling Our Component

Lecture 17: The {#await} Block

Lecture 18: onMount Loading and Handling Loading & Error States

Lecture 19: Adding Todos From the API

Lecture 20: Removing Todos Using the API

Lecture 21: Toggling Todos [Exercise Solution]

Lecture 22: Making the Component More Customizable with Slots

Chapter 5: Animations & Transitions

Lecture 1: Introduction to Transitions

Lecture 2: Animating Our Todos

Lecture 3: {#key} Transitions

Lecture 4: The FLIP Animation

Lecture 5: Custom CSS Transitions

Lecture 6: Custom CSS Transitions (Cont.)

Lecture 7: Custom JavaScript Transitions

Lecture 8: Displaying Done and Undone Lists Separately

Lecture 9: The Crossfade Transition

Chapter 6: Actions

Lecture 1: Introduction to Actions

Lecture 2: The Longpress Action

Lecture 3: Using Tippy.js in Svelte Without Actions

Lecture 4: Creating a Tippy.js Action

Chapter 7: Stores

Lecture 1: Creating a Mini Router for Testing

Lecture 2: Store Application Settings With Writable Stores

Lecture 3: Auto-subscriptions & Store Binding

Lecture 4: Using the Settings Store Color Scheme Value

Lecture 5: Store Callback Function

Lecture 6: Store Current Location With Readable Stores

Lecture 7: Custom Stores

Lecture 8: Derived Stores

Lecture 9: Tweened Writable Stores

Lecture 10: Custom Interpolations In Tweened Stores

Lecture 11: Spring Writable Stores

Chapter 8: The Context API

Lecture 1: Introduction to the Context API

Lecture 2: Handling a Form Without Context

Lecture 3: Creating Form & Field Components

Lecture 4: Using Context to Pass Data Down to Children

Lecture 5: Combining Context & Stores to Make Our Context Reactive

Lecture 6: Handling Form Validation

Lecture 7: Using Slots & Slot Props For More Component Customization

Lecture 8: Using Konva.js Library Imperatively

Lecture 9: Creating a Konva Stage Component

Lecture 10: Creating Layer & Rect Components

Lecture 11: Handling Destroying Layers & Rects

Lecture 12: Handling Updating Konva.js Components

Lecture 13: Handling Konva.js Events

Lecture 14: Using Read-Only Props to Access Our Rect Object

Chapter 9: Module Context

Lecture 1: What is Module Context

Lecture 2: Using Module Context to Keep Track of Component Instances

Lecture 3: Creating a Simple Video Player Component & Binding Media Information

Lecture 4: Pausing Other Videos When Playing a Video

Lecture 5: Playing & Pausing All Videos

Chapter 10: SvelteKit: Pages & Layouts

Lecture 1: Introduction to SvelteKit

Lecture 2: Creating a New SvelteKit Project

Lecture 3: Creating Routes

Lecture 4: The $lib Folder Alias & Custom Aliases

Lecture 5: Navigation Functions: goto(), beforeNavigate() & afterNavigate()

Lecture 6: Rest Parameters