English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 15.5 Hours | 6.40 GB
Learn Svelte.js by Building Interesting Projects
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.
What you’ll learn
- Create Blazingly Fast Apps with Svelte
Table of Contents
Course Intro
1 Svelte Info
2 Course Requirements
3 Text Editor Setup
4 Video Quality
5 Review
Svelte Tutorial – Budget Calculator Project
6 Intro
7 Props Basics
8 CSS
9 Each Block
10 Expenses Data
11 Expenses Component
12 Else and Passing Props
13 Expense Component
14 If Block
15 Events
16 Component Communication
17 Starter Application
18 Prop Drilling
19 SetContext and GetContext
20 createEventDispatcher
21 Clear Expenses Button
22 Reactivity
23 Form Setup
24 Two Way Binding
25 Empty Values Functionality
26 Form Submission
27 Add New Expense
28 Folder Structure
29 setModifiedExpense
30 Pass Edit Values into Form
31 editExpense
32 OPTIONAL – Different Approach
33 OPTIONAL – Different Approach
34 Toggle Form
35 Lifecycle Functions
36 Setup LocalStorage API
37 afterUpdate
38 slot basics
39 Setup Files
40 Complete Modal
41 Transition Basics
42 Transtion Parameters
43 Transtion – in and out
44 Modal Transtions
45 Simple Expense Transtion
46 Key Expression in Each Block and animate
47 HTTP Request using onMount
48 HTTP Request using #Await Blocks
49 Deploy on Netlify – Drag and Drop
50 Add Global CSS and Font-Awesome
52 Deploy on Netlify – Continuous Deployment
53 Component Overview
54 Navbar Component Intro
55 Navbar Component
56 Title Component
Razors E-Commerce Project
57 Intro
58 Local Data Structure
59 Svelte Store BenefitsBasics
60 Products Store Setup
61 Flatten Products
62 Store Unsubscribe
63 Store Unsubscribe Shorthand
64 Products Component Complete
65 Single Product Complete
66 Loading Component
67 Featured Products
68 Intro
69 Derived Stores
70 Single Product Page
71 sveltehead element
72 Small Navbar
73 Cart Button
74 Big Navbar
75 Links
76 Toggle Navbars
77 Basic Sidebar
78 Global Store Basics
79 Setup Files
80 Setup Close Sidebar Function
81 Use Close Sidebar Function
82 Sidebar Transitions
83 Cart Basics
84 Cart Structure
85 Cart Store Initial Setup
86 Cart Items
87 Single Cart Item
88 Cart List Transitions
89 Cart Total
90 Bootstrap Svelte Application
91 Remove Item
92 Increase Amount
93 Decrease Amount
94 Decrease Amount Refactor – OPTIONAL
95 Add To Cart
96 LocalStorage Setup
97 User Store Setup
98 LoginLogout Links
99 Checklist
100 Strapi Info
101 Folder Structure and Resources
102 Bootstrap Strapi App
103 Strapi Basics
104 Products Content Type
105 Add Products
106 API Access
107 getProducts
108 Products Store
109 Image Problem Fix
110 Login Page – Variables
111 Login Page – HTML
113 Setup Project Pages
114 Login Page – Basic Functionality
115 Login – General Overview
116 registerUser Function
117 loginUser Function
118 User Store Update
119 setupUser Function
120 navigate
121 Alert Basics
122 Configure Alert
123 Alert with Form Sumbissions
124 Svelte Router Setup
125 Close Alert Programmatically
126 Double Check Login Functionality
127 Checkout Page Overview
128 Checkout Page Basics
129 Restrict Access
130 Empty Cart
131 Checkout Form – Basic Setup
132 Setup Stripe Account
133 Stripe Elements – HTML
134 Stripe Elements – Javascript
135 Url Parameters
136 Stripe Token
137 Empty Cart Error
138 Order Content Type
139 Submit Order Function
140 Complete Submit Order
141 Complete App
143 Free Claudinary Account
144 Connect Claudinary with Strapi
145 Free Heroku Account
146 Install Heroku CLI
147 Hero Component
148 Deploy Strapi on Heroku
149 Setup Backend
150 Deploy Svelte APP on Netlify
Resolve the captcha to access the links!