Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

Svelte 'each' Blocks - Loop Through an Array and Update a DOM

Using Svelte Each Blocks to Iterate a List

This page is a preview of Fullstack Svelte

Previous Lesson:

How to Use Axios to Fetch Data From APIs for Svelte Apps

Next Lesson:

Using Svelte to Show and Hide Loading Spinner Icons

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Fullstack Svelte

Module 1: Introduction

Introduction:

Start Here

Introduction: (5:24)

Fullstack Svelte Course Overview

Module 2: Setting Up A Development Environment

Lesson 1: (4:12)

Setting Up a Svelte Local Development Environment

Lesson 2: (7:04)

How to Initialize a Boilerplate Svelte Project

Lesson 3: (9:25)

Setting Up a Formatter and Linter for Svelte Development

Module 3: Front End Routing

Lesson 1: (20:16)

An Introduction to Svelte Routing for Single Page Applications

Lesson 2: (11:36)

Front End Layouts - Creating Reusable Parent Components

Module 4: User Interface Styles and Interactions

Lesson 1: (6:15)

Using Front End Component Libraries for Svelte Development

Lesson 2: (6:38)

Learn Svelte - How to Create a Basic Landing Page

Lesson 3: (13:47)

A Guide to Handling DOM Events and Input Binding with Svelte

Module 5: Creating the Backend Application

Lesson 1: (16:48)

Initialize an Express Node.js Project for Svelte Development

Lesson 2: (10:52)

Creating REST API GET, POST, PUT, and DELETE Requests

Lesson 3: (13:47)

School Lunch Data Model

Module 6: Fetching Data in the Frontend

Lesson 1: (14:34)

How to Use Axios to Fetch Data From APIs for Svelte Apps

Lesson 2: (10:59)

Svelte 'each' Blocks - Loop Through an Array and Update a DOM

Lesson 3: (6:36)

Using Svelte to Show and Hide Loading Spinner Icons

Lesson 4: (5:31)

Externalizing Frontend Configuration

Module 7: Adding Persistence with PostgreSQL

Lesson 1: (7:18)

Installing PostgreSQL Locally to Add Persistence to a Svelte App

Lesson 2: (12:37)

Configuring Knex js Migrations for Database Management Scripts

Lesson 3: (15:32)

How to Use Knex js in an Express Backend App

Lesson 4: (21:57)

Sveltekit Endpoints - How to Use Post, Put, and Delete

Module 8: Creating, Updating and Deleting Data in the Frontend

Lesson 1:

Cleaning Up the Front End of a Single Page Application in Svelte

Lesson 2:

Building a Form in Svelte That Lets Users Create Data Entities

Lesson 3: (28:42)

The Lunch Week Details Component

Module 9: Securing the Application

Lesson 1: (37:19)

Securing a Svelte Application with JSON Web Tokens

Lesson 2:

Get Started Creating a Multi Tenant Application in Svelte

Lesson 3: (36:25)

Creating a User Signup Flow for a Multi Tenant Svelte App

Module 10: Public Lunch Menu View

Lesson 1: (20:35)

Public Lunch Week Page

Module 11: Production Deployment

Lesson 1: (13:35)

Building Svelte Single Page Applications and Serving Static Files

Svelte 'each' Blocks - Loop Through an Array and Update a DOM