Svelte & SvelteKit: The Complete Guide
Build & Deploy Full Stack, High Performance, Server Side Rendered Web Apps that Work Even with JavaScript Disabled.
Lo que serás capaz de hacer
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 are going to start with the basics of signal based reactivity and we then we will create simple components. And then gradually progress and create more complex components and discuss more in depth features. And while Svelte is a great tool to build components for the web, it's not an easy task to build an entire full stack 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. We are also going to use tools like PostgreSQL & Drizzle ORM for database management and BetterAuth and CASL for authentication and authorization. So join now if you want to build high performance web applications with Svelte & SvelteKit!
- Learn everything about Svelte from Scratch.
- Learn everything about SvelteKit.
- Use SvelteKit to create a full stack high performance web application.
- Create applications that work without JavaScript enabled.
Temario
UNIDAD 1 - Introduction to Svelte & Signal Based Reactivity · 17 leccionesUNIDAD 1 - Introduction to Svelte & Signal Based Reactivity
UNIDAD 1 - Introduction to Svelte & Signal Based Reactivity
- Before Getting Started
- What is Svelte?
- Svelte vs. React
- Svelte vs. SvelteKit & Creating a New SvelteKit Project
- Pure Functions
- The Microtask Queue
- Svelte Component Basics
- Adding Reactivity to Our Component
- Quick Note
- A Deep Dive into Signal Based Reactivity
- A Deep Dive into Signal Based Reactivity (cont.)
- More on Derived State
- Don't use Effects to Derive Values
- You Might Not Need to Use Effects
- $effect.pre & Lifecycle Functions
- Using Effects to Create a Counter Component
- Section Summary & Exercise Solution
UNIDAD 2 - Exploring Snippets, Styling, Props and Events with a Button Component · 14 leccionesUNIDAD 2 - Exploring Snippets, Styling, Props and Events with a Button Component
UNIDAD 2 - Exploring Snippets, Styling, Props and Events with a Button Component
- Introduction to Snippets
- Passing Snippets to Components as Props
- Passing Arguments to Component Snippets
- Using SASS & the Class Directive
- UPDATE: New Class Attribute Features
- Extending the HTML Button Element Attributes
- Using the Style Directive
- The Global CSS Selector
- Passing CSS Variables as Props
- Forwarding Events & Custom Events
- Event Bubbling, Capturing and Delegation
- Programatic Component Interaction with Component Exports
- Dynamic Rendering with <svelte:element />
- Section Summary
UNIDAD 3 - Deep State Reactivity · 14 leccionesUNIDAD 3 - Deep State Reactivity
UNIDAD 3 - Deep State Reactivity
- Javascript Proxies and Object Setters & Getters
- Deep State Reactivity in Svelte
- Debugging in Svelte
- Displaying a List of Data (#each loops & @const tags)
- Handling Removing Elements from An Array Correctly
- Immutable Raw State
- Spreadsheet Component: Initialization & Helper Functions
- Spreadsheet Component: Rendering a Table with Cells and Values
- Spreadsheet Component: Selecting & Editing Cells
- Spreadsheet Component: Updating Cells Values
- Spreadsheet Component: Handling SUM & MULTIPLY Functions
- Spreadsheet Component: Binding the Data Prop with $bindable()
- Spreadsheet Component: Changing the Cell Background and Font Colours
- Spreadsheet Component: Summary
UNIDAD 4 - Reactive Objects & Classes · 13 leccionesUNIDAD 4 - Reactive Objects & Classes
UNIDAD 4 - Reactive Objects & Classes
- Currency Converter Component Initialization
- Deriving Base and Target Values Using Effects
- Derving Base and Target Values Using Callbacks
- Quick Note
- Creating a "Writable Derived" with Object Setters and Getters
- Fetching Currency Date From an API & Using the {#await} Block
- Introduction to Reactive Classes
- Encapsulating Our Currency Converter Into a Reactive Class
- Customizing Setters and Getters for State Class Properties
- Exercise Solution
- Extracting our Class into a Reusable Class and Adding More Features
- Built-in Reactive Classes
- Section Summary
UNIDAD 5 - Universal Reactivity · 14 leccionesUNIDAD 5 - Universal Reactivity
UNIDAD 5 - Universal Reactivity
- Introduction to Universal Reactivity
- Extracting Logic in a Function
- Extracting Logic with Classes
- Sharing State Using Object Setters and Getters
- Sharing State Using Classes
- Sharing State with Proxy
- Defining Effects Globally for Shared State
- Persisting Shared State to LocalStorage with Effects
- Persisting Shared State to LocalStorage using Classes with Setters & Getters
- $effect.tracking()
- Using createSubscriber to Track the Scroll Position
- How does createSubscriber Work?
- Using createSubscriber in a Reusable Class
- Section Summary
UNIDAD 6 - The Context API · 12 leccionesUNIDAD 6 - The Context API
UNIDAD 6 - The Context API
- Introduction to the Context API
- Sharing Scoped State with Context
- Handling Components without a Parent Context
- Encapsulating Context Functions
- Installing and Using Konva Imperatively
- Creating a Konva Stage Component
- Creating a Konva Layer Component
- Creating a Konva Rect Component
- Handling Konva Events
- Handling Updating Props
- Supporting Prop Binding
- Using Component Exports to Access Konva Nodes Outside of the Component
UNIDAD 7 - Actions, Special Elements, Advanced Bindings and Module Scripts · 11 leccionesUNIDAD 7 - Actions, Special Elements, Advanced Bindings and Module Scripts
UNIDAD 7 - Actions, Special Elements, Advanced Bindings and Module Scripts
- Introduction to Actions
- The Longpress Action
- Tippy.js Action
- [UPDATE] Attachments
- Special Elements
- Error Boundaries
- Binding Dimensions
- Binding Media Elements
- Introduction to the Script Module
- Sharing Data Across Component Instances
- Controlling Multiple Videos with the Script Module
UNIDAD 8 - Animations & Transitions · 8 leccionesUNIDAD 8 - Animations & Transitions
UNIDAD 8 - Animations & Transitions
- The Transition Directive
- Animating Tiers and Images
- Key Block Transitions
- The Animate Directive and FLIP Animations
- The Crossfade Transition
- Custom CSS Transitions
- Custom JS Transitions
- Custom Animations
UNIDAD 9 - SvelteKit: Introduction & Setup · 4 leccionesUNIDAD 9 - SvelteKit: Introduction & Setup
UNIDAD 9 - SvelteKit: Introduction & Setup
- Introduction to SvelteKit
- Creating a New SvelteKit Application with Tailwind & DaisyUI
- Folder Structure Overview, $lib Alias and Custom Aliases
- VSCode Extensions & Settings
UNIDAD 10 - Pages & Layouts · 11 leccionesUNIDAD 10 - Pages & Layouts
UNIDAD 10 - Pages & Layouts
- Pages & Layouts Overview
- Creating Routes & Navigating Between Routes
- Dynamic Route Parameters
- Nesting Pages & Layouts
- Modifying Layouts Conditionally
- Layout Groups
- Breaking Out of Layouts Hierarchy
- Rest Parameters
- Optional Parameters
- Parameter Matchers
- Finalizing & Cleaning up the Marketing Group
UNIDAD 11 - Loading Data · 19 leccionesUNIDAD 11 - Loading Data
UNIDAD 11 - Loading Data
- Load Functions Overview
- Universal Load Functions
- Zero-effort Type Safety with Generated Types
- Server Only Load Functions
- Layout Load Functions
- Accessing Parent Data in Child Load Functions
- Passing Data From Pages to Layouts
- Creating Endpoints
- Handling POST Requests in Endpoints
- Handling Pages & Endpoints in the Same Route
- Sending Fetch Requests in Load Functions
- Passing Svelte Components From Load Functions
- Implementing Pagination Using URL Search Params
- Adapting Our Content Depending on JavaScript Availability
- Load More Posts Pagination Function
- Creating the Single Blog Post Page
- Running Requests in Parallel with Promise.all
- Streaming Data From Server Load Functions to the Client
- Using beforeNavigate & afterNavigate to Add a Loading Progress Bar
UNIDAD 12 - Hooks & Error Handling · 10 leccionesUNIDAD 12 - Hooks & Error Handling
UNIDAD 12 - Hooks & Error Handling
- Hooks Overview
- Handle Hook Overview
- The Handle Hook in Action
- What is the Locals Object & Why We shouldn't Protect Routes in Layout Load Funcs
- Using the Handle Hook & Locals for Authentication
- Resolve Function Options
- More on the Fetch Function: filterSerializedResponseHeaders & handleFetch
- Handling Expected Errors
- Handling Unexpected Errors with Hooks
- Universal Hooks: Reroute & Transport
UNIDAD 13 - Load Functions Dependencies & Invalidation, Preloading Data and Link Options · 5 leccionesUNIDAD 13 - Load Functions Dependencies & Invalidation, Preloading Data and Link Options
UNIDAD 13 - Load Functions Dependencies & Invalidation, Preloading Data and Link Options
- Adding a Layout to blog/[id]
- Load Functions Dependencies
- Invalidating Load Functions
- Re-running Load Functions on Error
- Link Options & Preloading Routes' Code & Data
UNIDAD 14 - Setting Up a Database (PostgreSQL & Drizzle ORM) · 6 leccionesUNIDAD 14 - Setting Up a Database (PostgreSQL & Drizzle ORM)
UNIDAD 14 - Setting Up a Database (PostgreSQL & Drizzle ORM)
- Using Environment Variables
- Server Only Modules
- Application & Database Structure Overview
- Setting Up Drizzle & Running PostgreSQL with Docker
- Creating & Migrating Our Schema
- Seeding the Database with Dummy Data
UNIDAD 15 - Fetching Data from the Database · 7 leccionesUNIDAD 15 - Fetching Data from the Database
UNIDAD 15 - Fetching Data from the Database
- Our First Database Query
- Querying App Layout Data
- Displaying Our Fetched Layout Data
- App Route Markup Walkthrough
- Workspaces & Pages Layout
- Workspaces & Pages Layout (Cont.)
- Creating the Page Route
UNIDAD 16 - Form Actions & Shallow Routing · 13 leccionesUNIDAD 16 - Form Actions & Shallow Routing
UNIDAD 16 - Form Actions & Shallow Routing
- Introduction to Form Actions
- Form Actions Validation, Success & Error Messages
- Inserting a New Workspace Into the Database
- Progressively Enhancing the Form Submission with use:enhance
- Customizing use:enhance Behavior
- Using SuperForms & Formsnap to Manage Our Forms
- Using SuperForms & Formsnap to Manage Our Forms (Cont.)
- Refactoring the Workspace Form
- Editing a Workspace
- Deleting a Workspace
- Opening Routes in a Modal with Shallow Routing
- Opening Routes in a Modal with Shallow Routing (Cont.)
- Shallow Routing for Edit Workspace Route
UNIDAD 17 - Authentication & Authorization (Better Auth & CASL) · 18 leccionesUNIDAD 17 - Authentication & Authorization (Better Auth & CASL)
UNIDAD 17 - Authentication & Authorization (Better Auth & CASL)
- Installing & Configuring Better Auth
- Creating the Sign In & Register Routes
- The Register Action
- Sending the Verification Email with Resend
- Populating the Locals Object with the Better Auth Session
- The Login Action
- The Logout Action
- Signing In with GitHub
- Final Notes on Authorization
- Abstracting the Login Guard Logic in a Function
- Querying the Workspace Access to Protect the Workspace Route
- Defining Workspace Permissions with CASL
- Refactoring the Workspace Access Check in a Function
- Adding Page Access Checks to our Function
- Using Our Access Function to Protect Our Routes
- Protecting the Settings Route
- Protecting the Edit and Delete Workspace Actions
- Protecting the Page Route
UNIDAD 18 - Page Options & Pre-rendering · 6 leccionesUNIDAD 18 - Page Options & Pre-rendering
UNIDAD 18 - Page Options & Pre-rendering
- SSR, CSR & Trailing Slashes
- Pre-rendering Routes and Building & Previewing the App
- Pre-rendering Endpoints
- Pre-rendering Routes with Dynamic Data
- Pre-rendering Routes with Dynamic Parameters
- Adding Dynamic Content to Pre-rendered Pages
UNIDAD 19 - Deployment · 5 leccionesUNIDAD 19 - Deployment
UNIDAD 19 - Deployment
- Deployment & Adapters Overview
- Setting Up a Neon Database
- Configuring and Running the Node Adapter Locally
- Deploying the Node Server to fly.io
- Deploying to a Serverless Platform (Vercel)
Tu certificado lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
19 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Ali Alaa.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 19 unidades · 207 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Ali Alaa; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
