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.
663,032+ codders inscritos en estos cursos
804 lecciones681 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 lecciones
- Clon de página de Instagram | Proyecto Front-EndSolo html16 lecciones
- Clon de la página de inicio de sesión de Netflix | Proyecto front-endSolo html19 lecciones1 retos
- Slider | Proyecto de front-endSolo html23 lecciones1 retos
Lo que obtienes
Todo lo que usarás para aprender a programar
Learn by Doing
Write real code, query databases, build websites, and master AI prompts. Our interactive lessons cover every skill modern developers need.
playground.js
Code Editor
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3 return greeting + " " + name
4}
5
Test #1
Test #2
Test #3
Input
"Alex"
Output
"Hello, Coddy! Alex"
Build Your Coding Streak
Stay consistent and watch your progress grow! Track your daily coding habit, protect your streak with freeze days, and earn rewards for showing up every day.
12 days streak
Return tomorrow to keep your streak!
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
Double or Nothing
Day 5 of 7
Streak Freeze
2 left
Code Anywhere, Anytime
Take your coding journey on the go! No setup, no downloads - just open and start coding. Available on iOS, Android and Web with 4.9 star ratings.
7
250
5
Variables
CONTINUE
4.9
Rating
You're Not Alone in This
Compete on global leaderboards, invite friends to earn rewards, and celebrate each other's wins. Coding is better with friends!
Challenger LeagueTop 7 advance
1
Alex7+ Days
2840
2
Jordan7+ Days
2650
3
Sam7+ Days
2420
4
Casey
2180
5
Morgan7+ Days
1950
Promotion zoneEvery way to learn
Read, listen, test yourself, ask the AI, or look up anything you've already covered. Every lesson meets you where you are.
Intro to Variables
Audio
A variable is a named container that stores a value you can reference later in your program.
In Python, you create one by writing the name, an equals sign, then the value you want to store.
The value can change over time - reassigning the name simply points it to a new value.
1xSarah
Prove Your Skills
Earn certificates for every course you complete. Add them to your LinkedIn profile and resume to showcase your coding expertise to employers.
Certificate of CompletionThis certifies thatJohn Doehas successfully completedPython Fundamentals
Python Fundamentals
DateJan 2026
Add to 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.
