Frontend Developer
Build websites and web apps people use every day
¿No sabes si es para ti? Encuentra tu vocación →
0 de 19 misiones hechas
¿Esta carrera es para ti?
Dos minutos antes de dedicarle meses
Marca lo que suena a ti
Marca las que son ciertas para ti.
Habilidades que te llevarás
Trabajos a los que lleva
- Junior Frontend Developer
- UI Developer
- Web Developer
- Frontend Engineer
Antes de empezar
- ✓ Basic computer literacy
- ✓ No prior coding experience needed
19 misiones hasta Frontend Developer
4 mundos, 19 misiones. Toca cualquier círculo para abrirlo; el que brilla es el siguiente.
Start with the three languages every website uses.
Add interactivity to your pages with JavaScript.
Pick up React, the most used frontend library.
Put together a portfolio and start applying.
Más sobre esta carrera
Sobre el trabajo, el salario donde vives, preguntas frecuentes y a dónde puede llevarte esta carrera después.
Sobre el trabajo
Qué harías
- Diseñar, crear y mantener sitios y aplicaciones web
- Elegir los lenguajes de programación, herramientas de diseño y aplicaciones de cada proyecto
- Comprobar que el código es válido, está bien estructurado, cumple los estándares y funciona en todos los navegadores
- Probar el sitio de forma planificada y después de cada cambio
- Hacer y gestionar las actualizaciones del sitio publicado
Dónde trabajarías
- Empresas de diseño de sistemas y servicios informáticos
- Por cuenta propia (cerca del 18% de los desarrolladores web en EE. UU.)
- Editoriales, medios y otras empresas de información
- Colegios, institutos y universidades
- Consultoras de gestión y técnicas
Todos los pasos completos
El texto completo de cada paso, para leer o imprimir. Avanza por ellos en el viaje de arriba.
Web Foundations 4 pasos
Learn HTML structure, semantic elements, tables, forms, and accessibility basics.
Learn HTML structure, semantic elements, tables, forms, and accessibility basics.
Abrir este paso ↑Learn CSS selectors, the box model, positioning, flexbox, and CSS grid.
Learn CSS selectors, the box model, positioning, flexbox, and CSS grid.
Abrir este paso ↑Understand responsive design principles, mobile-first layouts, and media queries.
Understand responsive design principles, mobile-first layouts, and media queries.
Abrir este paso ↑Build 2–3 static web pages from scratch (e.g., a landing page, personal portfolio, or blog layout).
Build 2–3 static web pages from scratch (e.g., a landing page, personal portfolio, or blog layout).
Abrir este paso ↑
JavaScript Fundamentals 5 pasos
Learn core concepts: variables, data types, functions, loops, and control flow.
Learn core concepts: variables, data types, functions, loops, and control flow.
Abrir este paso ↑Master the DOM (Document Object Model) and how to manipulate HTML/CSS using JS.
Master the DOM (Document Object Model) and how to manipulate HTML/CSS using JS.
Abrir este paso ↑Understand modern ES6+ features like arrow functions, destructuring, template literals, and modules.
Understand modern ES6+ features like arrow functions, destructuring, template literals, and modules.
Abrir este paso ↑Grasp asynchronous JS operations including Promises, async/await, and Fetch API.
Grasp asynchronous JS operations including Promises, async/await, and Fetch API.
Abrir este paso ↑Build interactive projects: to-do list, calculator, weather app fetching data from an API.
Build interactive projects: to-do list, calculator, weather app fetching data from an API.
Abrir este paso ↑
React & Modern Frameworks 5 pasos
Understand React's core philosophy, JSX, components, and one-way data flow via props.
Understand React's core philosophy, JSX, components, and one-way data flow via props.
Abrir este paso ↑Master React state management using useState and side effects using useEffect.
Master React state management using useState and side effects using useEffect.
Abrir este paso ↑Learn advanced hooks (useRef, useMemo, useCallback) and context API.
Learn advanced hooks (useRef, useMemo, useCallback) and context API.
Abrir este paso ↑Implement client-side routing using React Router.
Implement client-side routing using React Router.
Abrir este paso ↑Build a complex real-world app with API integration, robust state, and dynamic routing.
Build a complex real-world app with API integration, robust state, and dynamic routing.
Abrir este paso ↑
Professional Skills & Job Hunt 5 pasos
Set up Git & GitHub — learn version control basics, branching, and pull requests.
Set up Git & GitHub — learn version control basics, branching, and pull requests.
Abrir este paso ↑Curate a portfolio of 3 standout projects showcasing clean, documented code and unique features.
Curate a portfolio of 3 standout projects showcasing clean, documented code and unique features.
Abrir este paso ↑Learn modern web deployment workflows (using platforms like Vercel or Netlify).
Learn modern web deployment workflows (using platforms like Vercel or Netlify).
Abrir este paso ↑Optimize your resume and LinkedIn profile specifically for entry-level frontend roles.
Optimize your resume and LinkedIn profile specifically for entry-level frontend roles.
Abrir este paso ↑Apply consistently to 50+ junior frontend positions while preparing for technical and behavioral interviews.
Apply consistently to 50+ junior frontend positions while preparing for technical and behavioral interviews.
Abrir este paso ↑
Preguntas frecuentes sobre Frontend Developer
Respuestas claras sobre salarios, duración y metodología.
¿Cuánto se tarda en ser Frontend Developer?
Esta ruta estima 4–8 months. Tiene 4 fases y 19 pasos, desde «Web Foundations» hasta «Professional Skills & Job Hunt».
¿Cómo llego a ser Frontend Developer?
Sigue las 4 fases en orden, empezando por la fase 1, «Web Foundations». Tu primera tarea: Learn HTML structure, semantic elements, tables, forms, and accessibility basics.
¿Cuánto gana un Frontend Developer?
El sueldo depende del país. El recuadro de salario de esta página muestra la estimación de DraftMyCareer, en moneda local, para el país elegido en el menú.
¿Qué necesito antes de empezar?
Esta ruta indica: Basic computer literacy; No prior coding experience needed.
¿Qué habilidades necesita un Frontend Developer?
Esta ruta cubre: HTML, CSS, JavaScript, React, Responsive Design, Version Control.
Cambiar de carrera: caminos desde y hacia este rol
Ver todos los cambios →Próximos pasos y cambios laterales desde este rol
- AI & ML Engineer
AI engineers earn substantially higher compensation and build generative apps driving next-generation tech products.
⏱ 6–9 months🧭 ChallengingLo que aprenderíasPython & PyTorch · Prompt Engineering & LLM APIs (LangChain/LlamaIndex) · Vector DBs (Pinecone, Chroma)
Ver plan paso a paso
- Month 1–2: Python & Data Foundations Master Python syntax, NumPy, pandas, and data manipulation workflows.
- Month 3–4: LLM App Architecture Build full-stack AI web apps integrating OpenAI/Anthropic APIs with RAG pipelines.
- Month 5–6: Machine Learning Models Train classification and regression models in Scikit-Learn and PyTorch.
- Month 7+: Production Deployment Deploy LLM agents with latency caching, streaming endpoints, and vector search.
- Backend Developer
Unlock full-stack versatility, command higher salaries, and take complete ownership of core business logic.
⏱ 3–5 months🧭 Beginner-FriendlyLo que aprenderíasNode.js / Express & NestJS · PostgreSQL & SQL Schema Design · Authentication & JWT/OAuth
Ver plan paso a paso
- Month 1: Server Runtime & Node.js Deep dive into event loop, Node.js streams, Express middleware, and REST architecture.
- Month 2: Relational Databases & SQL Learn schema normalization, PostgreSQL indexing, transactions, and Prisma ORM.
- Month 3: Auth, Security & Testing Implement secure sessions, JWTs, rate-limiting, and comprehensive Jest integration tests.
- Month 4–5: Microservices & Cloud Deploy containerized Docker backend services on AWS/GCP with CI/CD pipelines.