We may earn an affiliate commission when you visit our partners.
Course image
Ali Alaa

NOTE: The duration of the main content of the course is about 17.5 hours. The rest is for creating the Spotify app.

Read more

NOTE: The duration of the main content of the course is about 17.5 hours. The rest is for creating the Spotify app.

Svelte is a JavaScript framework that allows you to build state driven components. However what makes Svelte different from other frameworks like Angular, React and Vue; is that Svelte is a compiler. Svelte runs at build time. Which means your Svelte code will be compiled at build time into highly efficient imperative code that runs on the browser to carry out DOM operations. Other famous frameworks usually use a technique called the virtual DOM to decide how to update the DOM. This technique runs in the browser during run time. And that adds more overhead to the DOM calculations.

In this course we are going to learn everything about Svelte from scratch. We will start with the basics by creating simple components. And then gradually progress and create more complex components.

And while Svelte is a great tool to build components for the web, it's not an easy task to build an entire application with just Svelte. That's why we have SvelteKit. SvelteKit is a framework for rapid development of robust, performant web applications. SvelteKit provides us out of the box with things like routing, server side rendering, pre-rendering and more. It provides us with a structure that we can follow to build high performance applications that are server side rendered and progressively enhanced.

In this course we are going to learn everything about SvelteKit. We are going to discuss pages and layouts, loading data, hooks, error handling, environment variables, pre-rendering, progressively enhanced form actions and more.

Finally we are going to bring everything together by building a Spotify clone with Svelte, SvelteKit and the Spotify API. Bringing together all the knowledge that we have learned during the course. You can check a demo of the app that we are going to build in the free videos.

So join now if you want to build high performance web applications with Svelte & SvelteKit.

Enroll now

What's inside

Learning objectives

  • Learn everything about svelte from scratch.
  • Learn everything about sveltekit.
  • Use sveltekit to create a high performance web application.
  • Create applications that work without javascript enabled.

Syllabus

Introduction to Svelte
Before Getting Started
A Demo of the App that We Are Going to be Building

In this lecture we are going to discuss what is Svelte, how is it different from other JS frameworks and the motivation behind its creation. We will also take a look at a quick comparison between Svelte and ReactJS.

Read more

Let's take a look at some tools that we are going to be using during the course.

Svelte vs. SvelteKit
Getting Started With Svelte
Creating a Svelte Vite Template

Let's create our first component, load it in the browser and learn about the basic structure of a svelte component.

Let's discover how state is managed in Svelte by creating a simple counter component.

Let's discover reactive statements in Svelte. reactive statements allows us to run code whenever a dependency changes.

While working with reactive statements, there are some unexpected behaviours that you need to be aware of.

Let's discover how to pass properties to our Svelte components.

Let's discuss more Svelte topics by creating a simple button component.

Let's get started with our button component by discussing Slots.

Before carrying on with the button component, let's see how can we use SCSS so that we can have more styling features.

Let's see different ways that we can use in order to dynamically manipulate classes in our html elements.

Lets in this lecture discover the style directive. The style directive allows us to add inline styling and also override CSS variables.

We already learned about using slots in svelte. But we can do more with slots by using named slots to target different areas in out component.

Slots also have a useful feature where we can pass props to our slots and access them when consuming the component.

Let's see how to handle event handlers and use event modifiers.

Some times we might need to forward props that we pass to a custom component. There are two ways to do this, let's discuss that in this lecture.

Let's discover more Svelte features by creating a todo list component.

Let's discover how can we loop through data in our markup by using an #each loop.

Let's discover multiple ways that we can use in order to bind an input value to a variable.

Updating arrays and objects in Svelte can be a little tricky. Let's discover how to do it properly.

Similar to binding HTML attributes to variables, we can also bind component props

Our components can dispatch events that consumers of the component can listen to. This can be very useful if you want your component to be more flexible and generic.

In Svelte, we can tell the compiler that we only need to update our component only when we pass a new array (object) and not a mutated version of the same array (object).

Now that we know about custom events, let's create an event for removing todos.

Let's create another event for toggling our todos.

Let's see what are read only props in Svelte components and how to make use of them.

Let's take a look at ways that we can use in order to debug our Svelte code.

Svelte provides us with some functions that we can use in order to run some code in the component's lifecycle.

Let's make use of our lifecycle functions to implement a useful feature in our todo list.

Similar to binding input values, dom elements and component props, we can also bind element dimensions.

There is a special lifecycle function that we haven't mentioned yet. Let's take a look at the tick function.

Let's do a quick clean up, add some missing stuff and prepare our component for styling.

Let's take some time to style our todo list component.

Let's discover a way to fetch data in Svelte directly in our markup.

Let's load our todos using the onMount lifecycle function. And also modify our component so that it can handle loading and error states.

Let's use our API to add new todos.

Removing Todos Using the API

Let's see how I implemented toggling todos using the API.

Let's see how can we use slots to allow consumers of our component to customize parts of the component.

Svelte makes animations and transitions very easy. Let's discover that in this section.

Let's take an overview on how to apply transitions on your DOM elements.

Let's apply transitions to our todo items whenever they are created or destroyed.

We can animate elements based on some variable using the key block. Let's see how can we do that.

Let's discover a cool feature in Svelte which is the FLIP animation.

In addition to transitions that we can import from Svelte, we can also write our own transitions.

Let's continue with our spin transition function.

We can also use JavaScript to perform our custom transitions. Let's take a quick example in this lecture.

Let's do a quick modification to our TodoList component so that we can demonstrate a transition feature called crossfade.

A cool feature in Svelte is the crossfade transitions. This will allows to smoothly animate items from one list to the other.

Actions in Svelte act as an element level lifecycle functions. Let's see how we can make use of it.

Let's discover what are actions and how to write one.

Let's create an action that would allow us to attach a custom event handler to our DOM elements.

Let's see how can we use a third party library like Tippy.js in Svelte.

Let's create an action that will make it much easier to use tippy in Svelte.

Using stores we can have global state that can be accessed by any component in our application.Let's discuss that in this section.

To demonstrate stores, let's create a mini router so that we can have multiple pages to share data between.

Using writable store we can globally store data that can read and write to.

Let's see an easier way to use our stores and also bind our stores values to inputs.

Let's implement light and dark color schemes in our applications using our settings store value.

When defining a store, we have the option of passing a callback function. That can be useful in many situations.

In addition to writable stores, we can also have stores that are read-only.

In addition to stores that we get in Svelte, we can also create our own custom stores.

We can also create stores that derive its value from other stores. Let's discover that in this lecture.

We can update the values of a writable store over a duration of time instead of immediately. Which allows us to do animations using stores.

Svelte can only interpolate between numbers or arrays and objects that has their leaf nodes as numbers. But we can also provide our custom interpolation function to interpolate between any other values.

Another way to change your store value over time is using the spring function. Unlike tweened, spring does not change the value over a fixed duration of time. Its time is determined by stiffness and damping parameters.

Svelte provides us with a context API that allows us to share data between a parent component and its descendants.

Let's take a quick introduction on what is the context API and how is it different from stores.

Let's see how can we handle a form in Svelte normally without using any context. And the discuss how we can make it easier by using context.

Before creating our context, let's create a custom Form and Field components.

Let's now use context to pass form data from our parent component to the fields.

In the previous lecture we managed to create a context. However, since contexts are not reactive, we need to combine context and stores to be able to update our context value.

Let's now use our context and store to track errors in our form.

Let's make use of slots and slot props to allow the Form component consumers to access context data and also customize validation errors markup.

Let's try to use a JavaScript library like Konva.js and discuss how we can make it easier to use using context.

Let's start turning Konva.js elements into Svelte component by creating a Stage component.

Let's now create the Layer and Rect components and use context to pass down our stage and layers.

Now that we are creating Layers and Rects, we need to also handle destroying them.

Now that we are handling creating and destroying Konva.js components, let's also handles updating the components' props.

Konva elements can also dispatch various events. Let's handle that in our custom components.

Let's finally do one more thing that ill allow us to access the rect object and its methods using bind:this.

Let's discover a way that we can use to share code between multiple instances of a component.

Let's have a quick look on different ways that we've seen so for to share data between multiple components. And then introduce a new way to share code and data between multiple instances of the same component.

Let's use module context in a very simple example where we are going to keep track of how many times a component was created.

To have another module context example, let's create a simple video player first.

Let's now use module context to only allow one video to be playing at a time.

Let's export a couple of functions that will allow us to play and pause all videos with the help of the module context.

Let's get started with SvelteKit by discussing routing, pages and layouts.
Introduction to SvelteKit

Let's create a new SvelteKit project and take a quick look the the folder structure.

Let's take a look at how to create routes and navigate between them. And also how to have parameters in our routes.

Let'd discover how we can organize our components in a SvelteKit project. We will make use of the $lib folder alias and also see how can we create custom aliases.

Let's discover some functions that will help us navigate to pages or hook into navigation lifecycle.

Sometimes we might have parameters that have unknown number of segments. Let's see how can we handle that in SvelteKit.

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Provides learners with beginner-friendly Svelte introduction
Teaches SvelteKit, a framework for high-performance web applications
Suitable for learners who want to build web applications without JavaScript
Covers various Svelte features, such as components, state management, and events
Guides learners on creating a Spotify clone to apply their skills in a practical project
Requires no prior Svelte or SvelteKit knowledge, making it accessible to beginners

Save this course

Save Svelte & SvelteKit: The Complete Guide to your list so you can find it easily later:
Save

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 Svelte & SvelteKit: The Complete Guide with these activities:
Svelte Tutorial
Follow a comprehensive tutorial on Svelte to gain a solid foundation in the framework.
Browse courses on Svelte
Show steps
  • Go through the official Svelte tutorial.
  • Complete a few beginner-friendly Svelte projects to practice.
SvelteKit Tutorial
Explore a tutorial on SvelteKit to learn how to create full-stack applications with Svelte.
Show steps
  • Follow the official SvelteKit tutorial.
  • Build a simple SvelteKit project to experiment with its features.
Spotify Clone Project
Build a web application using Svelte, SvelteKit, and the Spotify API to demonstrate your understanding of the course concepts and reinforce your knowledge.
Browse courses on Svelte
Show steps
  • Set up a Svelte and SvelteKit project.
  • Create a Svelte component for each page in your application.
  • Use SvelteKit's routing and data fetching features to create dynamic pages.
  • Integrate the Spotify API to fetch and display music data.
  • Add styling to your application to improve its visual appeal.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Svelte Code Challenges
Solve a series of Svelte code challenges to test your understanding and improve your problem-solving skills.
Browse courses on Svelte
Show steps
  • Find Svelte code challenges online.
  • Attempt to solve the challenges on your own.
  • Review your solutions and identify areas for improvement.
Svelte Blog Post
Write a blog post about a specific Svelte concept or technique to solidify your understanding and share your knowledge.
Browse courses on Svelte
Show steps
  • Choose a topic related to Svelte.
  • Research and gather information about the topic.
  • Write a well-structured blog post.
  • Publish your blog post on a platform like Medium or Dev.to.
Svelte Mentorship
Connect with other Svelte learners and provide support and guidance.
Browse courses on Svelte
Show steps
  • Join Svelte communities online.
  • Offer help to beginners who have questions about Svelte.
Svelte Open Source Contribution
Contribute to Svelte's open-source ecosystem to deepen your understanding and support the community.
Browse courses on Svelte
Show steps
  • Find a Svelte open-source project that interests you.
  • Identify an area where you can make a meaningful contribution.
  • Submit a pull request to the project.

Career center

Learners who complete Svelte & SvelteKit: The Complete Guide will develop knowledge and skills that may be useful to these careers:
Front-End Developer
As a Front-End Developer, you will be responsible for the design and implementation of user interfaces for websites and web applications. This course will help you build a strong foundation in the latest front-end technologies, including Svelte and SvelteKit. You will learn how to create responsive, interactive, and accessible web applications that meet the needs of users. Additionally, you will gain experience with version control, testing, and deployment, which are essential skills for any Front-End Developer.
Full-Stack Developer
As a Full-Stack Developer, you will be responsible for the design, development, and maintenance of web applications. This course will help you build a strong foundation in both front-end and back-end technologies. You will learn how to create full-stack applications using Svelte and SvelteKit, as well as how to integrate with databases and other services. Additionally, you will gain experience with version control, testing, and deployment, which are essential skills for any Full-Stack Developer.
Software Engineer
As a Software Engineer, you will be responsible for the design, development, and maintenance of software applications. This course will help you build a strong foundation in software engineering principles and technologies. You will learn how to create scalable, reliable, and maintainable software applications using Svelte and SvelteKit. Additionally, you will gain experience with version control, testing, and deployment, which are essential skills for any Software Engineer.
Web Developer
As a Web Developer, you will be responsible for the design and development of websites and web applications. This course will help you build a strong foundation in the latest web development technologies, including Svelte and SvelteKit. You will learn how to create responsive, interactive, and accessible web applications that meet the needs of users. Additionally, you will gain experience with version control, testing, and deployment, which are essential skills for any Web Developer.
JavaScript Developer
As a JavaScript Developer, you will be responsible for the design and development of JavaScript-based applications. This course will help you build a strong foundation in JavaScript and related technologies, including Svelte and SvelteKit. You will learn how to create responsive, interactive, and accessible JavaScript applications that meet the needs of users. Additionally, you will gain experience with version control, testing, and deployment, which are essential skills for any JavaScript Developer.
UX Designer
As a UX Designer, you will be responsible for the design of user interfaces for websites and web applications. This course will help you build a strong foundation in UX design principles and technologies. You will learn how to create user-friendly, efficient, and aesthetically pleasing user interfaces using Svelte and SvelteKit. Additionally, you will gain experience with user research, prototyping, and testing, which are essential skills for any UX Designer.
UI Developer
As a UI Developer, you will be responsible for the design and development of user interfaces for websites and web applications. This course will help you build a strong foundation in UI development principles and technologies. You will learn how to create responsive, interactive, and accessible user interfaces using Svelte and SvelteKit. Additionally, you will gain experience with version control, testing, and deployment, which are essential skills for any UI Developer.
Web Designer
As a Web Designer, you will be responsible for the design of websites and web applications. This course will help you build a strong foundation in web design principles and technologies. You will learn how to create visually appealing, user-friendly, and accessible websites using Svelte and SvelteKit. Additionally, you will gain experience with version control, testing, and deployment, which are essential skills for any Web Designer.
Web Application Developer
As a Web Application Developer, you will be responsible for the design, development, and maintenance of web applications. This course will help you build a strong foundation in web application development principles and technologies. You will learn how to create scalable, reliable, and maintainable web applications using Svelte and SvelteKit. Additionally, you will gain experience with version control, testing, and deployment, which are essential skills for any Web Application Developer.
Web Programmer
As a Web Programmer, you will be responsible for the development and maintenance of websites and web applications. This course will help you build a strong foundation in web programming principles and technologies. You will learn how to create dynamic, interactive, and secure web applications using Svelte and SvelteKit. Additionally, you will gain experience with version control, testing, and deployment, which are essential skills for any Web Programmer.
Backend Developer
As a Backend Developer, you will be responsible for the design, development, and maintenance of the server-side of web applications. This course will help you build a strong foundation in backend development principles and technologies. You will learn how to create scalable, reliable, and maintainable backend applications using Svelte and SvelteKit. Additionally, you will gain experience with databases, APIs, and other server-side technologies.
Cloud Engineer
As a Cloud Engineer, you will be responsible for the design, deployment, and maintenance of cloud-based applications and infrastructure. This course will help you build a strong foundation in cloud computing principles and technologies. You will learn how to create scalable, reliable, and secure cloud-based applications using Svelte and SvelteKit. Additionally, you will gain experience with cloud providers, such as AWS, Azure, and GCP.
DevOps Engineer
As a DevOps Engineer, you will be responsible for the design, deployment, and maintenance of software applications. This course will help you build a strong foundation in DevOps principles and technologies. You will learn how to create scalable, reliable, and maintainable software applications using Svelte and SvelteKit. Additionally, you will gain experience with version control, testing, deployment, and other DevOps tools and technologies.
Project Manager
As a Project Manager, you will be responsible for the planning, execution, and delivery of software projects. This course will help you build a strong foundation in project management principles and technologies. You will learn how to plan, execute, and deliver software projects on time, within budget, and to the required quality standards. Additionally, you will gain experience with project management tools and techniques.
Systems Analyst
As a Systems Analyst, you will be responsible for the analysis, design, and implementation of software systems. This course will help you build a strong foundation in systems analysis principles and technologies. You will learn how to analyze, design, and implement software systems that meet the needs of users. Additionally, you will gain experience with systems analysis tools and techniques.

Reading list

We've selected 16 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Svelte & SvelteKit: The Complete Guide.
Comprehensive guide to React. It covers everything from the basics to advanced topics like state management, routing, and server-side rendering. It good choice for developers who want to learn more about React and build complex web applications with it.
Comprehensive guide to Angular. It covers everything from the basics to advanced topics like state management, routing, and server-side rendering. It good choice for developers who want to learn more about Angular and build complex web applications with it.
Comprehensive guide to Node.js. It covers everything from the basics of Node.js to advanced topics like HTTP server development, database integration, and testing. It good choice for developers who want to learn more about Node.js and build web applications with it.
Comprehensive guide to Express.js. It covers everything from the basics of Express.js to advanced topics like middleware, routing, and templating. It good choice for developers who want to learn more about Express.js and build web applications with it.
Comprehensive guide to MongoDB. It covers everything from the basics of MongoDB to advanced topics like aggregation, replication, and sharding. It good choice for developers who want to learn more about MongoDB and build web applications with it.
Provides a catalog of design patterns, which are general solutions to common software development problems. It valuable resource for any software developer, regardless of their experience level.
Provides a fun and engaging introduction to design patterns, using a conversational style and plenty of examples. It valuable resource for any software developer, regardless of their experience level.
Provides a comprehensive and authoritative treatment of computer science, covering topics such as algorithms, data structures, and programming languages. It valuable resource for any computer scientist, regardless of their experience level.
Provides a comprehensive introduction to algorithms, covering topics such as sorting, searching, and graph algorithms. It valuable resource for any computer scientist, regardless of their experience level.
Provides a comprehensive introduction to data structures and algorithms in Java, covering topics such as arrays, linked lists, and trees. It valuable resource for any Java developer, regardless of their experience level.
Provides a comprehensive introduction to Rust, a systems programming language that is designed for safety, concurrency, and performance. It valuable resource for any Rust developer, regardless of their experience level.
Provides a comprehensive introduction to Go, a programming language that is designed for concurrency and scalability. It valuable resource for any Go developer, regardless of their experience level.
Provides a comprehensive guide to effective Java programming, covering topics such as object-oriented programming, generics, and concurrency. It valuable resource for any Java developer, regardless of their experience level.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Svelte & SvelteKit: The Complete Guide.
SvelteKit Framework by Example: Full-Stack Ecommerce...
Most relevant
Master Svelte Framework - The Complete Course
Most relevant
Introduction to Svelte (and SvelteKit)
Most relevant
Svelte and Firebase - The Complete Guide (2023)
Most relevant
Svelte with Test Driven Development
Svelte for Beginners
Svelte.js - The Complete Guide (incl. Sapper.js)
DOM Manipulation with TypeScript
Web Components & Stencil.js - Build Custom HTML Elements
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser