Master Svelte Framework - The Complete Course from Udemy

Welcome to Master Svelte Framework - The Complete Course

In this 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 13 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 Vue
Easy to learn. Svelte is all HTML, so for newer developers it's intuitive to use and easy to master
Growing 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 password
Add their own book information to the site via a form
'Like' and 'Unlike' a book they see on the site
Create 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.

What's inside

Learning objectives

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 manage 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

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 manage 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

Syllabus

Introduction

The goal is to get familiar with all the features of Svelte.

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 Id

Await Template

Magic The Gather Counter Challenge

Deploying Magic Gather Challenge

Lifecycle Events (onMount & onDestroy)

Lifecycle Events (beforeUpdate & afterUpdate)

Readable Stores

Writable Stores

Custom Stores

Derived Stores

Contact List Challenge

Introduction to Actions

Actions With Parameters

Slots

Draggable Component (Slot Challenge)

Overview

SvelteKit 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

SvelteKit with Firestore, Firebase Auth and SSR

Project Setup

Firebase Setup

Bootstrap Navbar

Navbar Mobile Challenge

Navbar Link Highlighting

Messages

Initialize Firebase Client Side

Auth Store

Logout

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 & Home Page

Profile Page Setup

My Books

Fix Book Link

Favorite Books

Unliking books on favorites page

SSR Menu

Real Time New Book Alerts

Course Overview

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Focuses on developing interactive websites using Svelte and SvelteKit, making it relevant for web developers

Provides hands-on experience through the creation of a fully-functional website, promoting practical application of concepts

Covers essential Svelte and SvelteKit concepts, including reactive statements, components, and lifecycle events, providing a solid foundation

Includes numerous mini-exercises and challenges to reinforce learning and promote active engagement

Introduces Firebase and SSR (Server-Side Rendering) with SvelteKit, expanding the scope of web development

Requires some basic JavaScript knowledge, which may limit accessibility for complete beginners

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Master Svelte Framework - The Complete Course with these activities:

Follow a Svelte tutorial

Show steps

Following a tutorial will help you master specific Svelte concepts and techniques.

Show steps

Find a Svelte tutorial that covers a topic you're interested in.
Follow the tutorial step-by-step, implementing the code in your own Svelte project.
Experiment with the code to see how it works and how you can customize it.
Ask questions in the tutorial's discussion forum if you get stuck.

Build a simple Svelte app

Show steps

Build a small Svelte app to solidify your core understanding of the framework.

Show steps

Choose a simple idea for your app, such as a to-do list or a basic game.
Create a new Svelte project using the SvelteKit template.
Implement the functionality of your app, using Svelte components and lifecycle methods.
Style your app using CSS or SASS.
Test your app in a browser to verify that it works as expected.

Solve Svelte coding challenges

Show steps

Solving coding challenges will test your understanding of Svelte and help you develop your problem-solving skills.

Show steps

Find a website or platform that offers Svelte coding challenges.
Choose a challenge that matches your skill level.
Implement the solution to the challenge in a Svelte project.
Test your solution to make sure it works correctly.
Analyze your solution and identify areas for improvement.

One other activity

Expand to see all activities and additional details

Show all four activities

Write a blog post about Svelte

Show steps

Writing about Svelte will force you to synthesize your knowledge and explain it to others.

Show steps

Choose a topic related to Svelte that you're knowledgeable about.
Research the topic in-depth and gather relevant information.
Write a blog post that clearly explains the topic and provides examples.
Edit and proofread your blog post before publishing it.
Share your blog post on social media and other online platforms.

Career center

Learners who complete Master Svelte Framework - The Complete Course will develop knowledge and skills that may be useful to these careers:

Full-Stack Developer

A Full-Stack Developer builds out all aspects of a web application. This course spends time on both the front end and the back end of a web application making it easy to transition into a Full-Stack Developer role. A Full-Stack Developer must be familiar with at least one web framework such as Svelte and SvelteKit.

See salaries and explore the career path for Full-Stack Developer

Front-End Developer

A Front-End Developer brings a website's visual elements to life. This course has heavy emphasis on HTML, CSS and JavaScript, three essential tools for a Front-End Developer. A Front-End Developer typically focuses on HTML, CSS and Javascript and how those technologies interact with each other and the server side of applications.

See salaries and explore the career path for Front-End Developer

Web Designer

A Web Designer visually appealing and functional websites. This course will help build a foundation for web design by teaching the fundamentals of front-end development, such as HTML and CSS. A Web Designer often needs to be able to turn design mock-ups and ideas into prototypes. This course can help provide the technical skills needed to do so.

See salaries and explore the career path for Web Designer

User Experience (UX) Designer

A User Experience (UX) Designer focuses on improving the user experience of websites and applications. This course can help UX Designers to understand the technical side of web development, which can help them design more effective user interfaces and interactions

See salaries and explore the career path for User Experience (UX) Designer

Web Developer

A Web Developer creates and maintains websites. This course can help build a foundation by introducing the basics of web development and by giving the student hands-on experience developing a website. Some Web Developers specialize in front-end development, using code to bring a website's visual elements to life. This course focuses on the front end with heavy emphasis on HTML.

See salaries and explore the career path for Web Developer

Software Developer

A Software Developer works to design, develop, test and deploy software that meets a specific need. This course will introduce Software Development fundamentals that could be applied in almost any Software Developer role, especially roles that deal with server side implementation and web frameworks.

See salaries and explore the career path for Software Developer

Product Manager

A Product Manager is responsible for the overall success of a product, which includes planning, developing, and marketing the product. This course can be helpful for Product Managers to understand the technical side of web development, which can help them make better decisions about product features and roadmap.

See salaries and explore the career path for Product Manager

Project Manager

A Project Manager plans, executes, and closes out projects. This course may be helpful for Project Managers to understand the technical side of web development, which can help them better manage projects that involve web development.

See salaries and explore the career path for Project Manager

Business Analyst

A Business Analyst analyzes business processes to identify areas for improvement. This course may be helpful for Business Analysts to understand the technical side of web development, which can help them make better recommendations for improving business processes.

See salaries and explore the career path for Business Analyst

Technical Writer

A Technical Writer creates documentation for software and other technical products. This course may be helpful for Technical Writers to understand the technical side of web development, which can help them write more accurate and useful documentation.

See salaries and explore the career path for Technical Writer

Quality Assurance (QA) Analyst

A Quality Assurance (QA) Analyst tests software to identify bugs and other issues. This course may be helpful for QA Analysts to understand the technical side of web development, which can help them write better test cases and identify more bugs.

See salaries and explore the career path for Quality Assurance (QA) Analyst

Computer Systems Analyst

A Computer Systems Analyst designs, develops, and implements computer systems. This course may be helpful for Computer Systems Analysts to understand the technical side of web development, which can help them design and develop more effective computer systems.

See salaries and explore the career path for Computer Systems Analyst

Information Technology (IT) Support Specialist

An Information Technology (IT) Support Specialist provides technical support to users of computers and other electronic devices. This course may be helpful for IT Support Specialists to understand the technical side of web development, which can help them troubleshoot problems and provide better support to users.

See salaries and explore the career path for Information Technology (IT) Support Specialist

Database Administrator

A Database Administrator manages and maintains databases. This course may be helpful for Database Administrators to understand the technical side of web development, which can help them design and manage databases that support web applications.

See salaries and explore the career path for Database Administrator

Data Analyst

A Data Analyst collects, analyzes, and interprets data to help businesses make better decisions. This course may be helpful for Data Analysts to understand the technical side of web development, which can help them extract data from websites and other online sources.

See salaries and explore the career path for Data Analyst