---
title: Aprende sobre desarrollo web
slug: Learn
tags:
  - Ayuda
  - CSS
  - HTML
  - Inicio
  - Landing
  - Principiante
  - TopicStub
  - Web
translation_of: Learn
---
<p>{{LearnSidebar}}</p>

<p class="summary">¡Hola! Bienvenido al área de aprendizaje de MDN. Si quieres aprender a crear tus propias páginas web, sitios o aplicaciones, has venido al lugar indicado.</p>

<p>El objetivo de esta área de MDN no es llevarte de «principiante» a «experto», sino de «principiante» a «cómodo». A partir de ese punto, deberías poder comenzar a abrirte camino, aprendiendo del {{web.link("/es/", "resto de MDN")}} y de otras fuentes de niveles intermedio hasta avanzado, las cuales asumen que tienes un vasto conocimiento previamente adquirido.</p>

<p>Si eres del todo un principiante, el desarrollo web puede ser un reto —pero no te preocupes, te llevaremos de la mano y te proveeremos de suficientes detalles para hacerte sentir cómodo y que aprendas los temas apropiadamente—. Para que te sientas como en casa, ya seas un estudiante (por tu cuenta o como parte de un grupo), un maestro buscando material para sus clases, un aficionado o alguien que simplemente desea entender mejor cómo funcionan las tecnologías web.</p>

<h2 id="Novedades">Novedades</h2>

<p>El contenido del área de aprendizaje se amplía con regularidad. Se han comenzado a guardar {{web.link("/es/docs/Learn/Release_notes", "notas de publicación del área de aprendizaje")}} para mostrar lo que ha cambiado. ¡Revísalas frecuentemente para mantenerte actualizado!</p>

<p>Si tienes preguntas sobre temas que te gustaría que se abordaran o te parece que faltan, envía un mensaje en el <a href="https://discourse.mozilla.org/c/mdn">Foro de discusión</a>, de la comunidad Mozilla (sitio en inglés).</p>

<div class="callout">
<h3 id="¿Quieres_convertirte_en_un_desarrollador_de_interfaz_de_usuario_web">¿Quieres convertirte en un desarrollador de interfaz de usuario web?</h3>

<p>Hemos elaborado un curso que incluye toda la información esencial que necesitas para alcanzar tu objetivo.</p>

<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Empieza aquí</a></p>
</div>

<h2 id="Dónde_empezar">Dónde empezar</h2>

<p>Para continuar, piensa cuál de las siguientes afirmaciones te describe mejor y ve a la página de inicio enlazada:</p>

<ul class="card-grid">
 <li><span>Soy un principiante</span>: ¡Bienvenido! Si eres un completo novel en desarrollo web, definitivamente el mejor lugar para empezar es el módulo {{web.link("/es/docs/Learn/Getting_started_with_the_web", "Primeros pasos en la web")}}. Una introducción práctica que te dará las bases necesarias para iniciar y avanzar en el desarrollo web.</li>
 <li><span>Conozco la web</span>: ¡Muy bien! Si ya tienes un poco de conocimiento en ese caso te sugerimos profundizar en el corazón de las tecnologías web. El siguiente paso es conocer en detalle {{Glossary("HTML")}} y {{Glossary("CSS")}}: empieza con el módulo de introducción a {{web.link("/es/docs/Learn/HTML", "Introducción a HTML")}} y sigue con el módulo de {{web.link("/es/docs/Learn/CSS","primeros pasos en CSS")}}.</li>
 <li><span>Me interesa javascript</span>: Si ya te sientes cómodo con el HTML y el CSS, o principalmente estás interesado en la codificación, querrás pasar al desarrollo de {{Glossary("JavaScript")}} o al desarrollo de lado del servidor. Comienza con los módulos de {{web.link("/es/docs/Learn/JavaScript/First_steps", "primeros pasos con JavaScript")}} y {{web.link("/es/docs/Learn/Server-side/Primeros_pasos", "primeros pasos en la programación de lado del servidor")}}.</li>
 <li><span>Soy experto en la web</span>: ¡Excelente! Después de dominar los fundamentos del HTML, CSS y JavaScript puedes estar interesado en explorar las {{web.link("/es/docs/Web/Guide", "Guías avanzadas")}} y {{web.link("/es/docs/Web/Tutoriales", "Tutoriales")}}. Otra excelente idea es aprender sobre las {{web.link("/es/docs/Learn/Tools_and_testing/Understanding_client-side_tools", "herramientas de desarrollo web de lado del cliente")}} y luego considerar ahondar en los {{web.link("/es/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks", "marcos de desarrollo («frameworks») de JavaScript de lado del cliente")}}, y la {{web.link("/es/docs/Learn/Server-side", "Programación de sitios web de lado del servidor")}}. Finalmente deberías considerar {{web.link("/es/docs/Learn/como_Contribuir", "Contribuir al Área de Aprendizaje")}}.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: el {{web.link("/es/docs/Glossary", "glosario")}} proporciona definición de términos. Además, si tienes una pregunta específica sobre el desarrollo web, la sección de {{web.link("/es/docs/Learn/Common_questions", "preguntas frecuentes")}} te puede brindar información de gran utilidad.</p>
</div>

<p>{{LearnBox({"title":"Entrada aleatoria del glosario"})}}</p>

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

<p>La siguiente es una lista de todos los temas tratados en el área de aprendizaje de MDN.</p>

<dl>
 <dt>{{web.link("/es/docs/Learn/Getting_started_with_the_web", "Primeros pasos en la web")}}</dt>
 <dd>Proporciona una introducción práctica al desarrollo de la web para principiantes.</dd>
 <dt>{{web.link("/es/docs/Learn/HTML", "HTML")}}</dt>
 <dd>HTML es el lenguaje utilizado para estructurar las diferentes partes del contenido y definir su significado o propósito. Este tema enseña el HTML en detalle.</dd>
 <dt>{{web.link("/es/docs/Learn/CSS", "CSS")}}</dt>
 <dd>CSS es el lenguaje que se utiliza para estilizar y organizar el contenido web, así como para añadir comportamiento tal como la animación. Este tema proporciona una amplia cobertura de CSS.</dd>
 <dt>{{web.link("/es/docs/Learn/JavaScript", "JavaScript — Scripts dinámicos de lado del cliente")}}</dt>
 <dd>JavaScript es el lenguaje de scripts usado para añadir funcionalidad dinámica a las páginas web. Este tema enseña todo lo esencial necesario para sentirte cómodo con la escritura y comprensión de JavaScript.</dd>
 <dt>{{web.link("/es/docs/Learn/HTML/Forms", "Formularios HTML")}}</dt>
 <dd>Los formularios HTML son un potente instrumento para interactuar con los usuarios — frecuentemente se utilizan para reunir datos de los usuarios, o permitirte controlar la interfaz de usuario. En los artículos enumerados a continuación, se cubrirán todos los aspectos esenciales de la estructuración, estilizado e interacción con los formularios web.</dd>
 <dt>{{web.link("/es/docs/Learn/Accessibility", "Accesibilidad")}}</dt>
 <dd>La accesibilidad es la práctica de hacer que el contenido web esté disponible para tantas personas como sea posible, independientemente de la discapacidad, el dispositivo, la ubicación u otros factores diferenciadores. Este tema te da todo lo que necesitas saber.</dd>
 <dt>{{web.link("/es/docs/Learn/Performance", "Rendimiento web — hace que los sitios web sean rápidos y responsivos")}}</dt>
 <dd>El rendimiento web es el arte de asegurarte de que las aplicaciones web se descarguen rápidamente y respondan a la interacción del usuario, independientemente del ancho de banda, el tamaño de la pantalla, la red o las capacidades del dispositivo del usuario.</dd>
 <dt>{{web.link("/es/docs/Learn/Herramientas_y_pruebas", "Herramientas y pruebas")}}</dt>
 <dd>Este tema abarca las herramientas que los desarrolladores utilizan para facilitar su trabajo, como las herramientas de prueba entre navegadores, analizadores de errores de código fuente, formateadores, herramientas de transformación, sistemas de control de versiones, herramientas de despliegue y marcos de desarrollo JavaScript de lado del cliente.</dd>
 <dt>{{web.link("/es/docs/Learn/Server-side", "Programación del lado servidor")}}</dt>
 <dd>Aunque te concentres en el desarrollo web de lado del cliente, sigue siendo útil saber cómo funcionan los servidores y las características del código del lado del servidor. Este tema proporciona una introducción general a cómo funciona el lado del servidor y tutoriales detallados que muestran cómo construir una aplicación de lado del servidor utilizando dos marcos de desarrollo populares: Django (Python) y Express (Node.js).</dd>
</dl>

<h2 id="Obtener_el_código_de_los_ejemplos">Obtener el código de los ejemplos</h2>

<p>Todo el código de los ejemplos propuestos en el área de aprendizaje se encuentra disponible en <a href="https://github.com/mdn/learning-area//">GitHub</a>. Si quieres, los puedes copiar para tenerlos en tu ordenador, la manera más fácil es <a href="https://github.com/mdn/learning-area/archive/master.zip">descargar un ZIP de la última rama del código maestro</a>.</p>

<p>Si prefieres copiar el código de una forma más flexible que te permita actualizaciones automáticas, puedes seguir estas instrucciones más complejas:</p>

<ol>
 <li><a href="https://git-scm.com/downloads">Instala Git</a> en tu máquina. Este es el sistema de control de versiones de software con el que trabaja GitHub principalmente.</li>
 <li>Abre tu <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">consola de comandos</a> (Windows) o terminal (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">MacOS X</a>)</li>
 <li>Para copiar el repositorio del área de aprendizaje a un directorio llamado <code>learning-area</code> en la ubicación actual, en la ventana de tu Terminal o en la línea de comandos, debes usar el siguiente comando.
  <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre>
 </li>
 <li>Ahora puedes entrar en el directorio y encontrar todos los archivos que descargaste (posiblemente con el explorador de archivos o el <a href="https://es.wikipedia.org/wiki/Chdir">comando <code>cd</code></a>).</li>
</ol>

<p>Puedes actualizar el repositorio <code>learning-area</code> con los últimos cambios que se hayan hecho a la versión principal en GitHub con los siguientes pasos:</p>

<ol>
 <li>En tu intérprete de comandos/terminal, ve dentro del directorio <code>learning-area</code> usando <code>cd</code>. Por ejemplo, si estuvieras en el directorio padre:

  <pre class="brush: bash notranslate">cd learning-area</pre>
 </li>
 <li>Puedes realizar actualizaciones al repositorio usando el siguiente comando:
  <pre class="brush: bash notranslate">git pull</pre>
 </li>
</ol>

<h2 id="Contáctanos">Contáctanos</h2>

<p>Si tienes alguna pregunta o deseas saber hacia dónde ir, Mozilla es una comunidad mundial de entusiastas de la web, incluyendo mentores y profesores, encantados de ayudarte. Ponte en contacto con ellos mediante WebMaker: Conoce y dialoga con los mentores y profesores en el <a href="https://discourse.mozilla.org/c/community-portal/mozilla-hispano/">Foro de Discusión en Español</a>. Encuentra <a href="https://foro.mozilla-hispano.org/c/difusion-eventos">Eventos</a> y aprende acerca de la Web con profesionales. Nos gustaría saber cualquier cosa de ti, si bien crees que algo está mal o falta en el sitio, o quieres solicitar nuevos temas de aprendizaje, solicitar ayuda con elementos que no comprendes o cualquier otra pregunta o inquietud que tengas.</p>

<p>Si estás interesado en ayudar a desarrollar/mejorar el contenido, consulta {{web.link("/es/docs/Learn/Como_Contribuir", "cómo puedes ayudar")}} y, ¡pónte en contacto!; estaremos más que felices de hablar contigo, bien seas un alumno, un maestro, un desarrollador web experimentado o alguien más, interesado en ayudar a mejorar la experiencia de aprendizaje.</p>

<h2 id="Ve_también">Ve también</h2>

<dl>
 <dt><a href="https://www.mozilla.org/es/newsletter/developer/">Boletín informativo para desarrolladores de Mozilla</a></dt>
 <dd>Nuestro boletín para desarrolladores web, es un excelente recurso para todos los niveles de experiencia.</dd>
 <dt><a href="https://learnjavascript.online/">Aprende JavaScript</a></dt>
 <dd>Un excelente recurso para los aspirantes a desarrolladores web — aprende JavaScript en un entorno interactivo, con lecciones breves y pruebas interactivas, guiado por una evaluación automatizada. Las primeras 40 lecciones son gratuitas y el curso completo está disponible por un pequeño pago único.</dd>
 <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web desmitificada</a></dt>
 <dd>Una gran serie de videos que explican los fundamentos de la web, dirigida a principiantes absolutos en el desarrollo web. Creada por <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd>
 <dt><a href="https://www.codecademy.com/" rel="noopener">Codecademy</a></dt>
 <dd>Un gran sitio interactivo para aprender lenguajes de programación desde cero.</dd>
 <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt>
 <dd>Teoría básica de la codificación con un proceso de aprendizaje ludificado. Enfocado principalmente a principiantes.</dd>
 <dt><a href="https://code.org/">Code.org</a></dt>
 <dd>Teoría y práctica de codificación básica, principalmente dirigida a niños/principiantes.</dd>
 <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt>
 <dd>Cursos gratuitos y abiertos para aprender habilidades tecnológicas, con tutorías y aprendizaje basado en proyectos.</dd>
 <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt>
 <dd>Sitio interactivo con tutoriales y proyectos para aprender desarrollo web.</dd>
 <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Mapa de alfabetización web</a></dt>
 <dd>Un marco de desarrollo para la alfabetización web a nivel de entrada y las habilidades del siglo XXI, que también brindan acceso a actividades de enseñanza clasificadas por categoría.</dd>
 <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt>
 <dd>Miles de desafíos interactivos de JavaScript.</dd>
</dl>