Aprender Svelte: Curso Code
Aprender Svelte: Curso Code — Aprende Svelte y SvelteKit con un editor en vivo y el código compilado a su lado
Aprender Svelte: Curso Code es una app gratuita para iOS y Android que te permite aprender Svelte y SvelteKit desde el móvil. Escribe componentes en un editor en vivo con una vista previa, consulta el JavaScript en el que el compilador los convierte y completa 41 cursos, desde tu primer valor reactivo hasta una app full-stack desplegada, con un Mentor de IA a tu lado.
- Precio
- Gratis, actualización a Pro
- Plataformas
- iOS y Android
- Idiomas
- 22
- Clasificación por edad
- 4+
- Requisitos
- iOS 15.1 o posterior
Nada de lo que aparece en esa pantalla está ejecutando Svelte. Está ejecutando lo que Svelte escribió.
La primera lección de la app muestra un componente de nueve líneas junto al JavaScript que el compilador generó para él. Toca +1 y las líneas que se ejecutan se iluminan: una invalidación, un valor recalculado, dos nodos de texto modificados y nada más afectado. Esa es la idea en la que se basa el framework, mostrada antes de explicarla.
Qué es
Aprender Svelte: Curso Code es una app gratuita para iOS y Android que enseña Svelte y SvelteKit mediante 41 cursos y 163 lecciones, con niveles desde principiante hasta avanzado. Empieza con una demostración que muestra un componente junto a su JavaScript compilado y después cubre reactividad, props, stores, transiciones, runes de Svelte 5 y routing de SvelteKit, carga de datos, acciones de formularios y despliegue. Incluye un editor en vivo con vista previa y un Mentor de IA.
Dentro de la app
Qué aspecto tiene
El curso
Qué incluye el curso de Svelte
41 cursos y 163 lecciones de la lista de cursos propia de la app, clasificados de A1 a C1 y con un proyecto completo de SvelteKit como cierre.
Primeros componentes
Qué es Svelte y por qué adopta un enfoque diferente, cómo configurar un proyecto y cómo escribir tu primer componente con variables reactivas.
Props, plantillas, eventos y binding
Cómo pasar props, usar condicionales y bucles each en el marcado, gestionar eventos del DOM y eventos personalizados, y crear binding bidireccional con las directivas bind:.
Ciclo de vida, stores y contexto
onMount y onDestroy, stores writable, readable, derived y personalizados, slots y composición, y la Context API.
Transiciones, animaciones y actions
Directivas de transición, la directiva animate, actions para reutilizar el comportamiento del DOM, transiciones personalizadas y los stores de movimiento spring y tweened.
Fundamentos de SvelteKit
Enrutamiento y páginas basados en archivos, funciones load, layouts avanzados, acciones de formulario, rutas de API, hooks del servidor y páginas de error.
Runes de Svelte 5
Una introducción a las runes, props y snippets, runes avanzadas y un análisis más profundo de cómo funciona la reactividad de Svelte.
SvelteKit en producción
SSR y prerendering, streaming, rendimiento, SEO y meta tags, seguridad, patrones de autenticación, adapters y despliegue.
Testing y full-stack
Pruebas unitarias con Vitest, pruebas end-to-end con Playwright, bibliotecas de terceros, gestión del estado a gran escala y una app full-stack de SvelteKit.
Cómo funciona
Cómo funciona una sesión
La app está organizada en torno a un recorrido que va desde un valor reactivo hasta una app desplegable, y cada etapa combina teoría con algo que puedes ejecutar.
Consulta primero el resultado del compilador
La demostración inicial coloca un pequeño componente junto al JavaScript en el que se compila. La parte compilada se generó de antemano y está incluida en la app, por lo que la demostración funciona sin conexión.
Edita un componente y obtén una vista previa
Las lecciones abren un editor con pestañas para HTML, CSS y JavaScript, además de un botón de ejecución que renderiza el componente en una vista previa. La vista previa carga el compilador de Svelte a través de la red, por lo que necesita conexión.
Comprueba que lo has aprendido
Después de cada tema hay un cuestionario y desafíos de coding, y el Mentor de IA puede explicar un concepto, sugerir un itinerario o hacerte preguntas sobre un curso. El Weekly Code Challenge añade una ronda competitiva.
Qué incluye
Qué incluye la app
41
Cursos, de A1 a C1
163 lecciones repartidas en 41 cursos, desde la configuración de Svelte y tu primer componente hasta stores, transiciones, routing y hooks de SvelteKit, runes de Svelte 5, testing y un proyecto final full-stack.
Compilado
Componente junto a su código compilado
La demostración inicial muestra el código fuente y el JavaScript generado juntos, y cuenta los nodos de texto actualizados frente a los elementos recreados, para que puedas ver en pantalla el coste de una actualización.
Vista previa
Editor en vivo con vista previa
Escribe el markup, los estilos y el script en pestañas separadas y renderiza el componente en el teléfono. La vista previa utiliza el compilador de Svelte 4.2.19, por lo que es posible que el código escrito con runes de Svelte 5 no se muestre correctamente; es mejor leerlo y seguirlo paso a paso.
IA
Mentor de IA
Pide los conceptos clave de un curso, consejos para aprender más rápido, un cuestionario o un itinerario personal desde la pestaña de chat, o pregunta por un error que no consigues entender.
Semanal
Weekly Code Challenge
Una ronda de desafíos periódica para competir mientras avanzas en las lecciones, con rachas, seguimiento del progreso y recordatorios para mantener la rutina.
Examen
Certificado de finalización
Aprueba el examen final y el certificado llevará tu nombre: es una prueba del trabajo realizado, no una titulación acreditada.
Contexto
¿Qué es Svelte y en qué se diferencia de otras formas de crear una interfaz web?
Svelte es un framework para crear interfaces de usuario cuyos componentes se compilan de antemano en JavaScript plano que actualiza la página directamente, en lugar de enviar un runtime grande que calcula los cambios en el navegador. Un componente es un único archivo con markup, estilos y script, y una asignación como count += 1 basta para actualizar la pantalla. SvelteKit es el framework de aplicaciones construido sobre esta base: añade routing basado en archivos, carga de datos en el servidor, gestión de formularios y adaptadores para el despliegue. En la práctica, para quien está aprendiendo esto significa menos código repetitivo y una menor distancia entre el código y lo que aparece en la página.
Reactividad en tiempo de compilaciónuna asignación es el estado
En Svelte, el compilador transforma una asignación normal en el código que actualiza las partes afectadas de la página. Una sentencia etiquetada que comienza por $: recalcula un valor cada vez que cambian los valores que lee, por lo que los datos derivados no necesitan funciones auxiliares.
Storesestado compartido entre componentes
Un store writable contiene un valor al que muchos componentes pueden suscribirse, y añadir el prefijo $ a su nombre activa la suscripción automática. Los stores derived y personalizados se basan en esto cuando el estado debe calcularse o envolverse.
Runesla sintaxis de Svelte 5
Svelte 5 sustituye gran parte de la magia anterior del compilador por funciones explícitas como $state, $derived y $props, junto con snippets para crear markup reutilizable. Ambos estilos se usan en proyectos reales, por eso la app enseña el modelo original y el modelo de runes en cursos separados.
SvelteKitrouting, datos y despliegue
Un archivo como +page.svelte se convierte en una ruta, una función load obtiene los datos antes de que se renderice la página, las acciones de formularios gestionan los envíos en el servidor y un adaptador empaqueta el resultado para un host estático, un servidor Node o una plataforma serverless.
Encaja
Para quién es y para quién no
Es una buena opción si
- ¿Quieres aprender Svelte o SvelteKit en sesiones cortas en lugar de cursos de vídeo largos?
- ¿Conoces algo de HTML y JavaScript y quieres ver qué cambia un framework basado en compilación?
- ¿Te interesa saber cómo funcionan las actualizaciones reactivas y prefieres leer el código generado en lugar de aceptarlo sin más?
- ¿Quieres una ruta que llegue al enrutamiento, la carga de datos, la autenticación y el despliegue, no solo a los componentes?
- ¿Te gusta preguntarle a AI Mentor por qué un fragmento de código se comporta como lo hace?
No es la herramienta adecuada si
- ¿Quieres ejecutar código de las runes de Svelte 5 en la vista previa, que usa el compilador de Svelte 4.2.19?
- ¿Necesitas crear y desplegar un proyecto completo de SvelteKit desde el teléfono, aunque para eso todavía hace falta un portátil?
- ¿Esperas que todo sea gratis? El primer curso es gratuito y Pro desbloquea el resto.
- ¿Nunca has visto HTML ni JavaScript y quieres hacer un curso general de programación antes de aprender un framework?
Preguntas
Preguntas frecuentes
¿Cómo puedo aprender Svelte desde el teléfono?
Elige una ruta que combine la lectura con la ejecución de código, porque Svelte se entiende mejor cuando cambias un valor y ves cómo responde la página. Aprender Svelte: Curso Code comienza con una demostración de salida compilada y después ofrece lecciones con un editor de HTML, CSS y JavaScript, una vista previa y AI Mentor. Puedes empezar gratis en iOS y Android.
¿Es difícil aprender Svelte para un principiante?
Svelte suele considerarse accesible porque los componentes se parecen a HTML, CSS y JavaScript normales, y una asignación actualiza la pantalla. Las partes difíciles llegan después, con los stores, el ciclo de vida, la separación entre servidor y cliente de SvelteKit y el cambio a las runes de Svelte 5. Aprender Svelte: Curso Code clasifica sus 41 cursos de A1 a C1 para que estos temas lleguen en orden.
¿Qué es SvelteKit y la app lo enseña?
SvelteKit es el framework de aplicaciones para Svelte. Añade enrutamiento basado en archivos, carga de datos en el servidor, acciones de formulario, hooks y adapters de despliegue. Aprender Svelte: Curso Code cuenta con cursos específicos sobre el enrutamiento y las páginas de SvelteKit, la carga de datos, las acciones de formulario, las rutas de API, los hooks, la gestión de errores, SSR y prerendering, streaming, seguridad y adapters.
¿La app incluye las runes de Svelte 5?
Sí. Aprender Svelte: Curso Code incluye cursos sobre una introducción a las runes, props y snippets, y runes avanzadas. La vista previa del editor compila actualmente con Svelte 4.2.19, por lo que es posible que el código con runes no se muestre en la vista previa; lo mejor es seguirlo en el texto de la lección.
¿Puedo ejecutar código de Svelte desde el teléfono?
Puedes escribir un componente en el editor y renderizarlo en una vista previa. La vista previa de Aprender Svelte: Curso Code carga el compilador de Svelte para crear el componente, así que necesita conexión. La demostración inicial de salida compilada es diferente: su código compilado viene incluido en la app y funciona sin conexión de red.
¿Aprender Svelte: Curso Code es gratis?
La app se puede descargar gratis. El primer curso es gratuito, incluye una cuota diaria de AI Mentor y Pro desbloquea todos los cursos, elimina los anuncios y ofrece AI Mentor ilimitado. Puedes completar lecciones reales antes de decidir si quieres actualizar tu plan.
¿Necesito saber JavaScript primero?
Saber algo de HTML y JavaScript hará que los primeros cursos sean más fáciles, porque un componente de Svelte es simplemente esos lenguajes en un mismo archivo. Aprender Svelte: Curso Code comienza explicando qué es Svelte y cómo configurarlo, y explica cada concepto con un lenguaje sencillo, pero es un curso sobre un framework, no un primer curso de programación.
¿Qué plataformas e idiomas admite?
Aprender Svelte: Curso Code funciona en iOS a través del App Store y en Android a través de Google Play, y la interfaz está disponible en 22 idiomas. Tiene una clasificación de 4+, por lo que ningún contenido está restringido por edad.
Empezar
Compila tu primer componente hoy
Empieza gratis en iOS y Android, en 22 idiomas.
Más de CoddyKit
Disponible en iOS y Android.