0Pricing
Sveltejs Academy icon

Sveltejs Academy

HTMLFrontendWebBeginner

Construye interfaces de usuario rápidas y simples con técnicas modernas en Svelte Academy.

🤖 Impulsado por IA📚 41 cursos👥 100.000+ estudiantes⭐ Calificación 4,9
Descripción general del curso

Construye Interfaces Reales con Svelte y SvelteKit

Svelte adopta un enfoque fundamentalmente diferente al de React y Vue — en lugar de enviar un runtime al navegador, compila tus componentes a JavaScript vanilla altamente eficiente en tiempo de construcción. El resultado son bundles más pequeños, tiempos de carga más rápidos y menos boilerplate. SvelteKit, el framework oficial, añade enrutamiento basado en archivos, server-side rendering, form actions y adaptadores de despliegue para que puedas lanzar aplicaciones de nivel producción en cualquier plataforma. Esta pista cubre ambos, desde el primer componente hasta arquitectura full-stack.

Qué Aprenderás

Comenzarás con el modelo de componentes de Svelte — props, sintaxis de template, condicionales, loops y two-way binding — luego pasarás al sistema de reactividad, funciones de ciclo de vida y las primitivas de store: writable, readable, derived y custom stores. En el lado de la UI trabajarás con slots, Context API, transiciones CSS, animaciones y Svelte Motion. Los capítulos de SvelteKit cubren enrutamiento, carga de datos, SSR y prerendering, form actions, rutas API, hooks, manejo de errores, layouts avanzados, patrones de autenticación y adaptadores de despliegue. La pista también cubre el sistema de runes de Svelte 5, testing con unit tests y Playwright E2E, integración de librerías de terceros y prácticas de seguridad en SvelteKit.

La Ruta de Aprendizaje

Cuarenta y uno cursos progresan desde A1 hasta C1. Los primeros siete cursos establecen los fundamentos: componentes, props, eventos y sintaxis de template. B1 introduce stores, slots, transiciones y tus primeras páginas de SvelteKit y patrones de carga de datos. B2 — el bloque más grande — aborda form actions, rutas API, hooks, reactividad avanzada, Svelte Actions, animaciones personalizadas, patrones de autenticación, adaptadores, runes de Svelte 5, testing y seguridad. La pista cierra en C1 con runes avanzados, patrones de componentes avanzados, streaming de SvelteKit, optimización de rendimiento, gestión de estado a gran escala y una aplicación full-stack SvelteKit de capstone.

Cómo Funciona

Cada curso se divide en lecciones cortas y enfocadas que completas en el editor de código integrado con retroalimentación en tiempo real. Un tutor de IA está disponible cuando te quedas atascado, y cada concepto se refuerza con ejercicios prácticos antes de pasar al siguiente tema.

Comienza a aprender →

Cómo Aprenderás

🎯
Lecciones Interactivas
Ejercicios de codificación prácticos con retroalimentación en tiempo real
🤖
Tutor de IA
Obtén ayuda instantánea de nuestro IA cuando te atasques
💻
Editor Integrado
Escribe y ejecuta código directamente en tu navegador
🏆
Certificado
Obtén un certificado al completar el curso
Plan de Estudios

41 Cursos

Todos los cursos en la ruta de aprendizaje Sveltejs Academy.

01

Bienvenido a Svelte

A13 lecciones

Comprenda qué es Svelte, por qué adopta un enfoque completamente distinto al de React o Vue para crear interfaces de usuario y por qué quie…

02

Introducción y configuración de Svelte

A14 leccionesPRO

Comience a trabajar con Svelte comprendiendo qué lo diferencia de otros frameworks, configurando su primer proyecto y explorando la estruct…

03

Su primer componente de Svelte

A14 leccionesPRO

Aprenda a escribir componentes de Svelte desde cero, utilizar variables reactivas, interpolar expresiones y crear valores calculados con de…

04

Props y comunicación entre componentes

A24 leccionesPRO

Transfiera datos entre componentes de Svelte mediante props, establezca valores predeterminados y reenvíe props de forma elegante con $$pro…

05

Sintaxis de plantillas: condicionales y bucles

A24 leccionesPRO

Controle qué se renderiza en sus plantillas de Svelte mediante bloques condicionales, recorra arrays con bloques each y fuerce nuevos rende…

06

Eventos y gestión de eventos

A24 leccionesPRO

Gestione eventos del DOM en Svelte, utilice modificadores de eventos para simplificar patrones habituales, envíe eventos personalizados des…

07

Enlace bidireccional

A24 leccionesPRO

Sincronice entradas de formularios y elementos del DOM con variables de Svelte mediante directivas bind: para texto, casillas de verificaci…

08

Funciones del ciclo de vida

B14 leccionesPRO

Controle lo que sucede en cada etapa de la vida de un componente de Svelte con onMount, onDestroy, beforeUpdate, afterUpdate y la utilidad…

09

Stores de Svelte: Writable y Readable

B14 leccionesPRO

Comparta estado reactivo entre componentes mediante las primitivas de store integradas de Svelte, suscríbase a ellas con la abreviatura $ y…

10

Stores derivados y personalizados

B14 leccionesPRO

Componga stores de Svelte derivando stores calculados a partir de una o varias fuentes y cree stores completamente personalizados que imple…

11

Slots y composición de componentes

B14 leccionesPRO

Proyecte contenido en componentes de Svelte mediante slots predeterminados y con nombre, proporcione contenido alternativo y compruebe si l…

12

Transiciones CSS

B14 leccionesPRO

Anime elementos al entrar y salir del DOM con las directivas de transición integradas de Svelte, configure la duración y la aceleración, y…

13

Animaciones CSS

B14 leccionesPRO

Vaya más allá de las transiciones con la directiva animate de Svelte para reordenar listas, crear animaciones de resorte basadas en física…

14

Enrutamiento y páginas de SvelteKit

B14 leccionesPRO

Recorra el sistema de enrutamiento basado en archivos de SvelteKit, cree rutas dinámicas con parámetros y utilice archivos de layout para c…

15

Carga de datos en SvelteKit

B14 leccionesPRO

Cargue datos para sus páginas mediante las funciones load de SvelteKit, gestione los errores con elegancia y ejecute lógica exclusiva del s…

16

API de contexto

B14 leccionesPRO

Transfiera datos a cualquier nivel del árbol de componentes sin prop drilling mediante la Context API de Svelte y comprenda cuándo conviene…

17

SEO y metadatos en SvelteKit

B14 leccionesPRO

Mejore la visibilidad configurando etiquetas meta dinámicas, tarjetas OpenGraph, datos estructurados JSON-LD y gestionando URL canónicas en…

18

Acciones de formularios de SvelteKit

B24 leccionesPRO

Gestione envíos de formularios HTML en el servidor con las acciones de formularios de SvelteKit, mejórelos progresivamente con JavaScript y…

19

Rutas de API de SvelteKit

B24 leccionesPRO

Construya endpoints de API RESTful y de streaming dentro de SvelteKit mediante archivos +server.js, gestione varios métodos HTTP y devuelva…

20

Hooks de SvelteKit

B24 leccionesPRO

Intercepte y transforme cada solicitud con los hooks de servidor de SvelteKit, registre errores de forma centralizada y combine varios hook…

21

Gestión de errores en SvelteKit

B24 leccionesPRO

Ofrezca una excelente experiencia cuando algo falle personalizando las páginas de error, distinguiendo los errores previstos de los imprevi…

22

Reactividad avanzada de Svelte

B24 leccionesPRO

Profundice en el sistema reactivo de Svelte: el orden de las declaraciones reactivas, cuándo utilizar stores frente al estado local y cómo…

23

Actions de Svelte

B24 leccionesPRO

Asocie comportamientos imperativos reutilizables a elementos del DOM con las actions de Svelte, gestione parámetros y actualizaciones y cre…

24

Transiciones y animaciones personalizadas

B24 leccionesPRO

Escriba funciones de transición personalizadas de Svelte desde cero, controle los parámetros de duración y cree transiciones morphing y tra…

25

Motion en Svelte

B24 leccionesPRO

Anime valores a lo largo del tiempo con los stores de movimiento spring y tweened de Svelte, utilice funciones de interpolación y aplique m…

26

Layouts avanzados de SvelteKit

B24 leccionesPRO

Domine el sistema avanzado de layouts de SvelteKit: layouts de grupo, sobrescrituras a nivel de ruta, salida de layouts y uso compartido de…

27

Patrones de autenticación en SvelteKit

B24 leccionesPRO

Implemente autenticación en SvelteKit mediante sesiones basadas en cookies, JWT seguros, protección de rutas en hooks y OAuth con Lucia Aut…

28

Adaptadores e implementación de SvelteKit

B24 leccionesPRO

Implemente aplicaciones de SvelteKit en cualquier entorno utilizando el adaptador adecuado: sitios estáticos, servidores Node.js, Vercel y…

29

Svelte 5: introducción a Runes

B24 leccionesPRO

Descubra el sistema de runes de Svelte 5, que sustituye la magia del compilador por primitivas reactivas explícitas para el estado, los val…

30

Svelte 5: Props y Snippets

B24 leccionesPRO

Utilice $props() para definir props tipadas de componentes y la nueva sintaxis de snippets con {#snippet} y {@render} para crear composicio…

31

SSR y prerenderizado en SvelteKit

B24 leccionesPRO

Controle la estrategia de renderizado por ruta en SvelteKit: elija entre load universal y exclusivo del servidor, prerenderice páginas está…

32

Pruebas de Svelte: pruebas unitarias

B24 leccionesPRO

Escriba pruebas unitarias fiables para componentes y stores de Svelte con Vitest y @testing-library/svelte, cubriendo renderizado, interacc…

33

Pruebas de Svelte: E2E con Playwright

B24 leccionesPRO

Escriba pruebas de extremo a extremo para aplicaciones SvelteKit con Playwright, cubriendo navegación entre páginas, interacciones con form…

34

Integración de bibliotecas de terceros

B24 leccionesPRO

Añada Tailwind CSS, visualizaciones de datos con D3.js, mapas de Leaflet y editores de texto enriquecido a proyectos SvelteKit mediante act…

35

Seguridad en SvelteKit

B24 leccionesPRO

Refuerce su aplicación SvelteKit frente a ataques CSRF, XSS e inyección, gestione las variables de entorno de forma segura y limite la frec…

36

Svelte 5: Runes avanzadas

C14 leccionesPRO

Explore patrones avanzados de runes de Svelte 5, incluidos el estado sin procesar, derivaciones complejas, limpieza manual de efectos y mig…

37

Patrones avanzados de componentes

C14 leccionesPRO

Construya API sofisticadas y reutilizables de componentes de Svelte mediante render props con snippets, componentes de orden superior, el p…

38

Streaming en SvelteKit

C14 leccionesPRO

Ofrezca cargas iniciales rápidas transmitiendo promises desde las funciones load, posponiendo datos lentos y transmitiendo desde rutas de A…

39

Rendimiento de SvelteKit

C14 leccionesPRO

Optimice el rendimiento de aplicaciones SvelteKit con división automática de código, gestión mejorada de imágenes, carga diferida y herrami…

40

Gestión de estado a gran escala

C14 leccionesPRO

Diseñe aplicaciones Svelte grandes con patrones de stores por módulos de funcionalidad, buses de eventos, actualizaciones optimistas de la…

41

Creación de una aplicación Full Stack con SvelteKit

C14 leccionesPRO

Combine todo lo aprendido para crear una aplicación full stack lista para producción, con autenticación, una base de datos mediante Drizzle…

Preguntas frecuentes

Preguntas frecuentes

¿Es gratuito el curso Sveltejs Academy?

Sí. Puedes empezar el curso Sveltejs Academy gratis y completar sus lecciones interactivas sin costo alguno. Una suscripción opcional a PRO desbloquea herramientas avanzadas de IA y un certificado compartible.

¿Necesito experiencia previa para aprender HTML?

No. El curso comienza con los fundamentos y avanza gradualmente hacia temas más avanzados, así que puedes empezar incluso sin experiencia previa en HTML.

¿Cómo aprenderé HTML en CoddyKit?

Aprendes haciendo. Las lecciones interactivas cortas combinan una explicación clara con un ejercicio de codificación práctico que se ejecuta en tiempo real, y un tutor de IA disponible 24/7 te da ayuda personalizada siempre que te atasques.

¿Obtengo un certificado al completar Sveltejs Academy?

Sí. Los aprendices PRO pueden hacer un examen y obtener un certificado compartible de finalización con un código verificable para el curso Sveltejs Academy.

¿Puedo aprender HTML en mi teléfono?

Sí. CoddyKit está disponible en la web y como aplicaciones nativas para iOS y Android, así que puedes aprender HTML en cualquier dispositivo y tu progreso se sincroniza entre ellos.

Comienza Sveltejs Academy Ahora

Únete a miles de estudiantes dominando programación con lecciones impulsadas por IA.

Empezar Gratis →Ver Todos los Cursos