Svelte.js - The Complete Guide (incl. Sapper.js)
You’ll start by understanding what Svelte is and why it’s gaining popularity, before setting up your first app and getting hands-on with writing Svelte code.
The course dives deep into Svelte’s core syntax, covering reactive variables, bindings, components, and communication between them.
You’ll learn how to work with conditionals, loops, and dynamic content.
As you progress, you’ll explore advanced topics like reactivity, immutable updates, event handling, and the component lifecycle.
Through a real-world project, you’ll apply these concepts to build a meetup application, complete with forms, validation, and state management using Svelte stores.
The course covers animations, transitions, and network interactions via HTTP, allowing you to create dynamic and responsive user interfaces.
Additionally, you’ll learn about special elements in Svelte, like dynamic and recursive components, as well as accessing the window, body, and head elements.
The course also introduces Sapper, Svelte’s framework for building server-rendered applications, covering routing, preloading data, and deployment strategies.
With a focus on practical examples and a step-by-step approach, this course equips you with the skills to build modern, reactive web applications using Svelte.js.
You’ll learn how Svelte compares to other frameworks like React, Angular, and Vue, and gain insights into its unique approach to building user interfaces.
Svelte & SvelteKit: The Complete Guide
This course is a comprehensive guide to learning Svelte and SvelteKit, covering everything from the basics to advanced topics.
You’ll start by understanding what Svelte is and how it differs from other frameworks.
Then, you’ll dive into building components, handling state, working with props, and using slots.
As you progress, you’ll learn about more advanced concepts like lifecycle functions, animations, transitions, actions, and stores.
The course also covers the Context API, which allows you to pass data down to child components efficiently.
Additionally, you’ll work with external libraries like Konva.js and Tippy.js, learning how to integrate them into your Svelte applications.
Moving on to SvelteKit, you’ll learn how to create pages, layouts, and handle data loading.
The course covers server-side rendering, client-side rendering, and pre-rendering options.
You’ll also learn about form actions, which allow you to handle form submissions on the server-side.
Towards the end, the course focuses on deployment, covering different adapters like Node.js, Vercel, Netlify, and Heroku.
You’ll even build a real-world Spotify app using Svelte and SvelteKit, integrating with the Spotify API and implementing features like authentication, playlists, and an audio player.
Throughout the course, you’ll work with modern web technologies like TypeScript, Fetch, Promises, Environment Variables, and Private Modules.
The course also covers error handling, hooks, preloading pages, link options, and page options, ensuring you have a solid understanding of SvelteKit’s advanced features.
Master Svelte Framework - The Complete Course
This course starts with an introduction to Svelte and its core concepts, such as components, outputting variables, props, styles, and input binding.
You’ll learn about DOM events, custom events, reactive statements, and conditional and loop templates.
The course covers advanced topics like lifecycle events, different types of stores (readable, writable, custom, and derived), and actions.
You’ll build practical projects like a color picker, a Magic: The Gathering counter, and a draggable component using slots.
Moving on to SvelteKit, you’ll learn about routing, server-side rendering, forms, API routes, and deployment to Vercel.
The course also includes a substantial project integrating Firestore, Firebase Auth, and server-side rendering.
You’ll build a full-stack application with features like Google login, email/password authentication, forgot password workflow, saving data to Firestore, token handling, auth hooks, form validation, database operations, like functionality, pagination, profile pages, real-time alerts, and more.
Throughout the course, you’ll work on several challenges to reinforce your understanding, such as a random number generator, a personal webpage, a form challenge, a navbar mobile challenge, book validation, and sending tokens after registration.
Svelte for Beginners
The course starts by introducing you to JavaScript frameworks and Svelte.
You’ll learn what a JavaScript framework is and why you might want to use one.
Then, the course dives into Svelte specifically and guides you through setting up your first Svelte project.
From there, the lessons cover key Svelte concepts one by one.
You’ll start with the basics of Svelte components in Lesson 0.
Lesson 1 teaches you about reactivity, which is a core concept in Svelte for keeping your UI in sync with your data.
The course then moves on to conditional rendering in Lesson 2, allowing you to show or hide parts of your UI based on conditions.
Lesson 3 covers class binding, which lets you dynamically apply CSS classes.
In Lesson 4, you’ll learn about template looping to render lists of data.
Lesson 5 dives into form binding, making it easy to work with user input.
Lesson 6 explores components in more depth, including props for passing data into components.
You’ll also refactor your code to split it into multiple components.
Routing is covered in Lesson 7, enabling you to create multi-page applications.
Lesson 8 teaches you about the component lifecycle, helping you run code at specific points.
State management is the focus of Lesson 9, showing you how to manage and share data across your application.
Finally, the course includes an extras section on debugging to help you troubleshoot issues in your Svelte apps.
Svelte Crash Course through Projects w/ Backend Connections
The course starts by introducing you to Svelte and setting up the basic development environment.
You’ll learn the “Svelte way” of building applications and how to access course resources.
Next, you’ll create a Todo app template and essential components.
You’ll dive into data flow, passing properties, handling events, and adding reactivity to components.
You’ll also learn how to access data from other components, bind data, and explore other Svelte features like adding deletion functionality and animations.
The second project, Chitter, involves creating a template and components for displaying “chits” (short messages).
You’ll learn how to efficiently store and access data using Svelte stores, including inserting data and creating custom store functions.
You’ll even create a dummy backend within the store.
As you structure the codebase for handling a backend, you’ll communicate with a REST API, fetching data from and sending data to the backend from Svelte.
You’ll also create session data for user login and build a login form that saves session data.
Throughout the course, you’ll work with components, data flow, reactivity, stores, backend integration, and user authentication – all essential skills for building robust Svelte applications.
Svelte with Test Driven Development
This course covers everything from setting up your development environment to implementing core features like authentication, routing, and state management.
You’ll start by learning how to create a new Svelte project and configure the testing environment.
The course guides you through writing tests for various components and functionalities, ensuring your application is robust and maintainable from the ground up.
One of the key aspects covered is building a sign-up form.
You’ll learn how to interact with the form, make API requests, mock services, and handle dependencies like Axios.
The course also dives into styling components and implementing progress indicators.
Validation is a crucial part of any application, and this course dedicates several sections to client-side validation, displaying errors, and restoring button states.
You’ll also learn how to create reusable input components and handle remaining validations.
Internationalization (i18n) is another important topic covered.
You’ll integrate an i18n library, implement language switching, create a language selector component, and handle local validation messages and API requests with language support.
The course then moves on to routing, covering client-side routing, creating a navigation bar, and using Svelte’s routing library.
You’ll build an account activation page, handle API requests, and create a spinner component.
User management is also covered in depth.
You’ll learn how to list users, implement pagination, style components, and create a user page with a profile card component.
The course also teaches you how to handle user not found cases and progress indicators.
Authentication is a critical aspect of most applications, and this course dedicates several sections to it.
You’ll build a login form, handle interactions, make authentication requests to the backend, and manage authentication errors and translations.
The course also covers navigation after successful authentication and creates reusable components like ButtonWithProgress and Card.
Finally, the course delves into client-state management, teaching you how to create a logged-in layout, use local storage, abstract local storage, practice with Svelte stores, and implement local storage encryption for storing credentials.
Throughout the course, you’ll not only learn the technical aspects but also follow best practices like writing tests, refactoring code, and handling edge cases.
SvelteKit Framework by Example: Full-Stack Ecommerce Website
The course starts by introducing you to Svelte, SvelteKit, and concepts like Server-Side Rendering (SSR) and payment gateways like Stripe.
You’ll learn how to set up a Stripe account and add products, which will be used in the e-commerce application.
The course then dives into setting up the SvelteKit project, installing dependencies like TailwindCSS for styling and Prisma ORM for interacting with a PostgreSQL database.
Once the setup is complete, you’ll learn about components in SvelteKit and create essential components like the header, cart button, and footer.
The course covers routing in SvelteKit, including page files, error files, and API routes for reading data from the database using Prisma.
You’ll implement the home page, shop categories, and individual product pages, utilizing concepts like conditional rendering, rendering loops, and reactivity in Svelte.
The course also guides you through creating a cart system, integrating with Stripe for payments, and implementing a checkout API endpoint.
Throughout the journey, you’ll work on building the e-commerce application, creating pages for products, categories, cart, and payment status.
The course covers essential e-commerce features like displaying products, filtering by category, adding items to the cart, and processing payments via Stripe.
Svelte and Firebase - The Complete Guide (2023)
This course is a comprehensive guide to building web applications with Svelte and Firebase.
It covers a wide range of topics, from setting up your development environment to deploying your final project.
You’ll start by learning the basics of Svelte, including reactivity, components, and template syntax.
The course then dives into more advanced concepts like stores, events, and transitions.
Along the way, you’ll build a task management app to solidify your understanding of these concepts.
The second part of the course focuses on building a social media app using Svelte and Firebase.
You’ll learn how to authenticate users, store and retrieve data from Firestore, and implement features like image uploads, real-time updates, and pagination.
One of the standout features of this course is the emphasis on best practices and developer experience.
You’ll learn how to set up path aliases, improve code intelligence, and create reusable components and contexts.
The instructor also covers advanced topics like rendering options (SSR, CSR, and prerendering), creating modals and popups, and implementing form validation with custom validators.
Throughout the course, you’ll work on two major projects: a task management app and a social media app.
These projects will give you hands-on experience with Svelte and Firebase, allowing you to apply what you’ve learned in a real-world setting.
Introduction to Svelte (and SvelteKit)
You’ll start with the basics of Svelte, including components, props, logic, and events.
The course covers key concepts like reactivity, binding, and the store, which are essential for building dynamic and interactive applications.
Once you have a solid foundation, you’ll dive into building a complete Svelte project from scratch.
This hands-on experience will reinforce your understanding and give you practical experience with planning, structuring, and implementing a real-world application.
Along the way, you’ll learn about fetching data from APIs, working with timers, and handling component lifecycle events.
The course also explores advanced Svelte features like special elements, slots, and fragments, which can help you create more complex and flexible user interfaces.
Additionally, you’ll get an introduction to SvelteKit, a framework for building server-rendered Svelte applications with features like routing, server-side rendering, and API integration.
Throughout the course, you’ll work with essential web technologies like HTML, CSS, and JavaScript, ensuring you have a well-rounded understanding of the tools and concepts needed for modern web development.
The course covers reactivity, a core concept in Svelte that allows for efficient updates and rendering of your application’s user interface.
You’ll also learn about the store, a powerful feature in Svelte that allows you to manage application state and share data between components.
The context API, another important concept covered in the course, enables you to pass data down the component tree without the need for prop drilling.
As you progress, you’ll gain experience with SvelteKit, a framework for building server-rendered Svelte applications.
You’ll learn about routing, server-side rendering, and API integration, which are essential for building modern, performant web applications.
The course also touches on other Svelte frameworks like Routify, giving you a glimpse into the growing ecosystem of tools and libraries available for Svelte development.
Svelte.js 3 and Sapper Projects
The course starts by introducing you to Svelte and setting up your work environment.
You’ll analyze the Svelte workspace and learn how to create a hierarchy of components.
The first project is a vCard Generator, where you’ll apply what you’ve learned about reactivity, events, and two-way binding.
As you progress, you’ll enhance the application by dispatching events, using slots, and implementing conditional rendering.
The course covers transitions and animations, teaching you how to add basic transitions, enhance them, and animate elements using lifecycle functions.
You’ll dive into state management with stores, learning how to use them in your application.
The course also covers motion with the Svelte/Motion module and connecting to a database.
It provides options for deploying Svelte apps.
The Sapper framework is introduced, covering its app structure, routing, and preloading.
You’ll learn about testing with Cypress and deploying your app as a pre-rendered static site or a dynamic server-side rendered (SSR) app.
Throughout the course, you’ll encounter knowledge tests to reinforce your understanding of the concepts covered.
By the end, you’ll have a solid grasp of Svelte, its ecosystem, and the skills to build and deploy robust applications.