---
title: Desarrollo web Front-end
slug: Learn/Front-end_web_developer
tags:
  - Aprender
  - CSS
  - De lado del cliente
  - Estándar Web
  - Estándares web
  - Front-end
  - HTML
  - Herramientas
  - JavaScript
  - Novato
  - Principiante
translation_of: Learn/Front-end_web_developer
original_slug: Learn/Desarrollo_web_Front-end
---
<p>{{learnsidebar}}</p>

<p>¡Bienvenido a la ruta de aprendizaje para desarrolladores de la interfaz de usuario web!</p>

<p>Aquí se te proporciona un curso estructurado que te enseñará todo lo que necesitas saber para convertirte en un desarrollador de la interfaz de usuario web. Simplemente trabaja en cada sección, aprendiendo nuevas habilidades (o mejorando las existentes) sobre la marcha. Cada sección incluye desafíos y ejercicios para evaluar tu comprensión antes de seguir adelante.</p>

<h2 id="Temas_tratados">Temas tratados</h2>

<p>Los temas tratados son:</p>

<ul>
 <li>Configuración básica y conocimientos sobre cómo aprender</li>
 <li>Estándares web y mejores prácticas (como accesibilidad y compatibilidad entre navegadores)</li>
 <li>HTML, el lenguaje que da estructura y significado al contenido web</li>
 <li>CSS, el lenguaje utilizado para aplicar estilo a las páginas web</li>
 <li>JavaScript, el lenguaje programado por medio de <em>scripts</em> utilizado para crear funciones dinámicas en la web.</li>
 <li>Herramientas que se utilizan para facilitar el desarrollo web moderno de lado del cliente.</li>
</ul>

<p>Puedes trabajar en las secciones en orden, pero cada una también es autónoma. Por ejemplo, si ya conoces HTML, puedes pasar a la sección CSS.</p>

<h2 id="Prerrequisitos">Prerrequisitos</h2>

<p>No necesitas conocimientos previos para empezar este curso. Todo lo que necesitas es una computadora que pueda ejecutar navegadores web modernos, una conexión a Internet y la voluntad de aprender.</p>

<p>Si no estás seguro de si el desarrollo de la interfaz de usuario web es para ti, y/o deseas una breve introducción antes de comenzar un curso más largo y completo, consulta una {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Introducción a la Web")}}.</p>

<h2 id="Cómo_obtener_ayuda">Cómo obtener ayuda</h2>

<p>Hemos tratado de hacer que el desarrollo de la interfaz de usuario web sea lo más cómodo posible, pero probablemente todavía quedes encallado porque no entiendes algo o porque algún código simplemente no funciona.</p>

<p>No entres en pánico. Todos hemos encallado, sin importar que seamos desarrolladores web principiantes o profesionales. El artículo {{web.link("/es/docs/Learn/Learning_and_getting_help", "Aprender y obtener ayuda")}} te brinda una serie de consejos para buscar información y ayudarte a ti mismo. Si aún estás atascado, no dudes en publicar una pregunta en nuestro <a href="https://discourse.mozilla.org/c/mdn/learn/">Foro de discusión</a>.</p>

<p>Empecemos. ¡Diviértete!</p>

<h2 id="El_camino_del_aprendizaje">El camino del aprendizaje</h2>

<h3 id="Primeros_pasos">Primeros pasos</h3>

<p>Tiempo para completar: 1.5 a 2 horas</p>

<h4 id="Prerrequisitos_2">Prerrequisitos</h4>

<p>Nada excepto conocimientos básicos de informática.</p>

<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante">¿Cómo sabré que estoy listo para seguir adelante?</h4>

<p>No hay evaluaciones en esta parte del curso. Pero asegúrate de no saltarla. Es importante prepararte para trabajar en la resolución de los ejercicios más adelante en el curso.</p>

<h4 id="Guías">Guías</h4>

<ul>
 <li>{{web.link("/es/docs/Learn/Getting_started_with_the_web/Installing_basic_software", "Instalación de software básico")}}: configuración básica de las herramientas (lectura de 15 minutos)</li>
 <li>{{web.link("/es/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards", "Información básica sobre la web y los estándares web")}} (lectura de 45 minutos)</li>
 <li>{{web.link("/es/docs/Learn/Learning_and_getting_help", "Aprender y obtener ayuda")}} (lectura de 45 minutos)</li>
</ul>

<h3 id="Semántica_y_estructura_con_HTML">Semántica y estructura con HTML</h3>

<p>Tiempo para completar: 35 a 50 horas</p>

<h4 id="Prerrequisitos_3">Prerrequisitos</h4>

<p>Nada, excepto: conocimientos básicos de informática y un entorno de desarrollo web básico.</p>

<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_2">¿Cómo sabré que estoy listo para seguir adelante?</h4>

<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>

<h4 id="Módulos">Módulos</h4>

<ul>
 <li>{{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} (15 a 20 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/HTML/Multimedia_and_embedding", "Multimedia e inserción")}} (15 a 20 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/HTML/Tables", "tablas HTML")}} (5 a 10 horas de lectura/ejercicios)</li>
</ul>

<h3 id="Estilo_y_diseño_con_CSS">Estilo y diseño con CSS</h3>

<p>Tiempo para completar: 90 a 120 horas</p>

<h4 id="Prerrequisitos_4">Prerrequisitos</h4>

<p>Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender CSS. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.</p>

<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_3">¿Cómo sabré que estoy listo para seguir adelante?</h4>

<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>

<h4 id="Módulos_2">Módulos</h4>

<ul>
 <li>{{web.link("/es/docs/Learn/CSS/First_steps", "Primeros pasos de CSS" )}} (10 a 15 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/CSS/Building_blocks", "Bloques de construcción de CSS")}} (35 a 45 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/CSS/Styling_text", "Diseño de texto")}} (15 a 20 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/CSS/CSS_layout", "Diseño CSS")}} (30 a 40 horas de lectura/ejercicios)</li>
</ul>

<h4 id="Recursos_adicionales">Recursos adicionales</h4>

<ul>
 <li>{{web.link("/es/docs/Web/CSS/Layout_cookbook", "Libro de recetas de diseño CSS")}}</li>
</ul>

<h3 id="Interactividad_con_JavaScript">Interactividad con JavaScript</h3>

<p>Tiempo para completar: 135 a 185 horas</p>

<h4 id="Prerrequisitos_5">Prerrequisitos</h4>

<p>Es recomendable que tengas conocimientos básicos de HTML antes de comenzar a aprender JavaScript. Primero deberías estudiar {{web.link("/es/docs/Learn/HTML/Introduction_to_HTML", "Introducción a HTML")}} por lo menos.</p>

<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_4">¿Cómo sabré que estoy listo para seguir adelante?</h4>

<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>

<h4 id="Módulos_3">Módulos</h4>

<ul>
 <li>{{web.link("/es/docs/Learn/JavaScript/First_steps", "Primeros pasos en JavaScript")}} (30 a 40 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Building_blocks", "Bloques de construcción de JavaScript")}} (25 a 35 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Objects", "Introducción a los objetos JavaScript")}} (25 a 35 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs", "API web del lado del cliente")}} (30 a 40 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Asynchronous", "JavaScript asincrónico")}} (25 a 35 horas de lectura/ejercicios)</li>
</ul>

<h3 id="Formularios_web_—_Trabajar_con_datos_del_usuario">Formularios web — Trabajar con datos del usuario</h3>

<p>Tiempo para completar: 40 a 50 horas</p>

<h4 id="Prerrequisitos_6">Prerrequisitos</h4>

<p>Los formularios requieren conocimientos de HTML, CSS y JavaScript. Dada la complejidad de trabajar con formularios, es un tema dedicado.</p>

<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_5">¿Cómo sabré que estoy listo para seguir adelante?</h4>

<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>

<h4 id="Módulos_4">Módulos</h4>

<ul>
 <li>{{web.link("/es/docs/Learn/Forms", "Formularios web")}} (40 a 50 horas)</li>
</ul>

<h3 id="Hacer_que_la_web_funcione_para_todos">Hacer que la web funcione para todos</h3>

<p>Tiempo para completar: 60 a 75 horas</p>

<h4 id="Prerrequisitos_7">Prerrequisitos</h4>

<p>Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección. Muchas de las técnicas y mejores prácticas se refieren a múltiples tecnologías.</p>

<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_6">¿Cómo sabré que estoy listo para seguir adelante?</h4>

<p>Las evaluaciones de cada módulo están diseñadas para comprobar tu conocimiento del tema. Completar las evaluaciones confirma que estás listo para pasar al siguiente módulo.</p>

<h4 id="Módulos_5">Módulos</h4>

<ul>
 <li>{{web.link("/es/docs/Learn/Tools_and_testing/Cross_browser_testing", "Pruebas en varios navegadores")}} (25 a 30 horas de lectura/ejercicios)</li>
 <li>{{web.link("/es/docs/Learn/Accessibility", "Accesibilidad")}} (20 a 25 horas de lectura/ejercicios)</li>
</ul>

<h3 id="Herramientas_modernas">Herramientas modernas</h3>

<p>Tiempo para completar: 55 a 90 horas</p>

<h4 id="Prerrequisitos_8">Prerrequisitos</h4>

<p>Es una buena idea conocer HTML, CSS y JavaScript antes de trabajar en esta sección, ya que las herramientas analizadas funcionan junto con muchas de estas tecnologías.</p>

<h4 id="¿Cómo_sabré_que_estoy_listo_para_seguir_adelante_7">¿Cómo sabré que estoy listo para seguir adelante?</h4>

<p>No hay artículos de evaluación específicos en este conjunto de módulos. Los tutoriales de casos de estudio al final del segundo y tercer módulo te preparan para comprender los conceptos básicos de las herramientas modernas.</p>

<h4 id="Módulos_6">Módulos</h4>

<ul>
 <li>{{web.link("/es/docs/Learn/Tools_and_testing/GitHub", "Git y GitHub")}} (lectura de 5 horas)</li>
 <li>{{web.link("/es/docs/Learn/Tools_and_testing/Understanding_client-side_tools", "Comprender las herramientas de desarrollo web del lado del cliente")}} (lectura de 20 a 25 horas)</li>
 <li>
  <p>{{web.link("/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks", "Comprender los marcos de JavaScript de lado del cliente")}} (30 a 60 horas de lectura/ejercicios)</p>
 </li>
</ul>