Svelte.js – The Complete Guide (incl. Sapper.js)

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Introduction

Lecture 2: Why Svelte?

Lecture 3: What is Svelte?

Lecture 4: Join our Online Learning Community

Lecture 5: Setting Up a First App & The Course Project

Lecture 6: Writing Some Svelte Code

Lecture 7: Course Outline

Lecture 8: How To Get The Most Out Of The Course

Lecture 9: Course Resources

Chapter 2: Base Syntax & Core Features

Lecture 1: Module Introduction

Lecture 2: Using Curly Braces & Understanding the Core Syntax

Lecture 3: Reactive Variables

Lecture 4: More Reactivity

Lecture 5: Binding to Element Properties

Lecture 6: Two-Way Binding Shortcut

Lecture 7: Using Multiple Components

Lecture 8: Components & Communication via Props

Lecture 9: Diving Deeper into Bindings

Lecture 10: Using Self-Extending Properties

Lecture 11: Outputting HTML Content

Lecture 12: A XSS Example

Lecture 13: Setting Dynamic CSS Classes

Lecture 14: Wrap Up

Lecture 15: Useful Resources & Links

Chapter 3: Working with Conditionals & Loops

Lecture 1: Module Introduction

Lecture 2: Using "if" Statements in HTML

Lecture 3: if, else & else-if

Lecture 4: Outputting Lists with "each"

Lecture 5: "each", "else" & Extracting the Index

Lecture 6: Lists & Keys

Lecture 7: A Closer Look at List Keys

Lecture 8: Wrap Up

Lecture 9: Useful Resources & Links

Chapter 4: A Closer Look at Reactivity

Lecture 1: Module Introduction

Lecture 2: Updating Arrays & Objects Immutably

Lecture 3: Understanding Event Modifiers

Lecture 4: Using Inline Functions

Lecture 5: Wrap Up

Lecture 6: Useful Resources & Links

Chapter 5: Course Project – First Steps

Lecture 1: Module Introduction

Lecture 2: Project Setup & A First Component

Lecture 3: Different Ways of Mounting Components

Lecture 4: How to Embed Widgets

Lecture 5: Adding Data

Lecture 6: Adding a New Component (MeetupItem)

Lecture 7: Working with Different Component Types

Lecture 8: Passing Data Into Components

Lecture 9: Adding a "MeetupGrid" Component

Lecture 10: Adding New Meetups via a Form

Lecture 11: Creating a "TextInput" Component

Lecture 12: Adding a Custom "Button" Component

Lecture 13: Wrap Up

Lecture 14: Useful Resources & Links

Chapter 6: Diving Deeper Into Components

Lecture 1: Module Introduction

Lecture 2: Understanding the Different Component Types

Lecture 3: Component Communication Overview

Lecture 4: Event Forwarding

Lecture 5: Emitting Custom Events

Lecture 6: How to Extract Event Data

Lecture 7: Using Spread Props & Default Props

Lecture 8: Working with Slots

Lecture 9: Named & Default Slots

Lecture 10: Example: Opening & Closing a Modal

Lecture 11: Using Slot Props

Lecture 12: The Component Lifecycle – Theory

Lecture 13: Creation & Update Lifecycle Hooks in Action

Lecture 14: Using "tick()"

Lecture 15: Wrap Up

Lecture 16: Useful Resources & Links

Chapter 7: Course Project – Components Deep Dive

Lecture 1: Module Introduction

Lecture 2: Adding Default Props

Lecture 3: Communication via Custom Events

Lecture 4: Utilizing Slots

Lecture 5: Creating an "EditMeetup" Component

Lecture 6: Communicating Between Components

Lecture 7: Time for More Slots!

Lecture 8: Adding a Re-Usable "Modal" Component

Lecture 9: Finishing the "Modal" Component

Lecture 10: Wrap Up

Lecture 11: Useful Resources & Links

Chapter 8: Working with Bindings & Forms

Lecture 1: Module Introduction

Lecture 2: Two-Way Binding Refresher

Lecture 3: Understanding Custom Component Bindings

Lecture 4: Relying on Automatic Number Conversion

Lecture 5: Binding Checkboxes & Radio Buttons

Lecture 6: Binding <select> Dropdowns

Lecture 7: Binding to Element References

Lecture 8: Binding to Component References

Lecture 9: Validating Forms & Inputs

Lecture 10: Wrap Up