Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee

This course includes:

  • 15.5 hours on-demand video
  • 7 articles
  • 39 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Svelte Framework

Svelte Tutorial and Projects Course

Learn Svelte.js by Building Interesting Projects
Rating: 4.6 out of 54.6 (179 ratings)
1,264 students
Created by John Smilga
Last updated 7/2020
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

Course content

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

  • Preview01:21
  • Preview03:34
  • Text Editor Setup
    01:59
  • Video Quality
    01:37
  • Review
    00:33

  • 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
Craig West
104 courses
64 reviews
Rating: 5.0 out of 57 months 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.

Instructor

John Smilga
Instructor
John Smilga
  • 4.7 Instructor Rating
  • 6,321 Reviews
  • 53,876 Students
  • 6 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.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.