Svelte.js 3 and Sapper Projects

Build powerful, reactive, great-looking UI web experiences with this front-end compiler and its framework.

  • Packt Publishing
  • 4.2
  • (23 reviews)
  • 5.5 hrs
  • 33 lectures
  • Udemy
Svelte.js 3 and Sapper Projects

What you will learn?

  • Build real-life web applications using Svelte and its associated framework, Sapper
  • Create highly reactive and modular Svelte components that are scalable and reusable within one or more web applications
  • Explore Svelte’s advanced features that allow us to create and design beautiful and smooth user experiences
  • Discover Sapper’s great features such as routing, service workers, code-splitting, single-page applications (SPA) or server-side rendered (SSR) applications optimized for SEO
  • Deploy your apps while connecting them to services such as a database or RESTful APIs
  • Test Sapper-built applications using Cypress to avoid any regressions

Your trainer

Packt Publishing

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

33 lessons

Easy to follow lectures and videos covering subject details.

5.5 hours

This course includes hours of video material. Watch on-demand, anytime, anywhere.

Certificate of Completion

You will earn a Certificate of Completion at the end of this course.

Course curriculum

Introduction and Starting Our First Project42:02

  • Course Overview05:16
  • What Is Svelte and Why Should We Learn It?05:22
  • Setting Up Our Work Environment07:04
  • Analyzing the Svelte Workspace07:43
  • Creating a Hierarchy of Components13:04
  • Starting Our First Project: vCard Generator03:33
  • Test your knowledge7 questions

  • Adding Reactivity with Dynamic Attributes10:17
  • Reacting to DOM Events08:20
  • More On Events10:37
  • Two-Way Binding10:10
  • Conditional Classes10:13
  • Test your knowledge5 questions

  • Dispatching Events09:01
  • Two-Way Binding Between Components09:25
  • Using Slots07:32
  • Conditional Rendering08:15
  • Reactive Statements13:46
  • Test your knowledge5 questions

  • Basic Transitions12:33
  • Enhancing Transitions15:16
  • Animating Elements11:06
  • Using Lifecycle Functions13:32
  • Test your knowledge4 questions

  • State Management with Stores11:46
  • Using Stores in Our Application13:05
  • Motion with the Svelte/Motion Module04:25
  • Connecting To a Database17:24
  • Options On Deploying Svelte Apps08:13
  • Test your knowledge5 questions

  • Starting with Sapper07:21
  • The Sapper App Structure11:15
  • Routing10:52
  • Preloading12:13
  • Test your knowledge4 questions

  • Introduction to Testing with Cypress15:38
  • Deploying Our App as a Pre-Rendered Static Site10:44
  • Deploying Our App as a Dynamic SSR App08:24
  • Course Review05:16
  • Test your knowledge3 questions
Enroll now
Online Courses

Learning Svelte doesn't have to be hard. Here is our curated list of recommended online courses that will guide you step-by-step in the learning process.

Learn more
Books

Are you an avid book reader? Do you prefer paperback, or maybe Kindle version? Take a look at our curated list of Svelte related books and take yourskills to the next level.

Learn more
YouTube videos

The number of high-quality and free Svelte video tutorials is growing fast. Check this curated list of recommended videos - there is no excuse to stop learning.

Learn more