Web-Dev-For-Beginners/translations/es

Desarrollo Web para Principiantes - Un Currículo

Aprende los fundamentos del desarrollo web con nuestro curso integral de 12 semanas impartido por Microsoft Cloud Advocates. Cada una de las 24 lecciones profundiza en JavaScript, CSS y HTML a través de proyectos prácticos como terrarios, extensiones de navegador y juegos espaciales. Participa con cuestionarios, discusiones y tareas prácticas. Mejora tus habilidades y optimiza la retención de conocimiento con nuestra eficaz pedagogía basada en proyectos. ¡Comienza tu camino en la programación hoy!

Únete a la Comunidad Azure AI Foundry en Discord

Sigue estos pasos para comenzar a usar estos recursos:

1. Haz un fork del repositorio: Haz clic en
2. Clona el repositorio: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Únete al Discord de Azure AI Foundry y conoce a expertos y otros desarrolladores

🌐 Soporte Multilingüe

Soportado vía GitHub Action (Automatizado y Siempre Actualizado)

Árabe | Bengalí | Búlgaro | Birmano (Myanmar) | Chino (Simplificado) | Chino (Tradicional, Hong Kong) | Chino (Tradicional, Macao) | Chino (Tradicional, Taiwán) | Croata | Checo | Danés | Neerlandés | Estonio | Finlandés | Francés | Alemán | Griego | Hebreo | Hindi | Húngaro | Indonesio | Italiano | Japonés | Kannada | Coreano | Lituano | Malayo | Malayalam | Maratí | Nepalí | Pidgin Nigeriano | Noruego | Persa (Farsi) | Polaco | Portugués (Brasil) | Portugués (Portugal) | Punjabi (Gurmukhi) | Rumano | Ruso | Serbio (Cirílico) | Eslovaco | Esloveno | Español | Swahili | Sueco | Tagalo (Filipino) | Tamil | Telugu | Tailandés | Turco | Ucraniano | Urdu | Vietnamita

¿Prefieres clonar localmente?

Este repositorio incluye más de 50 traducciones de idiomas lo que incrementa significativamente el tamaño de la descarga. Para clonar sin las traducciones, usa sparse checkout:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

Esto te dará todo lo necesario para completar el curso con una descarga mucho más rápida.

Si deseas que se añadan idiomas adicionales soportados, están listados aquí

🧑‍🎓 ¿Eres estudiante?

Visita la página del Centro de Estudiantes donde encontrarás recursos para principiantes, paquetes para estudiantes e incluso maneras de obtener un cupón para certificado gratis. Esta es la página que querrás guardar en tus favoritos y revisar de vez en cuando, ya que actualizamos contenido mensualmente.

📣 Anuncio - Nuevos desafíos de modo Agente de GitHub Copilot para completar

Nuevo desafío añadido, busca "GitHub Copilot Agent Challenge 🚀" en la mayoría de los capítulos. Es un nuevo reto para que completes usando GitHub Copilot y el modo Agente. Si nunca has usado el modo Agente antes, este es capaz no solo de generar texto, sino también de crear y editar archivos, ejecutar comandos y más.

📣 Anuncio - Nuevo Proyecto para construir usando IA Generativa

Nuevo proyecto asistente IA recién añadido, échale un vistazo proyecto

📣 Anuncio - Nuevo Currículo sobre IA Generativa para JavaScript recién lanzado

¡No te pierdas nuestro nuevo currículo de IA Generativa!

Visita https://aka.ms/genai-js-course para empezar.

• Lecciones que cubren desde lo básico hasta RAG.
• Interactúa con personajes históricos usando GenAI y nuestra app complementaria.
• Narrativa divertida y atractiva, ¡viajarás en el tiempo!

Cada lección incluye una tarea para completar, una verificación de conocimientos y un desafío para guiar tu aprendizaje en temas como:

• Prompting y ingeniería de prompts
• Generación de apps de texto e imagen
• Apps de búsqueda

Visita https://aka.ms/genai-js-course para empezar.

🌱 Comenzando

Profesores, hemos incluido algunas sugerencias sobre cómo usar este currículo. ¡Nos encantaría recibir sus comentarios en nuestro foro de discusión!

Estudiantes, para cada lección, comiencen con un cuestionario previo a la clase y continúen leyendo el material de la clase, completando las diferentes actividades y verificando su comprensión con el cuestionario posterior.

Para mejorar tu experiencia de aprendizaje, ¡conéctate con tus compañeros para trabajar juntos en los proyectos! Se fomentan las discusiones en nuestro foro de discusión donde nuestro equipo de moderadores estará disponible para responder tus preguntas.

Para profundizar tu educación, recomendamos ampliamente explorar Microsoft Learn para materiales adicionales de estudio.

📋 Configurando tu entorno

¡Este currículo cuenta con un entorno de desarrollo listo para usar! Al comenzar, puedes elegir ejecutar el currículo en un Codespace (un entorno basado en navegador, sin necesidad de instalaciones), o localmente en tu computadora usando un editor de texto como Visual Studio Code.

Crea tu repositorio

Para que puedas guardar tu trabajo fácilmente, se recomienda crear tu propia copia de este repositorio. Puedes hacerlo haciendo clic en el botón Use this template en la parte superior de la página. Esto creará un nuevo repositorio en tu cuenta de GitHub con una copia del currículo.

Sigue estos pasos:

1. Haz un fork del repositorio: Haz clic en el botón "Fork" en la esquina superior derecha de esta página.
2. Clona el repositorio: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Ejecutando el currículo en un Codespace

En tu copia de este repositorio que creaste, haz clic en el botón Code y selecciona Open with Codespaces. Esto creará un nuevo Codespace para que trabajes.

Ejecutando el currículo localmente en tu computadora

Para ejecutar este currículo localmente en tu computadora, necesitarás un editor de texto, un navegador y una herramienta de línea de comandos. Nuestra primera lección, Introducción a los Lenguajes de Programación y Herramientas del Oficio, te guiará a través de las opciones para cada una de estas herramientas para que selecciones lo que mejor te funcione.

Nuestra recomendación es usar Visual Studio Code como editor, que también tiene un Terminal integrado. Puedes descargar Visual Studio Code aquí.

1. Clona tu repositorio a tu computadora. Puedes hacerlo haciendo clic en el botón Code y copiando la URL:

   CodeSpace Luego, abre Terminal dentro de Visual Studio Code y ejecuta el siguiente comando, reemplazando <your-repository-url> con la URL que acabas de copiar:

   git clone <your-repository-url>
   

2. Abre la carpeta en Visual Studio Code. Puedes hacerlo haciendo clic en Archivo > Abrir carpeta y seleccionando la carpeta que acabas de clonar.

Extensiones recomendadas para Visual Studio Code:

• Live Server - para previsualizar páginas HTML dentro de Visual Studio Code
• Copilot - para ayudarte a escribir código más rápido

📂 Cada lección incluye:

• resumen opcional (sketchnote)
• video complementario opcional
• cuestionario de calentamiento previo a la lección
• lección escrita
• para lecciones basadas en proyectos, guías paso a paso sobre cómo construir el proyecto
• verificaciones de conocimiento
• un desafío
• lectura complementaria
• asignación
• cuestionario post-lección

Una nota sobre los cuestionarios: Todos los cuestionarios están contenidos en la carpeta Quiz-app, 48 cuestionarios en total de tres preguntas cada uno. Están disponibles aquí la app de cuestionarios se puede ejecutar localmente o desplegar en Azure; sigue las instrucciones en la carpeta quiz-app.

🗃️ Lecciones

	Nombre del Proyecto	Conceptos Enseñados	Objetivos de Aprendizaje	Lección Vinculada	Autor
01	Empezando	Introducción a la Programación y Herramientas del Oficio	Aprende los fundamentos básicos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a los desarrolladores profesionales a hacer su trabajo	Introducción a Lenguajes de Programación y Herramientas del Oficio	Jasmine
02	Empezando	Fundamentos de GitHub, incluye trabajo en equipo	Cómo usar GitHub en tu proyecto, cómo colaborar con otros en una base de código	Introducción a GitHub	Floor
03	Empezando	Accesibilidad	Aprende los fundamentos de la accesibilidad web	Fundamentos de Accesibilidad	Christopher
04	Fundamentos de JS	Tipos de Datos en JavaScript	Lo básico sobre los tipos de datos en JavaScript	Tipos de Datos	Jasmine
05	Fundamentos de JS	Funciones y Métodos	Aprende sobre funciones y métodos para gestionar el flujo de lógica de una aplicación	Funciones y Métodos	Jasmine y Christopher
06	Fundamentos de JS	Tomando Decisiones con JS	Aprende cómo crear condiciones en tu código usando métodos de toma de decisiones	Tomando Decisiones	Jasmine
07	Fundamentos de JS	Arreglos y Bucles	Trabaja con datos usando arreglos y bucles en JavaScript	Arreglos y Bucles	Jasmine
08	Terrario	HTML en la práctica	Construye el HTML para crear un terrario en línea, enfocándote en construir un diseño	Introducción a HTML	Jen
09	Terrario	CSS en la práctica	Construye el CSS para estilizar el terrario en línea, enfocándote en los fundamentos de CSS incluyendo hacer la página responsiva	Introducción a CSS	Jen
10	Terrario	Closures en JavaScript, manipulación del DOM	Construye el JavaScript para hacer que el terrario funcione como una interfaz de arrastrar y soltar, enfocándote en closures y manipulación del DOM	Closures en JavaScript, manipulación del DOM	Jen
11	Juego de Escritura	Construir un Juego de Escritura	Aprende cómo usar eventos del teclado para manejar la lógica de tu aplicación JavaScript	Programación basada en eventos	Christopher
12	Extensión Verde para Navegador	Trabajando con Navegadores	Aprende cómo funcionan los navegadores, su historia y cómo crear los primeros elementos de una extensión para navegador	Acerca de los Navegadores	Jen
13	Extensión Verde para Navegador	Construcción de formulario, llamada a API y almacenamiento local	Construye los elementos JavaScript de tu extensión de navegador para llamar a una API usando variables almacenadas en almacenamiento local	APIs, Formularios y Almacenamiento Local	Jen
14	Extensión Verde para Navegador	Procesos en segundo plano del navegador, rendimiento web	Usa los procesos en segundo plano del navegador para gestionar el ícono de la extensión; aprende sobre el rendimiento web y algunas optimizaciones para mejorar	Tareas en segundo plano y rendimiento	Jen
15	Juego Espacial	Desarrollo avanzado de juegos con JavaScript	Aprende sobre herencia usando tanto clases como composición y el patrón Pub/Sub, en preparación para construir un juego	Introducción al desarrollo avanzado de juegos	Chris
16	Juego Espacial	Dibujar en canvas	Aprende sobre la API Canvas, usada para dibujar elementos en una pantalla	Dibujar en Canvas	Chris
17	Juego Espacial	Mover elementos en la pantalla	Descubre cómo los elementos pueden adquirir movimiento usando coordenadas cartesianas y la API Canvas	Mover elementos	Chris
18	Juego Espacial	Detección de colisiones	Haz que los elementos colisionen y reaccionen entre sí usando pulsaciones de teclas y proporciona una función de enfriamiento para asegurar el rendimiento del juego	Detección de colisiones	Chris
19	Juego Espacial	Mantener el puntaje	Realiza cálculos matemáticos basados en el estado y rendimiento del juego	Mantener el puntaje	Chris
20	Juego Espacial	Terminar y reiniciar el juego	Aprende sobre cómo terminar y reiniciar el juego, incluyendo limpiar recursos y reiniciar valores de variables	La condición de finalización	Chris
21	Aplicación Bancaria	Plantillas HTML y rutas en una aplicación web	Aprende a crear el esqueleto de la arquitectura de un sitio web multipágina usando enrutamiento y plantillas HTML	Plantillas HTML y rutas	Yohan
22	Aplicación Bancaria	Construir un formulario de inicio de sesión y registro	Aprende sobre construcción de formularios y manejo de rutinas de validación	Formularios	Yohan
23	Aplicación Bancaria	Métodos para obtener y usar datos	Cómo fluyen los datos dentro y fuera de tu aplicación, cómo obtenerlos, almacenarlos y descartarlos	Datos	Yohan
24	Aplicación Bancaria	Conceptos de gestión de estado	Aprende cómo tu aplicación retiene estado y cómo manejarlo programáticamente	Gestión de estado	Yohan
25	Código Browser/VScode	Trabajando con VScode	Aprende a usar un editor de código	Usar el editor de código VScode	Chris
26	Asistentes de IA	Trabajando con IA	Aprende a construir tu propio asistente de IA	Proyecto Asistente de IA	Chris

🏫 Pedagogía

Nuestro currículo está diseñado con dos principios pedagógicos clave en mente:

• aprendizaje basado en proyectos
• cuestionarios frecuentes

El programa enseña los fundamentos de JavaScript, HTML y CSS, así como las últimas herramientas y técnicas usadas por los desarrolladores web actuales. Los estudiantes tendrán la oportunidad de adquirir experiencia práctica construyendo un juego de mecanografía, un terrario virtual, una extensión ecológica para navegador, un juego al estilo invasor espacial y una aplicación bancaria para negocios. Al finalizar la serie, los estudiantes habrán ganado una comprensión sólida del desarrollo web.

🎓 ¡Puedes tomar las primeras lecciones de este currículo como una Ruta de Aprendizaje en Microsoft Learn!

Al asegurar que el contenido se alinee con proyectos, el proceso se vuelve más atractivo para los estudiantes y se incrementará la retención de conceptos. También escribimos varias lecciones iniciales sobre los fundamentos de JavaScript para introducir conceptos, acompañadas de un video de la colección de tutoriales en video "Serie para Principiantes en: JavaScript", cuyos autores contribuyeron a este currículo.

Además, un cuestionario de bajo nivel antes de una clase establece la intención del estudiante hacia el aprendizaje de un tema, mientras que un segundo cuestionario posterior a la clase asegura una mayor retención. Este currículo fue diseñado para ser flexible y divertido y puede tomarse en su totalidad o en partes. Los proyectos comienzan pequeños y se vuelven cada vez más complejos al final del ciclo de 12 semanas.

Aunque hemos evitado intencionadamente introducir frameworks de JavaScript para concentrarnos en las habilidades básicas necesarias como desarrollador web antes de adoptar un framework, un buen siguiente paso para completar este currículo sería aprender sobre Node.js a través de otra colección de videos: "Serie para Principiantes en: Node.js".

Visita nuestras guías de Código de Conducta y Contribuciones. ¡Agradecemos tus comentarios constructivos!

🧭 Acceso sin conexión

Puedes ejecutar esta documentación sin conexión usando Docsify. Haz un fork de este repositorio, instala Docsify en tu máquina local y luego en la carpeta raíz de este repo, escribe docsify serve. El sitio web se servirá en el puerto 3000 de tu localhost: localhost:3000.

📘 PDF

Un PDF de todas las lecciones se puede encontrar aquí.

🎒 Otros Cursos

¡Nuestro equipo produce otros cursos! Mira:

LangChain

Azure / Edge / MCP / Agentes

---

Serie de IA Generativa

---

Aprendizaje Básico

---

Serie Copilot

Obtener ayuda

Si te atascas o tienes alguna pregunta sobre cómo crear aplicaciones de IA, únete a otros estudiantes y desarrolladores experimentados en discusiones sobre MCP. Es una comunidad de apoyo donde las preguntas son bienvenidas y el conocimiento se comparte libremente.

Si tienes comentarios sobre el producto o errores al construir, visita:

Licencia

Este repositorio está licenciado bajo la licencia MIT. Consulta el archivo LICENSE para más información.

---

Aviso legal: Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Aunque nos esforzamos por garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de ningún malentendido o interpretación errónea que surja del uso de esta traducción.