Svelte 4 for Beginners

Name: Svelte 4 for Beginners
Rating: 4.6 (96 reviews)

Learn the basic fundamentals of a JavaScript framework with Svelte

Created byMike Karan

Last updated 10/2024

English

English [Auto],

What you'll learn

Build a simple web application with the Svelte framework
Transfer JavaScript Framework knowledge to any framework (React, Vue, etc)
Create a scaffold project with Svelte, TailwindCSS and DaisyUI
Differentiate between vanilla JavaScript and the Svelte framework

Course content

5 sections • 16 lectures • 1h 52m total length

Introduction Video2:15

What is a JavaScript Framework3:43
Explore what a JavaScript framework does for front-end development, including pre-built tools for the user interface, conditional rendering, and reactive concepts, with focus on Svelte and comparisons to other libraries.
Why Use a JavaScript Framework4:37
Svelte5:38
CORRECTION: In the video, I refer to Svelte not having a Shadow DOM, this is incorrect. I was referring to it not needing/having a virtual DOM which is different from Shadow DOM.

Lesson 0: Svelte Component Basics4:07
Lesson 1: Reactivity3:10
Lesson 2: Conditional Rendering4:16
Lesson 3: Class Binding5:59
Lesson 4: Template Looping6:35
Learn Svelte 4 template looping to render posts from a simulated api using data.json, importing data and looping with each to display author and post text in DaisyUI cards.
Lesson 5: Form Binding12:05
Lesson 6: Components, Props and Refactoring16:02
Lesson 7: Routing11:17
Explore client-side routing in a Svelte 4 single-page app by building a navigation bar, defining routes for form and posts, using location for active links, and navigate for programmatic routing.
Lesson 8: Component Lifecycle12:25
Lesson 9: State Management11:54
Implement state management by creating a root writable posts store, load data from data.json, expose reactive $posts, and refactor components to update the store directly.
Lesson 1 Assignment: Add a divide reactive assignment
Lesson 2 Assignment: Add a warning message
Lesson 3 Assignment: Add another button with an active class
Lesson 4 Assignment: Add and display a date for each post
Lesson 5 Assignment: Add a date input field
Lesson 6 Assignment: Add a header component with name and about props
Lesson 7 Assignment: Add an about page with a nav link
Lesson 8 Assignment: Add a waving hand emoji on a show hide timer
Lesson 9 Assignment: Add a user to the store

Requirements

Basic knowledge of HTML, CSS and JavaScript is recommended but not required.

Description

Svelte makes learning JavaScript Frameworks fun.

If you know how to code in JavaScript you can already write a simple Svelte app. Take those skills and level up into the most loved tool for developers.

What will you learn?

How to build a simple web application using Svelte
What is a JavaScript framework
Why use a JavaScript framework
JavaScript framework fundamentals like conditional rendering, template looping, state management, routing, etc.
How to prototype quickly with TailwindCSS and DaisyUI
The confidence and knowledge to use Svelte as well as learn any other JavaScript framework

Svelte is the latest and greatest front-end tool for web developers. If you want to stay ahead of the curve and be ready for where the industry is going, learn Svelte now!

Who is this course for?

Anyone looking to learn how to make reactive websites
Beginners that want to take the next step after learning HTML, CSS, and JavaScript basics
Anyone that wants to stay on top of the latest and greatest tools

The course is broken up into 9 lessons and 9 assignments. Each assignment is meant to reinforce the knowledge you will learn during the lesson. It's highly recommended to code alone with the lessons and then complete each assignment before moving on to the next one.

All the code will be available in a GitHub repo which you will be in the description of the setup video.

Who this course is for:

Beginner web developers looking to make the jump into their first frontend JavaScript framework

Svelte 4 for Beginners

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

JavaScript Frameworks and Svelte3 lectures • 14min

Setup Your Project1 lecture • 4min

Lessons10 lectures • 1hr 28min

Extras1 lecture • 4min

Requirements

Description

Who this course is for: