Expanded

Svelte: Getting Started

By Jake Trent
Welcome, welcome! This course will teach you how to start developing web apps with an intriguing JavaScript UI framework called Svelte.
Get started
Play course overview
Course info
Rating
(56)
Level
Beginner
Updated
Feb 19, 2020
Duration
1h 37m
Table of contents
Course Overview
Course Overview 1m
Understand the Svelte Value Proposition
Welcome 1m What Is Different About Svelte? 1m No Runtime 1m No Virtual DOM 3m Other Upsides 2m
Set up to Write Svelte Code
Local Environment Prerequisites 1m Set up Svelte in VSCode 2m Set up Svelte in Vim 4m Explore the Svelte Template 3m Start a Svelte Project with the Template 3m
Build Your First Svelte Components
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
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
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
What We’ve Learned 2m What’s Left 1m Where to Go Next 2m
Description
Course info
Rating
(56)
Level
Beginner
Updated
Feb 19, 2020
Duration
1h 37m
Your 10-day individual free trial includes:

Expanded library

This course and over 7,000+ additional courses from our full course library.

Hands-on library

Practice and apply knowledge faster in real-world scenarios with projects and interactive courses.
*Available on Premium only
Start a Premium 10-day free trial
Description

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.

About the author
Jake Trent
About the author

He's a creator at heart, making art, music and software. He's been privileged to work with talented teams and contribute to great causes and useful products and hopes to do more of it.

More from the author
Styling React Components
Intermediate
1h 8m
May 21, 2020
Styling React Components
Intermediate
1h 22m
Mar 13, 2019
More courses by Jake Trent
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everybody. My name is Jake Trent and welcome to my course, Svelte: Getting Started. In this course, we'll introduce you to Svelte, a web framework that takes a new approach to building user interfaces. Some of the major topics that we'll cover include creating UI components in Svelte, handling user interaction, and data binding. By the end of this course, you'll know the essential differences in Svelte versus other options and how to use Svelte to create web UIs for your projects. Before beginning the course, you should be familiar with the basics of the web, HTML, CSS, and JavaScript. I hope you'll join me on this journey to learn Svelte, with this Svelte: Getting Started course at Pluralsight.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT

Course info
Rating
(56)
Level
Beginner
Updated
Feb 19, 2020
Duration
1h 37m
Pluralsight IQ
Know exactly where everyone on your team stands with assessments and analytics.
Try our full library including this course free for your whole team for 14-days.