Svelte Tutorial and Projects Course

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course 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

Instructor

Instructor
  • 4.7 Instructor Rating
  • 9,085 Reviews
  • 62,916 Students
  • 8 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.

Expected Outcomes

  1. Create Blazingly Fast Apps with Svelte Curated for the Udemy Business collection Course content 4 sections • 151 lectures • 15h 26m total length Expand all sections Course Intro 5 lectures • 9min Svelte Info Preview 01:21 Course Requirements Preview 03:34 Text Editor Setup 01:59 Video Quality Preview 01:35 Review Preview 00:30 Svelte Tutorial - Budget Calculator Project 51 lectures • 6hr 5min Intro Preview 02: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 Navbar Component Intro Preview 05:43 Navbar Component 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 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 Finished Application Preview 00:05 Razors E-Commerce Project 94 lectures • 9hr 12min Intro Preview 00: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 IMPORTANT STRAPI UPDATE Preview 00: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 Bonus 1 lecture • 1min Bonus 00:12 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 Show more Show less Featured review Craig West 125 courses 65 reviews Rating: 5.0 out of 5 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. Show more Show less Instructor John Smilga Instructor 4.7 Instructor Rating 9,085 Reviews 62,916 Students 8 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. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6777ef63ee892c7e',m:'65d7a9f70fda9f26e16fc8585425de09aa036717-1627746132-1800-AXzGEcADqYcJfy80MWzowQ4Z+pmWOUuZgixfejo9PtjhpkTXnGDhPPPGuMI2D3L0/howGJIm5SaFnmaPtwxJOf0m+fBfZFvPWaR8F95FezG+qxIlw48Y9Nkpx5nKH6vr7g5a71VgwBQz+9nma3i+CDuurvfiSww65WiI9CTn35sg',s:[0x377ee022b0,0x184155de2d],}})();