Course
Skills Expanded
Svelte: Getting Started
Welcome, welcome! This course will teach you how to start developing web apps with an intriguing JavaScript UI framework called Svelte.
What you'll learn
Have you ever wondered what the deal is with Svelte and how to use it? In this course, Svelte: Getting Started, you’ll learn to use the basics of an intriguing JavaScript UI framework called Svelte. First, you’ll explore setting up the UI layout. Next, you’ll discover how to add interactivity to your designs. Finally, you’ll learn how to bind dynamic data. When you’re finished with this course, you’ll have the skills and knowledge of Svelte needed to start using it yourself.
Table of contents
Course Overview
0mins
Understand the Svelte Value Proposition
7mins
Set up to Write Svelte Code
12mins
Build Your First Svelte Components
23mins
- Demo Intro 1m
- Start the Project 1m
- Start the Library Component 3m
- Setup Static Assets 1m
- Divide the Library Component 1m
- Components with Slots 1m
- Components with Props 2m
- Iterate with an #each Block 2m
- Interpolate Data in Markup 2m
- A Prop Shorthand 1m
- Conditionals with #if Blocks 2m
- Scoped Component CSS 2m
- Fetch Data in a Component Lifecycle Hook 5m
Add Interactivity to Svelte UIs
31mins
- Demo Re-intro 1m
- Listen for DOM Events 2m
- Add Parameters to DOM Events 2m
- Pass Data to Parents in Callbacks 3m
- Name Callbacks Semantically 2m
- Emit Component Events 3m
- If-else for Temporary Routing 2m
- Pass Props with Spread Attributes 1m
- Ready Detail Page for Layout 3m
- Components with Boolean Props 2m
- Forwarding DOM Events 1m
- Update Data with Reactive Assignment 2m
- Routing with Svelte-routing 7m
Bind Forms to Data in Svelte
16mins
- Demo Re-intro 1m
- Set up Create Page Layout 1m
- Listen to an Input Field DOM Event 2m
- Run Reactive Statements When Variables Change 2m
- Bind to an Input Field 2m
- Make a Reusable Text Input 3m
- Compute Properties with Reactive Declarations 2m
- Use an Event Modifier in Form Submission 2m
- Persist User Input 3m
Prepped to Build
4mins
