Paso 1
Ruta de aprendizaje
Hoja de ruta del desarrollador frontend
Cursos gratuitos en el orden en que un desarrollador front end los necesita de verdad: HTML para la estructura, CSS para la maquetación, JavaScript para el comportamiento, TypeScript para la seguridad de tipos, React y Next.js para aplicaciones reales, Git para publicar y ocho proyectos para demostrarlo. Cada lección se ejecuta en tu navegador y todos los cursos anteriores al paso de proyectos terminan con un certificado gratuito.
698,051+ codders inscritos en estos cursos
804 lecciones823 retos3,184 preguntas de quiz
- Apto para principiantes
Ayuda de codificación con IA
Lecciones interactivas prácticas
Narración de audio en cada lección
Cuestionarios para poner a prueba tu conocimiento
13 certificados gratis a lo largo de la ruta
La ruta del desarrollador front end, paso a paso
Cada paso es un curso de Coddy que ya existe. Hazlos en orden o salta directamente al que te falta: tu progreso se guarda por curso en cualquier caso.
- 1
- 2Paso 2
CSS: maquetación y diseñoPágina propia
Empezar este pasoEmpezarSelectores, el modelo de caja, colores y tipografía, y después flexbox, grid, diseños responsive, transiciones y animación a lo largo de dos secciones. Este es el paso en el que una página empieza a parecerse a las que usas a diario.EmpezarPágina propia2 secciones, en orden - 3Paso 3
JavaScript, el lenguaje completoPágina propia
Empezar este pasoEmpezarFundamentos, lógica y flujo de control, y luego objetos y clases, en tres secciones. El trabajo de front end es trabajo de JavaScript; cada framework posterior a este paso no es más que una forma de organizarlo, y solo se lee bien cuando el lenguaje se lee bien.EmpezarPágina propia3 secciones, en orden - 4Paso 4
JavaScript en el navegadorPágina propia
Empezar este pasoEmpezarEl DOM, los eventos, la obtención de datos y la construcción de páginas interactivas sin framework, y después patrones prácticos de front end. Aquí es donde HTML, CSS y JavaScript se convierten en una sola cosa: una página que responde a quien la usa.EmpezarPágina propia2 secciones, en orden - 5Paso 5
TypeScriptPágina propia
Empezar este pasoEmpezarTipos, interfaces, genéricos y los errores del compilador como herramienta. Casi toda base de código profesional de React es TypeScript, así que llega justo antes del framework y no como un añadido final.EmpezarPágina propia - 6Paso 6
React y Next.jsPágina propia
Empezar este pasoEmpezarComponentes, props, estado, hooks y renderizado, y después Next.js para el enrutado, la carga de datos y las aplicaciones reales. El framework que más aparece en las ofertas de front end, enseñado después del lenguaje en el que está escrito.EmpezarPágina propia2 secciones, en orden - 7Paso 7
Git y control de versionesPágina propia
Empezar este pasoEmpezarCommits, ramas, merges, resolución de conflictos y remotos. Todo trabajo de front end y todo proyecto de portfolio vive en un repositorio Git; aprenderlo aquí significa que los proyectos del siguiente paso se publican como se hace en el trabajo real.EmpezarPágina propia - 8Paso 8
Proyectos: construye lo que ya has visto
Empezar este pasoEmpezarEjercicios de flexbox y selectores, práctica con el DOM y los métodos de array, y después construcciones reales: una tarjeta de perfil de Coddy, una página de Instagram, una página de inicio de sesión de Netflix y un slider de imágenes. Cada una es una pieza de portfolio que un reclutador puede abrir.Empezar8 cursos, en orden- CSS Flexbox - El curso completoSolo html15 lecciones
- Selectores CSSSolo html15 lecciones
- Métodos del DOM de JavaScriptSolo html13 lecciones
- Métodos de Arrays en JavaScriptSolo javascript18 lecciones
- Clon de tarjeta de perfil de Coddy | Proyecto front-endSolo html26 lecciones24 retos1 proyecto
- Clon de página de Instagram | Proyecto Front-EndSolo html16 lecciones14 retos1 proyecto
- Clon de la página de inicio de sesión de Netflix | Proyecto de front-endSolo html19 lecciones18 retos1 proyecto
- Slider | Proyecto de front-endSolo html23 lecciones22 retos1 proyecto
Lo que obtienes
Todo lo que usarás para aprender a programar
Aprende Haciendo
Escribe código real, consulta bases de datos, crea sitios web y domina los prompts de IA. Nuestras lecciones interactivas cubren todas las habilidades que los desarrolladores modernos necesitan.
playground.js
Editor de Código
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Prueba #1
Prueba #2
Prueba #3
Entrada
"Alex"
Salida
"Hello, Coddy! Alex"
Construye tu Racha
¡Mantén la constancia y observa cómo crece tu progreso! Sigue tu hábito diario de programación, protege tu racha con días de congelación y gana recompensas por aparecer cada día.
12 días de racha
¡Vuelve mañana para mantener tu racha!
January 2026
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
21
22
23
24
25
26
27
28
29
30
Doble o Nada
Día 5 de 7
Congelar Racha
2 left
Donde Quieras
¡Lleva tu viaje de programación contigo! Sin configuración, sin descargas, solo abre y empieza a programar. Disponible en iOS, Android y Web con calificaciones de 4.9 estrellas.
7
250
5
Variables
CONTINUAR
4.9
Calificación
No Estás Solo
Compite en tablas de clasificación globales, invita amigos para ganar recompensas y celebra los logros de los demás. ¡Programar es mejor con amigos!
Liga ChallengerLos 7 mejores avanzan
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Zona de promociónAprende de todas las formas
Lee, escucha, ponte a prueba, pregunta a la IA o consulta cualquier cosa que ya hayas estudiado. Cada lección se adapta a ti.
Introducción a variables
Audio
Una variable es un contenedor con nombre que guarda un valor al que puedes hacer referencia más tarde.
En Python, creas una escribiendo el nombre, un signo igual y el valor que quieres guardar.
El valor puede cambiar con el tiempo: reasignar el nombre simplemente lo apunta a un nuevo valor.
1xSarah
Certifícate
Gana certificados por cada curso que completes. Agrégalos a tu perfil de LinkedIn y currículum para mostrar tu experiencia en programación a los empleadores.
Certificado de FinalizaciónEsto certifica queJuan Pérezha completado exitosamenteFundamentos de Python
Fundamentos de Python
Fechaene 2026
Agregar a LinkedInPor qué aprender desarrollo front end en Coddy
- Ves la página que construyes. Cada lección de HTML, CSS y JavaScript se renderiza en vivo en el navegador, junto a tu código, así que un selector mal escrito o un flexbox roto se ven en el mismo segundo en que los escribes, no en una captura de pantalla al final.
- El orden correcto, y sin saltarse JavaScript. La mayoría de los cursos de front end pasan a toda prisa del HTML a un framework; esta ruta dedica tres secciones completas a JavaScript antes de React, porque un framework solo se lee bien cuando se entiende el lenguaje que hay debajo.
- Pistas con IA que leen tu marcado y tu código. Cuando una maquetación se rompe o un componente no se renderiza, Bugsy mira lo que escribiste y te empuja hacia la solución sin darte la respuesta.
- Proyectos que un reclutador puede abrir. El último paso son ocho construcciones reales - clones de páginas que ya conoces -, cada una una pieza de portfolio que puedes compartir, más un certificado gratuito por cada curso de los siete primeros pasos.
Preguntas frecuentes sobre cómo ser desarrollador front end
¿Cómo puedo ser desarrollador front end?
Aprende HTML, CSS y JavaScript lo bastante bien como para construir una página desde un archivo en blanco, añade TypeScript y un framework (React es la apuesta segura), aprende Git y luego construye tres o cuatro proyectos reales sin seguir un tutorial y publícalos en internet. Eso es exactamente esta ruta, en ese orden. Los proyectos importan más que los certificados: un portfolio de front end es lo único que un responsable de contratación puede juzgar en treinta segundos.
¿Debo aprender primero HTML, CSS o JavaScript?
Primero HTML, después CSS y después JavaScript, y dedícale a JavaScript el mayor tiempo. Con HTML bastan un par de semanas y con CSS un mes para sentirte cómodo; JavaScript es un lenguaje de programación completo y es donde la mayoría de los desarrolladores front end autodidactas recortan por lo sano. Esta ruta le dedica tres secciones, más una sección sobre el DOM, antes de que aparezca ningún framework.
¿Necesito TypeScript para ser desarrollador front end?
Para trabajar, casi siempre: la gran mayoría de las bases de código profesionales de React y Next.js están escritas en TypeScript, y una oferta que dice 'JavaScript' en la práctica suele significar TypeScript. Es un paso corto cuando JavaScript ya está sólido, y por eso aquí va justo antes de React y no al final.
React, Vue o Angular: ¿qué framework debo aprender?
React, salvo que un puesto concreto que quieras diga otra cosa. Tiene muchísimas más ofertas de empleo, el ecosistema más grande, y Next.js encima de él es con lo que se construyen hoy la mayoría de los sitios nuevos en producción. Las ideas - componentes, estado, props, renderizado - se trasladan después a Vue y Angular en una o dos semanas. Esta ruta enseña React y Next.js.
¿Cuánto se tarda en aprender desarrollo front end?
Entre seis y nueve meses a una hora al día para llegar a un nivel junior con portfolio. En esta ruta, HTML y CSS suman de seis a ocho semanas, JavaScript de dos a tres meses, TypeScript dos semanas, React y Next.js seis semanas, y el paso de proyectos dura lo que sigas construyendo. La cifra que importa son los proyectos terminados, no las lecciones terminadas.
¿Esta ruta cubre testing, accesibilidad o gestión de estado?
No como cursos propios, y preferimos decirlo antes que rellenar la página. El marcado semántico, la base de las páginas accesibles, forma parte del paso de HTML, y se cubre la gestión de estado propia de React; un curso de testing, un trabajo más profundo de accesibilidad y una librería de estado están en la hoja de ruta del temario y se sumarán a esta ruta como nuevos pasos cuando se publiquen.
¿Puedo conseguir trabajo de front end solo con cursos gratuitos?
Sí, si esos cursos producen un portfolio, que es la razón por la que esta ruta termina con ocho proyectos. Lo que las empresas filtran es una página construida por ti que puedan abrir, un historial de Git que demuestre que la construiste tú, y una entrevista en la que sepas explicar una maquetación y un componente. Las tres cosas salen de esta ruta; ninguna exige un bootcamp de pago.
