Svelte Tutorial and Projects Course

Name: Svelte Tutorial and Projects Course
Rating: 4.5 (223 reviews)

Learn Svelte.js by Building Interesting Projects

(223 ratings)

1,612 students

Created by John Smilga

Last updated 5/2021

English

English [Auto]

30-Day Money-Back Guarantee

What you'll learn

Create Blazingly Fast Apps with Svelte

Curated for the Udemy for Business collection

3 sections • 150 lectures • 15h 26m total length

Preview01:21
Preview03:34
Text Editor Setup
01:59
Preview01:35
Preview00:30

Preview02:46
Starter Application
04:40
Folder Structure
08:51
Setup Files
00:04
Add Global CSS and Font-Awesome
03:02
Component Overview
04:45
Preview05:43
Preview07:17
Title Component
03:32
Props Basics
09:43
CSS
09:32
Each Block
09:48
Expenses Data
04:04
Expenses Component
11:49
Else and Passing Props
12:56
Expense Component
04:24
If Block
03:51
Events
09:46
Component Communication
06:55
Prop Drilling
09:14
SetContext and GetContext
10:02
createEventDispatcher
09:52
Clear Expenses Button
04:53
Reactivity
15:07
Form Setup
07:57
Two Way Binding
07:43
Empty Values Functionality
12:18
Form Submission
05:18
Add New Expense
06:28
setModifiedExpense
11:04
Pass Edit Values into Form
13:01
editExpense
06:16
OPTIONAL - Different Approach
00:10
OPTIONAL - Different Approach
13:15
Toggle Form
07:33
Lifecycle Functions
05:50
Setup LocalStorage API
10:05
afterUpdate
06:39
slot basics
10:30
Complete Modal
04:32
Transition Basics
08:36
Transtion Parameters
03:35
Transtion - in: and out:
01:55
Modal Transtions
02:28
Simple Expense Transtion
06:44
Key Expression in Each Block and animate
09:26
HTTP Request using onMount
14:57
HTTP Request using #Await Blocks
06:50
Deploy on Netlify - Drag and Drop
03:44
Deploy on Netlify - Continuous Deployment
05:38
Preview00:05

Preview00:14
Intro
13:19
Setup Files
00:05
Bootstrap Svelte Application
03:22
Folder Structure and Resources
05:22
Setup Project Pages
07:27
Important Svelte Router Update !!!
00:12
Svelte Router Setup
09:06
Url Parameters
04:52
Hero Component
10:29
Local Data Structure
03:59
Svelte Store Benefits/Basics
05:32
Products Store Setup
11:23
Flatten Products
05:11
Store Unsubscribe
02:45
Store Unsubscribe Shorthand
02:20
Products Component Complete
05:36
Single Product Complete
07:45
Loading Component
04:46
Featured Products
06:43
Derived Stores
07:15
Single Product Page
11:41
svelte:head element
03:18
Small Navbar
09:35
Cart Button
03:27
Big Navbar
05:00
Links
04:36
Toggle Navbars
05:32
Basic Sidebar
07:01
Global Store Basics
08:17
Setup Close Sidebar Function
04:47
Use Close Sidebar Function
05:46
Sidebar Transitions
01:45
Cart Basics
06:18
Cart Structure
11:36
Cart Store Initial Setup
07:10
Cart Items
08:16
Single Cart Item
06:50
Cart List Transitions
02:49
Cart Total
05:32
Remove Item
07:43
Increase Amount
08:45
Decrease Amount
04:56
Decrease Amount Refactor - OPTIONAL
01:14
Add To Cart
09:05
LocalStorage Setup
06:32
User Store Setup
04:20
Login/Logout Links
09:47
Checklist
05:13
Strapi Info
01:39
Bootstrap Strapi App
04:17
Strapi Basics
03:15
Products Content Type
04:16
Add Products
03:59
API Access
05:30
getProducts
04:27
Products Store
08:51
Image Problem Fix
04:21
Login Page - Variables
04:49
Login Page - HTML
13:23
Login Page - Basic Functionality
08:32
Login - General Overview
06:13
registerUser Function
11:17
loginUser Function
06:10
User Store Update
06:30
setupUser Function
10:56
navigate
05:06
Alert Basics
07:20
Configure Alert
10:54
Alert with Form Sumbissions
04:53
Close Alert Programmatically
02:15
Double Check Login Functionality
02:41
Checkout Page Overview
00:55
Checkout Page Basics
02:19
Restrict Access
02:48
Empty Cart
02:43
Checkout Form - Basic Setup
06:50
Setup Stripe Account
04:21
Stripe Elements - HTML
07:37
Stripe Elements - Javascript
08:52
Stripe Token
05:08
Empty Cart Error
01:43
Order Content Type
03:53
Submit Order Function
12:39
Complete Submit Order
13:07
Complete App
07:40
Free Claudinary Account
01:58
Preview00:29
Connect Claudinary with Strapi
07:05
Free Heroku Account
01:49
Install Heroku CLI
02:31
Deploy Strapi on Heroku
13:22
Setup Backend
05:46
Deploy Svelte APP on Netlify
02:20

Requirements

Basic Knowledge of Javascript (Vanilla JS)

Description

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.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

The course will consist of two sections. In the first section, the budget calculator project /svelte tutorial we will cover Svelte basics, and in the second part, Razors E-commerce project, we will implement Svelte to build a big project project.

All project intro videos are available for preview.

Who this course is for:

Everyone Interested in Building Blazingly Fast Apps With Svelte

Featured review

Craig West

120 courses

65 reviews

a year ago

This is an excellent course! I have done Max's too which is also excellent. John covers all the tricky bits like navigation and setting up with payments etc. It is those areas that can be the trickiest. I like the way the first project is a very powerful CRUD example. This is incredibly useful. Thank you John for creating complete applications from navigation to deployment and integration with other services.

John Smilga

Instructor

4.7 Instructor Rating
8,333 Reviews
60,472 Students
7 Courses

Hello, I am John Smilga and I am a web developer. I live and work in Los Angeles, CA. I spend most of my day, experimenting with HTML, CSS and Javascript (and it's endless list of frameworks). I enjoy coding and the challenge of learning something new everyday. You can also find me at youtube channel Coding Addict.

Svelte Tutorial and Projects Course

What you'll learn

Course content

Course Intro5 lectures • 9min

Svelte Tutorial - Budget Calculator Project51 lectures • 6hr 5min

Razors E-Commerce Project94 lectures • 9hr 12min

Requirements

Description

Who this course is for:

Featured review

Instructor