index.md

---
title: Aprende desarrollo web
slug: Learn_web_development
original_slug: Learn
l10n:
  sourceCommit: f22e2f56c6cc82b43b6a14fa213755512e23cd8f
---

{{LearnSidebar}}

Bienvenido al área de aprendizaje de MDN. Este conjunto de artículos tiene como objetivo guiar a los principiantes al desarrollo web con todo lo que necesitan para comenzar a codificar sitios web.

El objetivo de esta área de MDN no es llevarte de "principiante" a "experto", sino llevarte de "principiante" a "cómodo". A partir de ahí, deberías poder empezar a abrirte camino, aprendiendo de [el resto de MDN](/es/), y otros recursos de intermedios a avanzados que suponen mucho conocimiento previo.

Si eres un principiante, el desarrollo web puede ser un desafío: iremos de la mano y te brindaremos suficientes detalles para que te sientas cómodo y aprendas los temas correctamente. Debes sentirte como en casa, ya sea que seas un estudiante que está aprendiendo desarrollo web (por su cuenta o como parte de una clase), un maestro que busca materiales para la clase, un aficionado o alguien que solo quiere saber más sobre cómo funcionan las tecnologías web.

> [!CALLOUT]
>
> #### ¿Quieres convertirte en un desarrollador web front-end?
>
> Hemos preparado un curso que incluye toda la información esencial que necesita para trabajar hacia su objetivo.
>
> [**Empezar**](/es/docs/orphaned/Learn/Front-end_web_developer)

## Donde empezar

- Principiante
  - : Si eres un principiante en el desarrollo web, te recomendamos que empieces trabajando con nuestro módulo [Cómo empezar con la web](/es/docs/Learn_web_development/Getting_started/Your_first_website), que proporciona una introducción práctica al desarrollo web.
- Mas allá de lo básico
  - : Si ya tienes un poco de conocimiento, el siguiente paso es aprender {{glossary("HTML")}} y {{glossary("CSS")}} en detalle: comience con nuestra [Introducción a HTML](/es/docs/conflicting/Learn_web_development/Core/Structuring_content) y pase a nuestro módulo [Primeros pasos con CSS](/es/docs/conflicting/Learn_web_development/Core/Styling_basics).
- Pasando al código
  - : Si ya te sientes cómodo con HTML y CSS, o si estás principalmente interesado en la codificación, querrá pasar a {{glossary("JavaScript")}} o al desarrollo del lado del servidor. Comience con nuestros módulos [Primeros pasos de JavaScript](/es/docs/conflicting/Learn_web_development/Core/Scripting) y [Primeros pasos del lado del servidor](/es/docs/Learn_web_development/Extensions/Server-side/First_steps).
- _Frameworks_ y herramientas
  - : Después de dominar los conceptos básicos de HTML, CSS y JavaScript estándar, debe aprender sobre [herramientas de desarrollo web del lado del cliente](/es/docs/Learn_web_development/Extensions/Client-side_tools), y luego considerar profundizar en [_frameworks_ de JavaScript del lado del cliente](/es/docs/Learn_web_development/Core/Frameworks_libraries), y [programación de sitios web del lado del servidor](/es/docs/Learn_web_development/Extensions/Server-side).

> [!NOTE]
> Nuestro [glosario](/es/docs/Glossary) proporciona definiciones terminológicas. Además, si tienes una pregunta específica sobre desarrollo web, nuestra sección [Preguntas comunes](/es/docs/Learn_web_development/Howto) puede tener algo para ayudarte.

## Temas cubiertos

La siguiente es una lista de todos los temas que cubrimos en el área de aprendizaje de MDN.

- [Comenzando con la web](/es/docs/Learn_web_development/Getting_started/Your_first_website)
  - : Proporciona una introducción práctica al desarrollo web para principiantes.
- [HTML: Estructura de la web](/es/docs/Learn_web_development/Core/Structuring_content)
  - : HTML es el lenguaje que usamos para estructurar las diferentes partes de nuestro contenido y definir cuál es su significado o propósito. Este tema enseña HTML en detalle.
- [CSS: Dar estilo a la web](/es/docs/conflicting/Learn_web_development/Core/Styling_basics_b957eec7deaf1ea2b20721d6838ea6e1)
  - : CSS es el lenguaje que usamos para controlar el estilo y el diseño de tu contenido web, así como para agregar comportamientos como la animación. Este tema proporciona una cobertura completa de CSS.
- [JavaScript: Código dinámico del lado del cliente](/es/docs/conflicting/Learn_web_development/Core/Scripting_41cf930b8cfd2b83c76f8086a5e24792)
  - : JavaScript es el lenguaje utilizado para agregar funcionalidad dinámica a las páginas web. Este tema enseña todos los elementos esenciales necesarios para sentirse cómodo con la escritura y la comprensión de JavaScript.
- [Formularios web: Trabajar con datos de usuario](/es/docs/Learn_web_development/Extensions/Forms)
  - : Los formularios web son una herramienta potente para interactuar con los usuarios; por lo general, se utilizan para recopilar datos de los usuarios o permitirles controlar una interfaz de usuario. En los artículos que se enumeran a continuación, cubriremos todos los aspectos esenciales de la estructuración, el estilo y la interacción con formularios web.
- [Accesibilidad: Hacer que la web sea utilizable por todos](/es/docs/Learn_web_development/Core/Accessibility)
  - : La accesibilidad es la práctica de hacer que el contenido web esté disponible para la mayor cantidad de personas posible, independientemente de la discapacidad, el dispositivo, el lugar u otros factores diferenciadores. Este tema te brinda todo lo que necesitas saber.
- [Rendimiento web: Hacer que los sitios web sean rápidos y responsivos](/es/docs/Learn_web_development/Extensions/Performance)
  - : El rendimiento web es el arte de garantizar 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.
- [MathML](/es/docs/Learn/MathML)
  - : MathML es el lenguaje que podemos usar para escribir fórmulas matemáticas en páginas web usando fracciones, scripts, radicales, matrices, integrales, series, etc. Este tema cubre MathML.
- [Herramientas y pruebas](/es/docs/conflicting/Learn_web_development/Extensions/Testing)
  - : Este tema cubre las herramientas que usan los desarrolladores para facilitar su trabajo, como herramientas de prueba entre navegadores, _linters_, formateadores, herramientas de transformación, sistemas de control de versiones, herramientas de implementación y _frameworks_ JavaScript del lado del cliente.
- [Programación de sitios web del lado del servidor](/es/docs/Learn_web_development/Extensions/Server-side)
  - : Incluso si te estás concentrando en el desarrollo web del 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 sobre cómo funciona el lado del servidor y tutoriales detallados que muestran cómo crear una aplicación del lado del servidor utilizando dos _frameworks_ populares: Django (Python) y Express (Node.js).

## Obtener nuestros ejemplos de código

Los ejemplos de código que encontrará en el Área de aprendizaje están todos [disponibles en GitHub](https://github.com/mdn/learning-area/). Si desea copiarlos todos en su computadora, la forma más fácil es [descargar un ZIP de la última rama del código principal](https://codeload.github.com/mdn/learning-area/zip/main).

Si prefiere copiar el repositorio de una manera más flexible que permita actualizaciones automáticas, puede seguir las instrucciones a continuación:

1. [Instalar Git](https://git-scm.com/downloads) en su máquina. Este es el software del sistema de control de versiones subyacente sobre el que funciona GitHub.
2. Abra el [símbolo del sistema](https://www.lifewire.com/how-to-open-command-prompt-2618089) (Windows) o terminal ([Linux](https://help.ubuntu.com/community/UsingTheTerminal), [macOS](https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)) de su computadora.
3. Para copiar el repositorio del área de aprendizaje en una carpeta llamada área de aprendizaje en la ubicación actual a la que apunta su símbolo del sistema/terminal, usa el siguiente comando:

   ```bash
   git clone https://github.com/mdn/learning-area
   ```

4. Ahora puedes ingresar al directorio y encontrar los archivos que buscas (ya sea usando su Finder/Explorador de archivos o el comando [`cd`](<https://en.wikipedia.org/wiki/Cd_(command)>)) .

Puedes actualizar el repositorio `learning-area` con cualquier cambio realizado en la versión principal en GitHub con los siguientes pasos:

1. En el símbolo del sistema/terminal, ve al directorio `learning-area` usando `cd`. Por ejemplo, si estuviera en el directorio principal:

   ```bash
   cd learning-area
   ```

2. Actualice el repositorio usando el siguiente comando:

   ```bash
   git pull
   ```

## Contactanos

Si quieres ponerte en contacto sobre cualquier cosa, utiliza los [canales de comunicación](/es/docs/MDN/Community/Communication_channels). Nos gustaría saber de ti sobre cualquier cosa que creas que está mal o que falta en el sitio, solicitudes de nuevos temas de aprendizaje, solicitudes de ayuda con elementos que no comprendes o cualquier otra pregunta o inquietud.

Si estás interesado en ayudar a desarrollar/mejorar el contenido, echa un vistazo a [cómo puedes ayudar](/es/docs/conflicting/MDN/Community) ¡y ponte en contacto! Estamos más que felices de hablar contigo, ya sea un alumno, un maestro, un desarrollador web experimentado o cualquier otra persona interesada en ayudar a mejorar la experiencia de aprendizaje.

## Véase también

- [Boletín para desarrolladores de Mozilla](https://www.mozilla.org/es/newsletter/developer/)
  - : Nuestro boletín para desarrolladores web, que es un excelente recurso para todos los niveles de experiencia.
- [Aprende JavaScript](https://learnjavascript.online/)
  - : Un recurso excelente para los aspirantes a desarrolladores web: aprenda JavaScript en un entorno interactivo, con lecciones cortas 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.
- [Web desmitificada](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g)
  - : Una gran serie de videos que explican los fundamentos web, dirigidos a principiantes en el desarrollo web. Creado por [Jérémie Patonnier](https://twitter.com/JeremiePat).
- [Codecademy](https://www.codecademy.com/)
  - : Un gran sitio interactivo para aprender lenguajes de programación desde cero.
- [BitDegree](https://www.bitdegree.org/learn/)
  - : Teoría básica de codificación con un proceso de aprendizaje gamificado. Principalmente enfocado a principiantes.
- [Code.org](https://code.org/)
  - : Teoría y práctica de codificación básica, dirigida principalmente a niños/principiantes.
- [EXLskills](https://exlskills.com/learn-en/courses)
  - : Cursos gratuitos y abiertos para el aprendizaje de habilidades tecnológicas, con tutoría y aprendizaje basado en proyectos.
- [freeCodeCamp.org](https://www.freecodecamp.org/)
  - : Sitio interactivo con tutoriales y proyectos para aprender desarrollo web.
- [Mapa de alfabetización web](https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/)
  - : Un _framework_ para la alfabetización web básica y las habilidades del siglo XXI, que también proporciona acceso a actividades de enseñanza ordenadas por categoría.
- [Edabit](https://edabit.com/challenges/javascript)
  - : Miles de desafíos interactivos de JavaScript.