Master Svelte Framework - The Complete Course 2023

Build a user-friendly website with Svelte and SvelteKit - inc. Firebase, SSR, and more!

What you'll learn

Learnt the foundations of Svelte and SvelteKit first, then take the next step

Learn Firebase with SvelteKit

Built your own interactive website with Svelte and SvelteKit

Create and mange user sign ups, log ins, and authentication

Build a 'Like' / 'Unlike' voting system for users

Everything you learn in this course and project build can be transferred over to your own site builds

Requirements

No prior Svelte or SvelteKit knowledge needed!

Students should know some basic Javascript.

Description

Welcome to Master Svelte Framework - The Complete CourseIn this 2023 course you'll master Svelte and SvelteKit AND learn how to build a fully-functional website as you do! It's a major website build that you can populate with users and user posts, profiles, voting and more - and it's a brilliant way to practice as you learn! As well as the main project, this XX hour course is filled with dozens of mini-exercises that challenge you to use what you've just learnt and apply it. This is a hands-on coding course! Why learn Svelte?!Write less code! Simplified and streamlined, Svelte is significantly quicker to script than React or VueEasy to learn! Svelte is all HTML, so for newer developers it's intuitive to use and easy to masterGrowing in popularity! Each year Svelte gets more and more popular and is now used by the New York Times, Ikea, Apple Music and more. Svelte is one of the most loved frameworks! In 2021 developers voted Svelte the 'most loved' framework (at 71.47%) and in 2022 Svelte love grew by almost 4% to 75.28% (Stackoverflow Developer Surveys 2021 and 2022)Master Svelte Framework- The Complete Course is a hands-on deep dive in to Svelte and Svelte Kit. Starting with the basics of each, you'll quickly move on to the main project that the course is built around - a giant Book Lover website project! Building this website put all your new skills to the test, and each new technique builds on what you just learnt! By the end of the course you'll be able to build a website from scratch that lets users….Register with an email and log in to the site with a passwordAdd their own book information  to the site via a form'Like' and 'Unlike' a book they see on the siteCreate a reactive profile page - with a 'My Books' page and a 'Favourite Books' page Learn Firebase and SSR with SvelteKit This course is aimed at beginners to Svelte andSvelteKit, and teaches students everything they need to dive in to Svelte Framework development. Students should have some basic Javascript knowledge. By the end of the course you'll have the skills and knowledge you need to build a site that users can log in to, post content to and vote on their favourite content. It's a lot of functionality, a lot of fun, and a great project for your portfolio too!  Enjoy the course, and happy coding! 

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: Svelte Introduction

Lecture 2 Introduction

Lecture 3 Svelte up and Running

Lecture 4 Svelte Project Tour

Lecture 5 Creating Svelte Components

Lecture 6 Outputting Javascript Variables

Lecture 7 Props

Lecture 8 Styles

Lecture 9 Binding Variables to Inputs

Lecture 10 Color Picker Challenge

Lecture 11 DOM Events

Lecture 12 Custom Events

Lecture 13 Reactive Statements

Lecture 14 Reactive Variable Challenge

Lecture 15 If template

Lecture 16 Each Template

Lecture 17 Each Template Id

Lecture 18 Await Template

Lecture 19 Magic The Gather Counter Challenge

Lecture 20 Deploying Magic Gather Challenge

Lecture 21 Lifecycle Events (onMount & onDestroy)

Lecture 22 Lifecycle Events (beforeUpdate & afterUpdate)

Lecture 23 Readable Stores

Lecture 24 Writable Stores

Lecture 25 Custom Stores

Lecture 26 Derived Stores

Lecture 27 Contact List Challenge

Lecture 28 Introduction to Actions

Lecture 29 Actions With Parameters

Lecture 30 Slots

Lecture 31 Draggable Component (Slot Challenge)

Lecture 32 Overview

Section 3: SvelteKit Introduction

Lecture 33 Introduction

Lecture 34 Getting Started

Lecture 35 SvelteKit Tour

Lecture 36 Pages and Routes

Lecture 37 Routing Parameters

Lecture 38 Server Load Function With Environment Variables

Lecture 39 Random Number Challenge

Lecture 40 Layouts

Lecture 41 Prefetching Links and Page Store

Lecture 42 Challenge build a personal webpage

Lecture 43 Deploying to Vercel

Lecture 44 Forms / Form Actions

Lecture 45 Form Challenge

Lecture 46 Page Rendering Options

Lecture 47 Error Pages

Lecture 48 API Routes

Lecture 49 Create hook

Lecture 50 Overview

Section 4: SvelteKit with Firestore, Firebase Auth and SSR

Lecture 51 Introduction

Lecture 52 Project Setup

Lecture 53 Firebase Setup

Lecture 54 Bootstrap Navbar

Lecture 55 Navbar Mobile Challenge

Lecture 56 Navbar Link Highlighting

Lecture 57 Messages

Lecture 58 Initialize Firebase Client Side

Lecture 59 Login with google

Lecture 60 Auth Store

Lecture 61 Logout

Lecture 62 Register Email And Password

Lecture 63 Login with email and password

Lecture 64 Forgot Password Workflow

Lecture 65 After Login Redirect

Lecture 66 Saving the user to Firestore Client Side

Lecture 67 Firebase initialize on the server

Lecture 68 Firebase server auth plan

Lecture 69 Token Endpoint

Lecture 70 Send Token After Register Challenge

Lecture 71 Refresh Token

Lecture 72 Logout server side

Lecture 73 Auth Hooks

Lecture 74 Add Book Validation Part 1

Lecture 75 Add Book Validation Part 2

Lecture 76 Save Book Database

Lecture 77 Show Book Page

Lecture 78 Edit Book Page

Lecture 79 Enhanced Forms

Lecture 80 Like Endpoint

Lecture 81 Like Component

Lecture 82 Toggling Like

Lecture 83 Books Home Page

Lecture 84 Like Component Bug

Lecture 85 Pagination

Lecture 86 Book Component & Home Page

Lecture 87 Profile Page Setup

Lecture 88 My Books

Lecture 89 Fix Book Link

Lecture 90 Favorite Books

Lecture 91 Unliking books on favorites page

Lecture 92 SSR Menu

Lecture 93 Real Time New Book Alerts

Lecture 94 Deploying to Vercel

Lecture 95 Overview

Section 5: Course Overview

Lecture 96 Course Overview

Anyone new to Svelte and Svelte Kit, or any good coders looking to increase their Svelte knowledge