Svelte Tutorial and Projects Course
846 students enrolled
Svelte Tutorial and Projects Course
Learn Svelte.js by Building Interesting Projects
Highest Rated
846 students enrolled
Current price: $13.99
Original price: $19.99
Discount:
30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
- 15.5 hours on-demand video
- 8 articles
- 39 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Training 5 or more people?
Get your team access to 4,000+ top Udemy courses anytime, anywhere.
Try Udemy for Business
What you'll learn
- Create Blazingly Fast Apps with Svelte
Course content
Expand all
151 lectures
15:26:32
+
–
Course Intro
5 lectures
09:04
+
–
Svelte Tutorial - Budget Calculator Project
52 lectures
06:05:23
Starter Application
04:40
Folder Structure
08:51
Setup Files
00:04
Add Global CSS and Font-Awesome
03:02
Component Overview
04:45
Preview
07: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
Important Svelte Update !!!
00:09
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
Preview
00:05
+
–
Razors E-Commerce Project
94 lectures
09:12:04
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
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
Yosef Cohen
(
127 courses,
98 reviews
)
8 months ago
Wonderful !!!!!!
I have finished this course !!!!!!!
That's the best svelte course on the web (and I did Max course too).
There is in this course an amazing real world project
The instructor makes clear explanations !!!
I really enjoyed from it !!!!
Just one wish - Please do a course on Sapper too !
It shouldn't be long ... just one good project.
Thanks !