w3docs logo
Iniciar sesión

Svelte.js - The Complete Guide

Build high-performance web applications with SvelteJS - a lightweight JavaScript compiler

Start
  1. Courses
  3. Svelte.js - The Complete Guide

Svelte.js (or just "Svelte") is a modern JavaScript compiler that allows you to write easy-to-understand JavaScript code which is then compiled to highly efficient code that runs in the browser.

You'll write your frontend application using normal JavaScript, following specific rules laid out by Svelte (which are of course taught in this course). As a result, the Svelte compiler will produce a small and highly optimized JavaScript bundle which can be deployed.

In this course, you'll learn all about Svelte, how it works, its core features and how to run your final app on a real server!

Svelte.js is a tool for building highly reactive, modern user interfaces for the web - and it's a great alternative to JavaScript frameworks and libraries like React.js, Angular or Vue.

What will you learn?

  • What is Svelte and why would you use it?
  • All the core features and base syntax
  • How to render conditional and list content
  • How to write reactive and fast web applications
  • All about components, how to pass data around and how to create re-usable building blocks
  • How to efficiently manage data in your application via Svelte stores
  • How to reach out to a backend server and send + fetch data
  • How to pre-render your app on a server and improve SEO

Is this course for you?

Svelte is a popular alternative to React.js, Angular and Vue and learning it will benefit any frontend web developer.

You don't need to know these frameworks to learn Svelte though - but if you do know them, you'll learn about an interesting alternative which might allow you to build your web projects with less code (and get an even faster app along the way!).

You need NO advanced JavaScript knowledge, basic knowledge will do.

If you're interested in building modern, reactive user interfaces that load quickly and run fast, SvelteJS is a tool you shouldn't overlook!

What's in the course?

  • Learn Svelte from scratch - zero knowledge assumed!
  • Theory and practice modules
  • A complete course project (the "meetup planner")
  • Assignments and tasks
  • All source code is attached to lectures and modules
  • 30 day trial phase - get your money back with no questions asked if you're not happy!

Section: Getting Started

1. Introduction (2:38)
2. Why Svelte? (7:13)
3. What is Svelte? (4:29)
4. Join our Online Learning Community (1:00)
5. Setting Up a First App & The Course Project (11:09)
6. Writing Some Svelte Code (7:26)
7. Course Outline (4:48)
8. How To Get The Most Out Of The Course (3:27)
9. Course Resources (1:00)

Section: Base Syntax & Core Features

10. Module Introduction (3:55)
11. Using Curly Braces & Understanding the Core Syntax (5:36)
12. Reactive Variables (5:48)
13. More Reactivity (2:09)
14. Binding to Element Properties (4:16)
15. Two-Way Binding Shortcut (1:41)
16. Using Multiple Components (8:30)
17. Components & Communication via Props (3:45)
18. Diving Deeper into Bindings (6:00)
19. Using Self-Extending Properties (1:10)
20. Outputting HTML Content (3:32)
21. A XSS Example (1:00)
22. Setting Dynamic CSS Classes (4:15)
23. Assignment - Basics (Problem) (2:13)
24. Assignment - Basics (Solution) (10:27)
25. Wrap Up (1:16)
26. Useful Resources & Links (1:00)

Section: Working with Conditionals & Loops

27. Module Introduction (0:49)
28. Using "if" Statements in HTML (5:25)
29. if, else & else-if (4:27)
30. Outputting Lists with "each" (8:05)
31. "each", "else" & Extracting the Index (2:11)
32. Lists & Keys (9:55)
33. Assignment - Conditionals & Loops (Problem) (1:19)
34. Assignment - Conditionals & Loops (Solution) (9:07)
35. A Closer Look at List Keys (4:16)
36. Wrap Up (0:36)
37. Useful Resources & Links (1:00)

Section: A Closer Look At Reactivity

38. Module Introduction (0:58)
39. Updating Arrays & Objects Immutably (2:29)
40. Understanding Event Modifiers (5:04)
41. Using Inline Functions (3:11)
42. Wrap Up (0:44)
43. Useful Resources & Links (1:00)

Section: Course Project - First Steps

44. Module Introduction (1:18)
45. Project Setup & A First Component (8:41)
46. Different Ways of Mounting Components (5:07)
47. How to Embed Widgets (1:00)
48. Adding Data (3:35)
49. Adding a New Component (MeetupItem) (4:18)
50. Working with Different Component Types (3:32)
51. Passing Data Into Components (5:37)
52. Adding a "MeetupGrid" Component (4:25)
53. Adding New Meetups via a Form (9:24)
54. Creating a "TextInput" Component (11:08)
55. Adding a Custom "Button" Component (5:58)
56. Wrap Up (2:20)
57. Useful Resources & Links (1:00)

Section: Diving Deeper Into Components

58. Module Introduction (1:43)
59. Understanding the Different Component Types (1:40)
60. Component Communication Overview (3:01)
61. Event Forwarding (4:52)
62. Emitting Custom Events (4:54)
63. How to Extract Event Data (2:27)
64. Using Spread Props & Default Props (6:56)
65. Working with Slots (6:25)
66. Named & Default Slots (3:30)
67. Example: Opening & Closing a Modal (3:18)
68. Using Slot Props (5:26)
69. The Component Lifecycle - Theory (4:53)
70. Creation & Update Lifecycle Hooks in Action (7:27)
71. Using "tick()" (9:18)
72. Wrap Up (0:56)
73. Useful Resources & Links (1:00)

Section: Course Project - Components Deep Dive

74. Module Introduction (0:33)
75. Adding Default Props (3:22)
76. Communication via Custom Events (11:16)
77. Utilizing Slots (5:11)
78. Creating an "EditMeetup" Component (7:56)
79. Communicating Between Components (3:45)
80. Time for More Slots! (3:21)
81. Adding a Re-Usable "Modal" Component (7:05)
82. Finishing the "Modal" Component (3:29)
83. Wrap Up (0:37)
84. Useful Resources & Links (1:00)

Section: Working with Bindings & Forms

85. Module Introduction (0:34)
86. Two-Way Binding Refresher (2:46)
87. Understanding Custom Component Bindings (6:05)
88. Relying on Automatic Number Conversion (2:55)
89. Binding Checkboxes & Radio Buttons (4:53)
90. Binding Dropdowns (2:04)
91. Binding to Element References (5:17)
92. Binding to Component References (2:49)
93. Validating Forms & Inputs (6:42)
94. Wrap Up (0:58)
95. Useful Resources & Links (1:00)

Section: Course Project - Bindings & Forms

96. Module Introduction (0:33)
97. Exploring Different Validation Solutions (2:31)
98. Adding Validation & Error Output to the "TextInput" Component (3:36)
99. Adding Some Validation Logic (3:24)
100. Finishing "TextInput" Validation (7:00)
101. Validating the Overall Form (2:50)
102. Improvements & Wrap Up (3:16)
103. Useful Resources & Links (1:00)

Section: Managing State & Data with Stores

104. Module Introduction (1:03)
105. What's the Problem? (3:41)
106. Creating a Writable Store & Subscribing (5:34)
107. Updating Store Data (4:35)
108. Stores and Stateful & Presentational Components (1:56)
109. Managing Store Subscriptions (3:52)
110. Using Autosubscriptions (2:49)
111. A Second Store! (6:48)
112. Subscribing for a Short Period (3:48)
113. Understanding Readable Stores (8:45)
114. Unlimited Power with Custom Stores (7:56)
115. Wrap Up (1:21)
116. Derived Store & Store Bindings (1:00)
117. Useful Resources & Links (1:00)

Section: Course Project - Stores

118. Module Introduction (1:13)
119. Setting Up a Store (3:00)
120. Using a Custom Store (8:09)
121. Tapping into the Store from Different Components (5:06)
122. Adding a "MeetupDetail" Component (12:33)
123. Preparing the "Edit Meetup" Form (5:09)
124. Continuing Work on the "Edit" Feature (9:13)
125. Adding a "Delete" Functionality (3:22)
126. Adding a "Filter" Component (8:48)
127. Some Final Steps (2:36)
128. Wrap Up (0:48)
129. Useful Resources & Links (1:00)

Section: Motion, Transitions & Animations

130. Module Introduction (0:53)
131. Animating Values with a Tweened Store (6:54)
132. Using a Spring Store Instead (8:20)
133. Preparing a Transition Example (3:38)
134. Element Transitions (6:30)
135. More on Transitions (5:17)
136. Using Different "in" and "out" Transitions (1:30)
137. Animating Passive (Affected) Items (2:51)
138. Deferred Transitions (1:00)
139. Wrap Up (0:47)
140. Useful Resources & Links (1:00)

Section: Course Project - Transitions

141. Module Introduction (1:03)
142. Animating the Modal (3:26)
143. Animating the Meetup Items (4:53)
144. Animating the "Favorite" Badge & Wrap Up (1:25)
145. Useful Resources & Links (1:00)

Section: Network Interaction via Http

146. Module Introduction (1:32)
147. Adding a REST API (2:44)
148. Sending Data via a POST Request (6:58)
149. Showing a Loading Indicator & Sending Correct Data (3:16)
150. Fetching & Transforming Data (4:12)
151. Things to Consider (2:48)
152. Using the "await" Block (3:35)
153. Http + A Store (5:34)
154. Wrap Up (0:59)
155. Useful Resources & Links (1:00)

Section: Course Project - Http

156. Module Introduction (0:34)
157. Storing Meetups on a Server (9:16)
158. Fetching & Transforming Data (4:53)
159. Adding a Loading Spinner (5:44)
160. Updating via PATCH (6:32)
161. Sending "Favorite" Updates & Deleting Data (3:56)
162. Fixing the Order of Items (1:09)
163. Adding Error Handling (7:13)
164. Wrap Up (0:47)
165. Useful Resources & Links (1:00)

Section: Special Elements

166. Module Introduction (0:35)
167. Dynamic Components (7:22)
168. Recursive Components (6:10)
169. Accessing Windows, Body & Head (6:45)
170. Cross-Component Scripts (5:38)
171. Useful Resources & Links (1:00)

Section: Routing & Server-side Rendering with Sapper

172. Module Introduction (0:46)
173. What and Why? (4:58)
174. Understanding the Folder Structure (2:53)
175. Inspecting the Web Page (2:20)
176. Filenames & Routes (6:45)
177. Error & Layout Pages (2:16)
178. Preloading in Components (5:12)
179. Pre-fetching Data (6:31)
180. Migrating the Meetup Project Files into the Sapper Project (6:45)
181. Fetching Data on the Client Side (9:14)
182. Prefetching Data on the Server (6:12)
183. Syncing Fetched Data & the Store (3:32)
184. Editing & Deleting Meetups (1:58)
185. Rendering the MeetupDetail Page (7:49)
186. Adding Global CSS (0:43)
187. Wrap Up (0:37)
188. Useful Resources & Links (1:00)

Section: Deployment

189. Module Introduction (0:35)
190. Different App Types & Deployment Options (4:35)
191. Building the App (4:38)
192. Rendering Content Correctly on the Server (2:52)
193. Deploying a SSR App (3:19)
194. Hosting a Static Site (4:49)
195. Wrap Up (0:42)
196. Useful Resources & Links (1:00)

Section: Course Roundup

197. Svelte vs React vs Angular vs Vue (8:56)
198. Course Summary (2:44)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.