Web Development with the Svelte Framework Online Course

Web Development with the Svelte Framework Online Course

This course introduces you to Svelte and SvelteKit, powerful frameworks that simplify building interactive web applications. You’ll start with the basics of Svelte, then move on to integrating Firebase for authentication and data handling, along with deploying your app for real users. Key topics include real-time updates, server-side rendering, and advanced features like API routes, secure authentication, and real-time alerts. By the end, you’ll build a complete “Booklovers” app and gain the skills to create fast, user-friendly, and modern web applications with Svelte and SvelteKit.

Who should take this course?

This course is designed for web developers, front-end engineers, and JavaScript enthusiasts who want to learn modern, efficient, and lightweight web development with Svelte. It’s also perfect for beginners exploring front-end frameworks and professionals aiming to build fast, reactive web applications.

What you will learn

• Build interactive websites with Svelte and SvelteKit
• Create a complete Book Lover website project
• Learn server-side rendering (SSR) for enhanced website performance
• Understand real-time updates for dynamic user experiences
• Explore API routes and server-side authentication techniques
• Master advanced concepts such as actions, slots, and hooks

Course Outline

Introduction

• Course Introduction

Svelte Introduction

• Section Introduction
• Svelte Up and Running
• Svelte Project Tour
• Creating Svelte Components
• Outputting JavaScript Variables
• Props
• Styles
• Binding Variables to Inputs
• Color Picker Challenge
• DOM Events
• Custom Events
• Reactive Statements
• Reactive Variable Challenge
• If Template
• Each Template
• Each Template II
• Await Template
• Magic the Gather Counter Challenge
• Deploying Magic Gather Challenge
• Lifecycle Events (onMount and onDestroy)
• Lifecycle Events (beforeUpdate and afterUpdate)
• Readable Stores
• Writable Stores
• Custom Stores
• Derived Stores
• Contact List Challenge
• Introduction to Actions
• Actions with Parameters
• Slots
• Draggable Component (Slot Challenge)
• Summary

SvelteKit Introduction

• Section Introduction
• Getting Started
• SvelteKit Tour
• Pages and Routes
• Routing Parameters
• Server Load Function with Environment Variables
• Random Number Challenge
• Layouts
• Prefetching Links and Page Store
• Challenge: Build a Personal Webpage
• Deploying to Vercel
• Forms / Form Actions
• Form Challenge
• Page Rendering Options
• Error Pages
• API Routes
• Create Hook
• Summary

SvelteKit with Firestore, Firebase Auth, and SSR

• Section Introduction
• Project Setup
• Firebase Setup
• Bootstrap Navbar
• Navbar Mobile Challenge
• Navbar Link Highlighting
• Messages
• Initialize Firebase Client-Side
• Login with Google
• Auth Store
• Logout
• Register Email and Password
• Login with Email and Password
• Forgot Password Workflow
• After Login Redirect
• Saving the User to Firestore Client-Side
• Firebase Initialize on the Server
• Firebase Server Auth Plan
• Token Endpoint
• Send Token After Register Challenge
• Refresh Token
• Logout Server-Side
• Auth Hooks
• Add Book Validation Part 1
• Add Book Validation Part 2
• Save Book Database
• Show Book Page
• Edit Book Page
• Enhanced Forms
• Like Endpoint
• Like Component
• Toggling Like
• Books Home Page
• Like Component Bug
• Pagination
• Book Component and Homepage
• Profile Page Setup
• My Books
• Fix Book Link
• Favorite Books
• Unliking Books on Favorites Page
• SSR Menu
• Real-Time New Book Alerts
• Deploying to Vercel
• Summary

Course Overview

• Course Summary