Aprender Desarrollo Web
Aprender Desarrollo Web — Desarrollo frontend desde HTML hasta React, con vista previa en vivo
Aprender Desarrollo Web es una app gratuita para iOS y Android dirigida a principiantes, diseñadores y personas que quieren cambiar de profesión para convertirse en desarrolladores web. HTML, CSS y JavaScript aparecen juntos en un editor en vivo, y la página de abajo se actualiza mientras escribes. 41 cursos y 163 lecciones breves te llevan desde la primera etiqueta, pasando por el diseño responsive y TypeScript, hasta React y Vue, con 20 proyectos guiados, misiones de depuración y un mentor de AI para ese error que no consigues encontrar.
- Precio
- Gratis, mejora a Pro
- Plataformas
- iOS y Android
- Idiomas
- 22
- Clasificación por edad
- 4+
- Requisitos
- iOS 15.1 o posterior
Cambia una línea y observa cómo cambia la página.
El editor muestra los paneles de HTML, CSS y JavaScript uno junto a otro, con una vista previa en vivo debajo, para aprender el marcado, los estilos y el comportamiento como una sola página, en lugar de estudiarlos como tres materias independientes.
Qué es
Aprender Desarrollo Web es una app gratuita para iOS y Android que enseña desarrollo frontend —la parte de un sitio web que las personas ven y tocan— mediante un editor de HTML, CSS y JavaScript en vivo en el teléfono. Ofrece 41 cursos y 163 lecciones clasificadas desde nivel principiante hasta senior, sobre los fundamentos de la web, el diseño responsive, JavaScript y el DOM, TypeScript, React, Vue, testing, accesibilidad y rendimiento, además de proyectos guiados, misiones de depuración, preguntas de entrevista y un mentor de AI.
Dentro de la app
Qué aspecto tiene
El curso
Qué incluye el curso de frontend
41 cursos y 163 lecciones, extraídos de la propia lista de cursos de la app: desde la primera etiqueta HTML hasta la arquitectura frontend y la ingeniería de nivel sénior.
La web y los tres fundamentos
Bienvenido al desarrollo frontend, cómo funciona la web, fundamentos de HTML, fundamentos de CSS y conceptos esenciales de JavaScript.
Diseño de interfaces y diseño responsive
Fundamentos del diseño responsive, formularios HTML y marcado semántico, dominio del layout con CSS, y variables, transiciones y animaciones de CSS.
JavaScript en el navegador
El DOM y las API del navegador, arrays, objetos y ES6+, programación asíncrona, y módulos de JavaScript y herramientas de compilación.
Flujo de trabajo y herramientas
Herramientas y flujo de trabajo para desarrolladores, flujo de trabajo con Git y colaboración, y herramientas modernas para frontend.
TypeScript
Introducción a TypeScript, análisis detallado de tipos e interfaces, y TypeScript avanzado para frontend.
React y Vue
Fundamentos de React, useEffect y obtención de datos, hooks y patrones avanzados; después, fundamentos de Vue 3, la Composition API y patrones avanzados de Vue.
Datos, renderizado y tiempo real
Gestión del estado, integración con API y REST, renderizado del lado del servidor con Next.js y Nuxt 3, aplicaciones web progresivas, y WebSockets y frontend en tiempo real.
Calidad y arquitectura
Accesibilidad, pruebas de frontend, optimización del rendimiento web, seguridad frontend, arquitectura CSS, sistemas de diseño, CI/CD frontend e ingeniería frontend sénior.
Cómo funciona
Cómo se aprende con la app
El orden de la app sigue el orden del oficio: primero crea una página, después haz que funcione y, por último, aprende las herramientas que permiten hacerla crecer.
Empieza con el primer curso gratuito
Welcome to Frontend Development abre el camino, y el editor en vivo es gratuito desde el principio. Cada lección incluye unos minutos de explicación seguidos de algo que puedes modificar y ejecutar.
Edita un panel y lee la vista previa
Cambia el HTML, el CSS o el JavaScript y la vista previa de abajo se actualiza. Los proyectos nuevos pueden comenzar a partir de una plantilla de HTML, React, Vue, Angular, Node o TypeScript.
Crea proyectos y corrige errores reales
Veinte proyectos guiados te ayudan a crear paso a paso una página de recetas, un formulario de contacto, una cuadrícula de tarjetas, una barra de navegación y una tabla de datos, mientras que 15 misiones de depuración te entregan páginas dañadas que debes reparar.
Qué incluye
Qué incluye la app
41
Cursos, de principiante a senior
163 lecciones clasificadas de A1 a C2, desde cómo funciona la web y los fundamentos de HTML hasta TypeScript, React, Vue 3, gestión del estado, renderizado del lado del servidor con Next.js y Nuxt 3, y aplicaciones web progresivas.
En vivo
Editor con vista previa instantánea
Paneles de HTML, CSS y JavaScript con una vista previa debajo, para que cada cambio se muestre al instante. Empieza proyectos nuevos a partir de varias plantillas de frameworks.
15
Misiones de depuración
Misiones basadas en problemas reales de frontend: un diseño que se rompe a 375 píxeles, una imagen que ralentiza la página, un formulario al que nadie puede acceder con el teclado, una fuga de memoria en un componente y un test que funciona localmente, pero falla en CI.
20
Proyectos guiados
Pequeños proyectos explicados paso a paso, como una página de recetas, un formulario de contacto, una cuadrícula de tarjetas, una barra de navegación y una tabla de datos.
AI
Mentor de AI y playground
Pregunta sobre un error, una lección o tu propio código, o describe una página en el playground de AI y observa cómo se escribe el código. Los usuarios gratuitos reciben tres preguntas de AI al día.
50
Preguntas de entrevista con respuestas
Cincuenta preguntas de entrevista para desarrolladores frontend y web con respuestas, además de una chuleta de 83 entradas sobre sintaxis y patrones, y una biblioteca de ejemplos breves que puedes abrir y editar.
Contexto
¿Qué aprende realmente un desarrollador frontend y en qué orden?
Un desarrollador frontend crea lo que se ejecuta en el navegador: la estructura de una página, su aspecto en cada tamaño de pantalla y su respuesta cuando alguien hace clic, escribe o se desplaza. El orden lógico es empezar por la estructura (HTML), continuar con la presentación (CSS), seguir con el comportamiento (JavaScript) y, solo después, aprender las herramientas que organizan proyectos más grandes: TypeScript, un framework como React o Vue, testing y un proceso de build. Saltar a un framework antes de dominar los tres fundamentos es la razón más habitual por la que los principiantes se atascan, porque un framework oculta en gran medida JavaScript y el DOM detrás de su propia sintaxis.
HTML semánticoel significado antes que la apariencia
Elegir un encabezado, una lista, una etiqueta de formulario o un botón por lo que es el contenido, en lugar de por cómo debería verse, proporciona a los lectores de pantalla, los motores de búsqueda y los teclados algo con lo que trabajar. También es la mejora de accesibilidad más sencilla y económica en cualquier página.
Diseño responsiveuna página, todas las pantallas
Flexbox, grid y las media queries permiten que un único diseño se reorganice desde un teléfono estrecho hasta un monitor grande. Probar pronto con un ancho pequeño, como 375 píxeles, permite detectar los errores de diseño que después son difíciles de corregir.
El DOMla página como un objeto vivo
El navegador convierte el HTML en un árbol de objetos que JavaScript puede leer y modificar. En última instancia, todos los frameworks son una forma práctica de actualizar ese árbol, así que entenderlo facilita mucho comprender React y Vue.
Core Web Vitals y rendimientovelocidad que las personas pueden sentir
Una página que carga tarde una imagen grande sin optimizar, o que cambia de posición mientras se carga, parece lenta aunque el código sea correcto. El rendimiento es una habilidad que solo se manifiesta al trabajar con páginas e imágenes reales.
Encaja
Para quién es y para quién no
Es una buena opción si
- Quieres convertirte en desarrollador web y partes desde cero
- Eres diseñador y quieres crear las páginas que diseñas
- Conoces algo de HTML y CSS y quieres añadir JavaScript, TypeScript, React o Vue
- Te estás preparando para tu primera entrevista de frontend y quieres preguntas con respuestas
- Prefieres ver cómo cambia una página mientras escribes en lugar de leer explicaciones largas
No es la herramienta adecuada si
- Necesitas crear y publicar un sitio grande con varios archivos, algo para lo que aún necesitas un portátil y un editor completo
- Esperas que todo sea gratis: el primer curso, el primer proyecto, dos misiones de depuración y el editor son gratis, y Pro desbloquea el resto
- Quieres un curso de backend o bases de datos, porque este itinerario trata sobre lo que se ejecuta en el navegador
- Ya trabajas como ingeniero frontend sénior y quieres una referencia en lugar de lecciones
Preguntas
Preguntas frecuentes
¿Qué es el desarrollo frontend?
El desarrollo frontend consiste en crear la parte de un sitio web o una aplicación web que se ejecuta en el navegador: su estructura con HTML, su apariencia con CSS y su comportamiento con JavaScript, además de los frameworks y las herramientas que se construyen sobre ellos. Aprender Desarrollo Web enseña este stack en ese orden, con una vista previa en directo para que cada cambio se vea de inmediato.
¿Puedo aprender desarrollo frontend desde el móvil?
Puedes aprender bien los conceptos y crear las primeras páginas desde el móvil, porque HTML, CSS y JavaScript son lo bastante pequeños como para editarlos en sesiones cortas, y la vista previa muestra el resultado al instante. La app coloca los tres paneles y una vista previa en directo en la pantalla. Un portátil resulta más cómodo cuando trabajas en un proyecto grande con muchos archivos, pero no lo necesitas para empezar.
¿Para quién es y por dónde debería empezar un principiante absoluto?
Es adecuado para principiantes absolutos, diseñadores que quieren crear lo que diseñan, desarrolladores que conocen algo de HTML y CSS, y personas que están cambiando de carrera y preparándose para su primer trabajo de frontend. Empieza por cómo funciona la web y por HTML básico, continúa con CSS y después con JavaScript. Aprender Desarrollo Web sigue ese orden y comienza con el curso gratuito Bienvenido al desarrollo frontend.
¿La app enseña React y Vue?
Sí. Después de HTML, CSS, JavaScript y TypeScript, la app ofrece cursos de React sobre fundamentos, useEffect y obtención de datos, hooks y patrones avanzados, y cursos de Vue 3 sobre fundamentos, la Composition API y patrones avanzados. También abarca la gestión del estado y el renderizado del lado del servidor con Next.js y Nuxt 3.
¿Necesito aprender TypeScript?
No es necesario para crear tu primera página, pero la mayoría de las bases de código profesionales de React y Vue lo utilizan, así que merece la pena aprenderlo después de los fundamentos de JavaScript. La app presenta TypeScript con un primer curso sobre tipos, un curso más profundo sobre tipos e interfaces y un curso avanzado sobre patrones de frontend.
¿Cómo funcionan las misiones de depuración?
Cada una de las 15 misiones de depuración te presenta una página o un componente con errores que refleja un problema real de frontend, como un layout que se rompe a 375 píxeles, un formulario que no se puede utilizar con el teclado, una fuga de memoria en un componente o una prueba que falla únicamente en CI, y tú debes solucionarlo. Dos misiones son gratis.
¿Puede ayudarme a prepararme para una entrevista de desarrollador frontend?
Puede ayudarte con la parte de conocimientos. Aprender Desarrollo Web incluye 50 preguntas de entrevista con respuestas, una hoja de referencia con 83 entradas sobre sintaxis y patrones, y cursos sobre pruebas, rendimiento, accesibilidad y arquitectura, que son los temas a los que suelen pasar las entrevistas después de los fundamentos. No sustituye la creación de un portafolio con tus propios proyectos.
¿Cuánto se tarda en aprender desarrollo frontend?
Un principiante que practica un poco cada día normalmente puede crear páginas responsive sencillas en unas pocas semanas, mientras que dominar JavaScript y un framework lleva meses. La app divide el itinerario en lecciones de pocos minutos, con rachas y recordatorios, para que el progreso se base en sesiones cortas y regulares en lugar de en una sola sesión larga.
¿Aprender Desarrollo Web es gratis?
Se puede descargar gratis en App Store y Google Play. El primer curso, el primer proyecto guiado, dos misiones de depuración y el editor de código son gratis, con tres preguntas diarias al mentor de IA, y la versión gratuita muestra anuncios. Pro desbloquea todos los cursos, proyectos y misiones, el examen del certificado y el acceso ilimitado a la IA, y elimina los anuncios.
¿Qué plataformas y lenguajes admite y la app de App Store es la misma?
Aprender Desarrollo Web funciona en iOS a través de App Store y en Android a través de Google Play, en 22 idiomas y con una clasificación de edad de 4+. La ficha de App Store se titula Learn Frontend Development y la de Google Play, Aprender Desarrollo Web, pero es la misma app. Al aprobar el examen final obtienes un certificado de finalización.
Empezar
Crea tu primera página web hoy mismo
Gratis para empezar en iOS y Android, en 22 idiomas.
Más de CoddyKit
Disponible en iOS.