Up and running with Svelte 3

Instructor

Tomasz Łakomy

svelte

26m

4.7

418

people completed

Bookmark

Download

RSS

Start Watching

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

The best part? If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

If you're interested in Svelte this is the best resources to get our familiar with its core features. You'll learn everything you need to start building Svelte apps today.

Enjoy!

Credits

Kamil Khadeyev (illustration)

Learner Reviews

Learner
a year ago
What did you like about this course?
some quick basic introduction to svelte
Marcus Holmgren
a year ago
What did you like about this course?
I found it was a good introduction to what Svelte can do.
Learner
a year ago
What did you like about this course?
Concise and direct to the point! Awesome!
Adil
a year ago
What did you like about this course?
I liked the pace and also the pieces of information were well supported with examples. Well done!
Carlos Cruz
2 years ago
What did you like about this course?
Loved it, it's brief and to the point. Thanks!
Jon Barson
2 years ago
What did you like about this course?
Good beginner tutorial. Does not assume experience with other frameworks

Course Content

26m • 20 lessons

1
WTF is Svelte?
1m 7s
2
Create a new project with Svelte 3
33s
3
Add data to HTML markup using Svelte 3
35s
4
Add styles to Svelte 3 component
48s
5
Create a new Svelte 3 component to render it inside of another component
1m 16s
6
Declare and pass in properties to a Svelte 3 component
1m 18s
7
Compose components with slots in Svelte 3
1m 18s
8
Use named slots to compose multiple components in Svelte 3
1m 45s
9
Render HTML directly into a component in Svelte 3
46s
10
Use Svelte 3 transitions to gracefully show and hide DOM elements
1m 39s
11
Use reactive declarations to compute component state in Svelte 3
1m 27s
12
Loop over and render a list of data using an `each` block in Svelte 3
1m 15s
13
Use await block to wait for a promise and handle loading state in Svelte 3
1m 23s
14
Use DOM events and event modifiers in Svelte 3
1m 22s
15
Use an onMount lifecycle method to fetch and render data in Svelte 3
1m 4s
16
Use Svelte 3 stores to share data between multiple unrelated components
1m 44s
17
Set a value to a Svelte 3 store
45s
18
Use auto-subscriptions in Svelte 3 to avoid memory leaks when using Stores
1m 17s
19
Tween a value and dynamically update the DOM with Svelte 3
1m 32s
20
Create a new Svelte project with TypeScript support
3m 35s

You might also like these resources:

Introduction to Cloudflare Workers

Kristian Freeman・36m・Course

Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

Create an eCommerce Store with Next.js and Stripe Checkout

Colby Fayock・1h 4m・Course

This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

Practical Git for Everyday Professional Use

Trevor Miller・1h・Course

git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.