Svelte Tutorial and Projects Course

Learn Svelte.js by Building Interesting Projects

  • John Smilga
  • 4.63
  • (366 reviews)
  • 15.5 hrs
  • 151 lectures
  • Udemy
Svelte Tutorial and Projects Course

What you will learn?

  • Create Blazingly Fast Apps with Svelte

Your trainer

John Smilga

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.

151 lessons

Easy to follow lectures and videos covering subject details.

15.5 hours

This course includes hours of video material. Watch on-demand, anytime, anywhere.

Certificate of Completion

You will earn a Certificate of Completion at the end of this course.

Course curriculum

Course Intro08:59

  • Svelte Info01:21
  • Course Requirements03:34
  • Text Editor Setup01:59
  • Video Quality01:35
  • Review00:30

  • Intro02:46
  • Starter Application04:40
  • Folder Structure08:51
  • Setup Files00:04
  • Add Global CSS and Font-Awesome03:02
  • Component Overview04:45
  • Navbar Component Intro05:43
  • Navbar Component07:17
  • Title Component03:32
  • Props Basics09:43
  • CSS09:32
  • Each Block09:48
  • Expenses Data04:04
  • Expenses Component11:49
  • Else and Passing Props12:56
  • Expense Component04:24
  • If Block03:51
  • Events09:46
  • Component Communication06:55
  • Prop Drilling09:14
  • SetContext and GetContext10:02
  • createEventDispatcher09:52
  • Clear Expenses Button04:53
  • Reactivity15:07
  • Form Setup07:57
  • Two Way Binding07:43
  • Empty Values Functionality12:18
  • Form Submission05:18
  • Add New Expense06:28
  • setModifiedExpense11:04
  • Pass Edit Values into Form13:01
  • editExpense06:16
  • OPTIONAL - Different Approach00:10
  • OPTIONAL - Different Approach13:15
  • Toggle Form07:33
  • Lifecycle Functions05:50
  • Setup LocalStorage API10:05
  • afterUpdate06:39
  • slot basics10:30
  • Complete Modal04:32
  • Transition Basics08:36
  • Transtion Parameters03:35
  • Transtion - in: and out:01:55
  • Modal Transtions02:28
  • Simple Expense Transtion06:44
  • Key Expression in Each Block and animate09:26
  • HTTP Request using onMount14:57
  • HTTP Request using #Await Blocks06:50
  • Deploy on Netlify - Drag and Drop03:44
  • Deploy on Netlify - Continuous Deployment05:38
  • Finished Application00:05

  • Intro00:14
  • Intro13:19
  • Setup Files00:05
  • Bootstrap Svelte Application03:22
  • Folder Structure and Resources05:22
  • Setup Project Pages07:27
  • Important Svelte Router Update !!!00:12
  • Svelte Router Setup09:06
  • Url Parameters04:52
  • Hero Component10:29
  • Local Data Structure03:59
  • Svelte Store Benefits/Basics05:32
  • Products Store Setup11:23
  • Flatten Products05:11
  • Store Unsubscribe02:45
  • Store Unsubscribe Shorthand02:20
  • Products Component Complete05:36
  • Single Product Complete07:45
  • Loading Component04:46
  • Featured Products06:43
  • Derived Stores07:15
  • Single Product Page11:41
  • svelte:head element03:18
  • Small Navbar09:35
  • Cart Button03:27
  • Big Navbar05:00
  • Links04:36
  • Toggle Navbars05:32
  • Basic Sidebar07:01
  • Global Store Basics08:17
  • Setup Close Sidebar Function04:47
  • Use Close Sidebar Function05:46
  • Sidebar Transitions01:45
  • Cart Basics06:18
  • Cart Structure11:36
  • Cart Store Initial Setup07:10
  • Cart Items08:16
  • Single Cart Item06:50
  • Cart List Transitions02:49
  • Cart Total05:32
  • Remove Item07:43
  • Increase Amount08:45
  • Decrease Amount04:56
  • Decrease Amount Refactor - OPTIONAL01:14
  • Add To Cart09:05
  • LocalStorage Setup06:32
  • User Store Setup04:20
  • Login/Logout Links09:47
  • Checklist05:13
  • Strapi Info01:39
  • Bootstrap Strapi App04:17
  • Strapi Basics03:15
  • Products Content Type04:16
  • Add Products03:59
  • API Access05:30
  • getProducts04:27
  • Products Store08:51
  • Image Problem Fix04:21
  • Login Page - Variables04:49
  • Login Page - HTML13:23
  • Login Page - Basic Functionality08:32
  • Login - General Overview06:13
  • registerUser Function11:17
  • loginUser Function06:10
  • User Store Update06:30
  • setupUser Function10:56
  • navigate05:06
  • Alert Basics07:20
  • Configure Alert10:54
  • Alert with Form Sumbissions04:53
  • Close Alert Programmatically02:15
  • Double Check Login Functionality02:41
  • Checkout Page Overview00:55
  • Checkout Page Basics02:19
  • Restrict Access02:48
  • Empty Cart02:43
  • Checkout Form - Basic Setup06:50
  • Setup Stripe Account04:21
  • Stripe Elements - HTML07:37
  • Stripe Elements - Javascript08:52
  • Stripe Token05:08
  • Empty Cart Error01:43
  • Order Content Type03:53
  • Submit Order Function12:39
  • Complete Submit Order13:07
  • Complete App07:40
  • Free Claudinary Account01:58
  • IMPORTANT STRAPI UPDATE00:29
  • Connect Claudinary with Strapi07:05
  • Free Heroku Account01:49
  • Install Heroku CLI02:31
  • Deploy Strapi on Heroku13:22
  • Setup Backend05:46
  • Deploy Svelte APP on Netlify02:20

  • Bonus00:12
Enroll now
Online Courses

Learning Svelte doesn't have to be hard. Here is our curated list of recommended online courses that will guide you step-by-step in the learning process.

Learn more
Books

Are you an avid book reader? Do you prefer paperback, or maybe Kindle version? Take a look at our curated list of Svelte related books and take yourskills to the next level.

Learn more
YouTube videos

The number of high-quality and free Svelte video tutorials is growing fast. Check this curated list of recommended videos - there is no excuse to stop learning.

Learn more