Aprende desarrollo web

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, 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.

¿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

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, 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 HTML y CSS en detalle: comience con nuestra Introducción a HTML y pase a nuestro módulo Primeros pasos con CSS.

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 JavaScript o al desarrollo del lado del servidor. Comience con nuestros módulos Primeros pasos de JavaScript y Primeros pasos del lado del servidor.

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, y luego considerar profundizar en frameworks de JavaScript del lado del cliente, y programación de sitios web del lado del servidor.

Nota: Nuestro glosario proporciona definiciones terminológicas. Además, si tienes una pregunta específica sobre desarrollo web, nuestra sección Preguntas comunes 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

Proporciona una introducción práctica al desarrollo web para principiantes.

HTML: Estructura de la web

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

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

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

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

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

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 (en-US)

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

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

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. 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.

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 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 (Windows) o terminal (Linux, macOS) 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) .

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 (en-US). 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 ¡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

Nuestro boletín para desarrolladores web, que es un excelente recurso para todos los niveles de experiencia.

Aprende JavaScript

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

Una gran serie de videos que explican los fundamentos web, dirigidos a principiantes en el desarrollo web. Creado por Jérémie Patonnier.

Codecademy

Un gran sitio interactivo para aprender lenguajes de programación desde cero.

BitDegree

Teoría básica de codificación con un proceso de aprendizaje gamificado. Principalmente enfocado a principiantes.

Code.org

Teoría y práctica de codificación básica, dirigida principalmente a niños/principiantes.

EXLskills

Cursos gratuitos y abiertos para el aprendizaje de habilidades tecnológicas, con tutoría y aprendizaje basado en proyectos.

freeCodeCamp.org

Sitio interactivo con tutoriales y proyectos para aprender desarrollo web.

Mapa de alfabetización web

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

Miles de desafíos interactivos de JavaScript.