Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Svelte Framework
Svelte & SvelteKit: The Complete Guide

Svelte & SvelteKit: The Complete Guide

Loại khoá học: Web Development

Build & Deploy High Performance, Accessible, Server Side Rendered Web Apps that Work Even with JavaScript Disabled.

image
50.000 VND
1.499.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

NOTE: The duration of the main content of the course is about 17.5 hours. The rest is for creating the Spotify app.


Svelte is a JavaScript framework that allows you to build state driven components. However what makes Svelte different from other frameworks like Angular, React and Vue; is that Svelte is a compiler. Svelte runs at build time. Which means your Svelte code will be compiled at build time into highly efficient imperative code that runs on the browser to carry out DOM operations. Other famous frameworks usually use a technique called the virtual DOM to decide how to update the DOM. This technique runs in the browser during run time. And that adds more overhead to the DOM calculations.


In this course we are going to learn everything about Svelte from scratch. We will start with the basics by creating simple components. And then gradually progress and create more complex components.


And while Svelte is a great tool to build components for the web, it's not an easy task to build an entire application with just Svelte. That's why we have SvelteKit. SvelteKit is a framework for rapid development of robust, performant web applications. SvelteKit provides us out of the box with things like routing, server side rendering, pre-rendering and more. It provides us with a structure that we can follow to build high performance applications that are server side rendered and progressively enhanced.


In this course we are going to learn everything about SvelteKit. We are going to discuss pages and layouts, loading data, hooks, error handling, environment variables, pre-rendering, progressively enhanced form actions and more.


Finally we are going to bring everything together by building a Spotify clone with Svelte, SvelteKit and the Spotify API. Bringing together all the knowledge that we have learned during the course. You can check a demo of the app that we are going to build in the free videos.


So join now if you want to build high performance web applications with Svelte & SvelteKit!

Bạn sẽ học được gì

Learn everything about Svelte from Scratch.

Learn everything about SvelteKit.

Use SvelteKit to create a high performance web application.

Create applications that work without JavaScript enabled.

Yêu cầu

  • JavaScript Knowledge is Required.
  • Basic TypeScript Knowledge is Preferred.

Nội dung khoá học

17 sections

Introduction to Svelte

5 lectures
Before Getting Started
02:34
A Demo of the App that We Are Going to be Building
07:31
What is Svelte?
09:18
Tools & Extensions
02:36
Svelte vs. SvelteKit
01:20

Getting Started With Svelte

6 lectures
Creating a Svelte Vite Template
09:48
Svelte Components Basic Structure
11:08
Exploring State With A Simple Counter Component
07:35
Reactive Statements
04:40
Reactive Statements Gotchas
07:40
Component Props
07:50

Exploring More Svelte by Creating a Button Component

8 lectures
Accessing Component Children With Slots
05:36
Using SCSS in a Svelte Project Using svelte-preprocess
06:16
Adding Classes Dynamically Using The Class Directive
07:17
The Style Directive
07:25
Using Named Slots
08:41
Using Slot Props
07:11
Event Forwarding and Modifiers
05:05
Forwarding Props With $respProps
04:14

Diving Deeper With a Todo List Component

22 lectures
{#each} Loops
08:00
Binding Input Value to a Variable
06:02
Updating Arrays & Objects in Svelte
05:24
Binding Component Props
04:20
Custom Component Events
10:59
Working With Immutable Data
03:54
Removing Todos Event
04:39
Toggling Todos Event
06:02
Readonly Props
07:13
Code Debugging in Svelte
04:07
Component Lifecycle Functions
08:34
Lifecycle Functions Practical Example
09:53
Binding Dimensions
04:29
The tick lifecycle function
04:10
Cleaning Up Our Component
05:25
Styling Our Component
15:47
The {#await} Block
09:17
onMount Loading and Handling Loading & Error States
08:09
Adding Todos From the API
09:21
Removing Todos Using the API
07:13
Toggling Todos [Exercise Solution]
01:51
Making the Component More Customizable with Slots
11:55

Animations & Transitions

9 lectures
Introduction to Transitions
08:12
Animating Our Todos
03:55
{#key} Transitions
05:18
The FLIP Animation
08:24
Custom CSS Transitions
08:55
Custom CSS Transitions (Cont.)
04:27
Custom JavaScript Transitions
04:36
Displaying Done and Undone Lists Separately
07:23
The Crossfade Transition
06:37

Actions

4 lectures
Introduction to Actions
07:42
The Longpress Action
08:17
Using Tippy.js in Svelte Without Actions
05:48
Creating a Tippy.js Action
05:43

Stores

11 lectures
Creating a Mini Router for Testing
08:39
Store Application Settings With Writable Stores
13:20
Auto-subscriptions & Store Binding
05:35
Using the Settings Store Color Scheme Value
06:46
Store Callback Function
05:36
Store Current Location With Readable Stores
11:19
Custom Stores
12:11
Derived Stores
07:53
Tweened Writable Stores
09:43
Custom Interpolations In Tweened Stores
08:27
Spring Writable Stores
04:33

The Context API

14 lectures
Introduction to the Context API
01:57
Handling a Form Without Context
13:21
Creating Form & Field Components
08:32
Using Context to Pass Data Down to Children
08:48
Combining Context & Stores to Make Our Context Reactive
07:42
Handling Form Validation
16:23
Using Slots & Slot Props For More Component Customization
08:37
Using Konva.js Library Imperatively
07:59
Creating a Konva Stage Component
08:08
Creating Layer & Rect Components
11:19
Handling Destroying Layers & Rects
05:50
Handling Updating Konva.js Components
06:53
Handling Konva.js Events
06:49
Using Read-Only Props to Access Our Rect Object
04:50

Module Context

5 lectures
What is Module Context
02:15
Using Module Context to Keep Track of Component Instances
09:43
Creating a Simple Video Player Component & Binding Media Information
07:26
Pausing Other Videos When Playing a Video
06:50
Playing & Pausing All Videos
02:34

SvelteKit: Pages & Layouts

12 lectures
Introduction to SvelteKit
01:56
Creating a New SvelteKit Project
07:24
Creating Routes
08:44
The $lib Folder Alias & Custom Aliases
06:58
Navigation Functions: goto(), beforeNavigate() & afterNavigate()
08:26
Rest Parameters
05:28
Optional Parameters
03:21
Parameter Matchers
06:40
Layouts Basics
09:02
Changing Layouts Conditionally
03:06
Layout Groups
07:17
Breaking Out of Layouts Hierarchy
07:13

SvelteKit: Loading Data

17 lectures
Shared Load Function (Server & Client)
08:36
Type-safety with Generated Types
06:40
Displaying Our Loaded Data
05:31
Server Only Load Functions
08:21
Layout Load Functions
06:51
Product Page Exercise + Errors & Rediercts
10:15
Passing Data From a Page to its Parent Layout
08:17
Controlling Routes' Response and Creating Endpoints
10:10
Handling Pages & Endpoints in the Same Route and Creating POST Endpoints
08:44
Load Function Inputs
07:52
Using Fetch in SvelteKit
12:01
[UPDATE] Data Streaming with Promises
09:29
Creating a Login Page and Endpoint
09:34
Using Cookies to Login and Logout
12:42
Re-running All Load Functions
10:04
Re-running Specific Load Functions
08:33
[UPDATE] Capturing & Restoring Data with Snapshots
04:31

SvelteKit: Hooks, Error Handling, Environment Variables & Private Modules

8 lectures
The Handle Hook
12:34
Using the Locals Object
10:33
The handleFetch Hook
07:13
Quick Fix
01:58
Handling Expected Errors
14:49
Handling Unexpected Errors
08:48
Using Environment Variables
14:45
Server Only Modules
04:02

SvelteKit: Preloading Pages & Link Options

4 lectures
Preloading Pages' Data
09:02
Preloading Pages' Code
04:37
Reload and No Scroll Link Options
04:58
Preloading Code and Data Programmatically
04:21

SvelteKit: Page Options & Pre-rendering

6 lectures
SSR, CSR and trailingSlash Options
08:12
Pre-rendering Pages and Endpoints
09:51
Pre-rendering Pages with Dynamic Content
05:07
Pre-rendering Pages with Dynamic Parameters
11:37
Adding Dynamic Data in a Pre-rendered Page
03:59
$app/environment Module
03:54

SvelteKit: Form Actions

9 lectures
What are Form Actions?
09:43
Quick Note
00:09
Logging In Using a Form Action
08:38
Redirecting in Form Actions
04:54
Named Form Actions
07:13
Enhancing Our Form with JavaScript
09:14
Customizing the Enhance Action
14:27
[Exercise Solution] Showing Validation Errors Using the Enhance Action
11:22
Using Forms with GET Method
03:10

SvelteKit: Deployment

5 lectures
Adapters Overview
04:00
Building & Running Our App with the Node Adapter
04:36
Deploying to Heroku
06:50
Deploying to Vercel
06:53
Deploying to Netlify
05:08

Let's Create a Spotify App with Svelte & SvelteKit

82 lectures
Creating a New SvelteKit Project And Installing a CSS Normalizer
03:47
Setting Up SASS
08:00
Adding Global Styles
06:18
Creating a Spotify App & Adding Environment Variables
04:14
Constructing a Spotify Login Request
12:51
Creating the Spotify Redirect Callback Endpoint
15:20
Populating the Root Layout With The Logged in Spotify User
14:06
Refreshing Expired Access Tokens
15:09
Logging Out Using An Endpoint
12:33
Adding Assets & Icons
04:36
Creating a Button Component
14:45
Using Typescript to Extend Native HTML Attributes
06:24
Creating & Styling the Login Page
13:02
Creating the Desktop Navigation Menu
14:13
Styling the Desktop Navigation Menu
07:46
Creating the Top Bar & Animating it On Scroll
13:33
Creating The Mobile Navigation Menu
14:55
Improving Menu's Accessibility
10:16
Implementing Focus Trap for The Navigation Menu
10:45
Creating An Icon Button Component
09:18
Finalizing Our Mobile Navigation Menu
10:24
Creating & Styling the User Menu Button
07:30
Creating a Tippy Svelte Action For Out Profile Menu
11:43
Adding a Tippy Theme & Styling The User Menu
07:49
Improving Tippy By Adding Tippy Plugins
09:35
Pages' Title Tag, Skip Link & Pages' Loading Indicator
13:22
Styling the Layout for Disabled JavaScript
13:42
Fetching Data From the Spotify API
07:18
Creating an Endpoint for Forwarding Spotify API Calls
09:26
Fetching the Home Page Data
18:25
Refreshing the Access Token During Client Side Navigation
17:42
Creating the Home Page Markup
12:08
Styling the Home Page
04:17
Creating a Card Component
12:09
Creating a Card Component (Cont.)
11:37
Creating the Album Page & Loading Album Data
11:14
ItemPage Component Markup
12:04
Styling The ItemPage Component
15:20
Getting The Average Colour of an Image
07:01
Using the Average Colour Endpoint in the Album Page
06:32
The TrackList Component Markup
10:39
The TrackList Component Styling
09:48
Creating an Audio Player Component
14:38
Using the Player Component in The TrackList Component
08:08
Handling the TrackList Component When JS is Disabled
07:21
Customizing Error Pages
11:50
Adding a Retry Button in Error Page
07:36
Playlist Page Data
07:21
Playlist Page Markup & Styling
13:53
Playlist Tracks Load More Button
09:08
Playlist Tracks Pagination For Disabled JS
13:17
Follow & Unfollow Playlist Form Actions
10:24
Follow & Unfollow Button
09:57
Enhancing Follow & Unfollow When JS is Enabled
08:33
Creating a Toasts Store & Component
11:33
Creating a Toasts Store & Component (Cont.)
15:03
Playlists Page Markup & Styling
11:08
Reusable Pagination Component
12:08
Adding a Create Playlist Page & Form Action
14:39
Moving the Playlist Form to a Separate Component
08:47
Edit Playlist Page & Form Action
15:19
Creating a Modal Component with Micromodal.js
12:02
Enhancing the Add Playlist Form
06:49
Enhancing the Edit Playlist Form
08:05
Fetching & Displaying All Playlists
14:46
Add Track to Playlist Button & Tippy Menu
11:00
Add Track to Playlist Form Markup & Styling
06:37
Add Track to Playlist Form Action
16:05
Enhancing the Add to Playlist Form
08:25
Removing Tracks From Playlists Form Action
06:28
Enhancing Removing Tracks From Playlists Form
05:49
Handling Add to Playlist Form Styling for Disabled JS
05:12
Creating The Profile Page
13:41
Creating The profile Page (Cont.)
11:04
[Exercise] The Artist Page
05:54
The Search Home Page
06:35
The Search Form Component
11:44
The Search Results Page
09:29
Listing Items Route Load Function
16:23
Listing Items Route Load Function (Cont.)
12:41
Listing Items Page Markup
11:20
Extra Code
04:37

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi