Getting Started
  • Introduction
  • Why Svelte?
  • What is Svelte?
  • Join our Online Learning Community
  • Setting Up a First App & The Course Project
  • Writing Some Svelte Code
  • Course Outline
  • How To Get The Most Out Of The Course
  • Course Resources
Base Syntax & Core Features
  • Module Introduction
  • Using Curly Braces & Understanding the Core Syntax
  • Reactive Variables
  • More Reactivity
  • Binding to Element Properties
  • Two-Way Binding Shortcut
  • Using Multiple Components
  • Components & Communication via Props
  • Diving Deeper into Bindings
  • Using Self-Extending Properties
  • Outputting HTML Content
  • A XSS Example
  • Setting Dynamic CSS Classes
  • Time to Practice: The Basics
  • Wrap Up
  • Useful Resources & Links
Working with Conditionals & Loops
  • Module Introduction
  • Using "if" Statements in HTML
  • if, else & else-if
  • Outputting Lists with "each"
  • "each", "else" & Extracting the Index
  • Lists & Keys
  • Time to Practice: Conditionals & Loops
  • A Closer Look at List Keys
  • Wrap Up
  • Useful Resources & Links
A Closer Look at Reactivity
  • Module Introduction
  • Updating Arrays & Objects Immutably
  • Understanding Event Modifiers
  • Using Inline Functions
  • Wrap Up
  • Useful Resources & Links
Course Project - First Steps
  • Module Introduction
  • Project Setup & A First Component
  • Different Ways of Mounting Components
  • How to Embed Widgets
  • Adding Data
  • Adding a New Component (MeetupItem)
  • Working with Different Component Types
  • Passing Data Into Components
  • Adding a "MeetupGrid" Component
  • Adding New Meetups via a Form
  • Creating a "TextInput" Component
  • Adding a Custom "Button" Component
  • Wrap Up
  • Useful Resources & Links
Diving Deeper Into Components
  • Module Introduction
  • Understanding the Different Component Types
  • Component Communication Overview
  • Event Forwarding
  • Emitting Custom Events
  • How to Extract Event Data
  • Using Spread Props & Default Props
  • Working with Slots
  • Named & Default Slots
  • Example: Opening & Closing a Modal
  • Using Slot Props
  • The Component Lifecycle - Theory
  • Creation & Update Lifecycle Hooks in Action
  • Using "tick()"
  • Wrap Up
  • Useful Resources & Links
Course Project - Components Deep Dive
  • Module Introduction
  • Adding Default Props
  • Communication via Custom Events
  • Utilizing Slots
  • Creating an "EditMeetup" Component
  • Communicating Between Components
  • Time for More Slots!
  • Adding a Re-Usable "Modal" Component
  • Finishing the "Modal" Component
  • Wrap Up
  • Useful Resources & Links
Working with Bindings & Forms
  • Module Introduction
  • Two-Way Binding Refresher
  • Understanding Custom Component Bindings
  • Relying on Automatic Number Conversion
  • Binding Checkboxes & Radio Buttons
  • Binding