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 creado por los 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 en cuestionarios, discusiones y tareas prácticas. Mejora tus habilidades y optimiza tu retención de conocimientos con nuestra efectiva pedagogía basada en proyectos. ¡Comienza tu viaje de programación hoy mismo!

🧑‍🎓 ¿Eres estudiante?

Visita la página del Student Hub donde encontrarás recursos para principiantes, paquetes para estudiantes e incluso formas de obtener un cupón para un certificado gratuito. Esta es la página que querrás marcar como favorita y revisar de vez en cuando, ya que cambiamos el contenido mensualmente.

📣 Anuncio - Nuevo Currículo sobre Generative AI para JavaScript

¡No te pierdas nuestro nuevo currículo sobre Generative AI!

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

• Lecciones que cubren desde lo básico hasta RAG.
• Interactúa con personajes históricos usando GenAI y nuestra aplicación complementaria.
• Una 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 aprender temas como:

• Creación de prompts y diseño de prompts
• Generación de aplicaciones de texto e imágenes
• Aplicaciones de búsqueda

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

🌱 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, comienza con un cuestionario previo a la clase y continúa leyendo el material de la lección, completando las diversas actividades y verificando tu comprensión con el cuestionario posterior a la clase.

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

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

📋 Configurando tu entorno

¡Este currículo tiene 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 que crees 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 en él.

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 varias opciones para cada una de estas herramientas para que selecciones la que mejor funcione para ti.

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

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

   

   Luego, abre el 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 File > Open Folder 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:

• Sketchnote opcional
• 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
• Tarea
• Cuestionario posterior a la lección

Nota sobre los cuestionarios: Todos los cuestionarios están contenidos en la carpeta Quiz-app, 48 cuestionarios en total con tres preguntas cada uno. Están vinculados desde las lecciones y la aplicación de cuestionarios puede ejecutarse localmente o desplegarse en Azure; sigue las instrucciones en la carpeta quiz-app. Se están localizando gradualmente.

🗃️ Lecciones

	Nombre del Proyecto	Conceptos Enseñados	Objetivos de Aprendizaje	Lección Vinculada	Autor
01	Comenzando	Introducción a la Programación y Herramientas del Oficio	Aprende los fundamentos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a los desarrolladores	Introducción a los Lenguajes de Programación y Herramientas del Oficio	Jasmine
02	Comenzando	Conceptos básicos de GitHub, incluye trabajo en equipo	Cómo usar GitHub en tu proyecto y colaborar con otros en una base de código	Introducción a GitHub	Floor
03	Comenzando	Accesibilidad	Aprende los conceptos básicos de accesibilidad web	Fundamentos de Accesibilidad	Christopher
04	Conceptos Básicos de JS	Tipos de Datos en JavaScript	Los conceptos básicos de los tipos de datos en JavaScript	Tipos de Datos	Jasmine
05	Conceptos Básicos de JS	Funciones y Métodos	Aprende sobre funciones y métodos para gestionar el flujo lógico de una aplicación	Funciones y Métodos	Jasmine y Christopher
06	Conceptos Básicos de JS	Tomando Decisiones con JS	Aprende a crear condiciones en tu código usando métodos de toma de decisiones	Tomando Decisiones	Jasmine
07	Conceptos Básicos 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 conceptos básicos 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/soltar, enfocándote en closures y manipulación del DOM	Closures en JavaScript, manipulación del DOM	Jen
11	Juego de Mecanografía	Construye un Juego de Mecanografía	Aprende a usar eventos de teclado para dirigir la lógica de tu aplicación JavaScript	Programación Basada en Eventos	Christopher
12	Green Browser Extension	Trabajando con navegadores	Aprende cómo funcionan los navegadores, su historia y cómo estructurar los primeros elementos de una extensión de navegador	Sobre los navegadores	Jen
13	Green Browser Extension	Crear un formulario, llamar a una API y almacenar variables en el almacenamiento local	Construye los elementos de JavaScript de tu extensión de navegador para llamar a una API utilizando variables almacenadas en el almacenamiento local	APIs, Formularios y Almacenamiento Local	Jen
14	Green Browser Extension	Procesos en segundo plano en el navegador, rendimiento web	Utiliza los procesos en segundo plano del navegador para gestionar el ícono de la extensión; aprende sobre el rendimiento web y algunas optimizaciones	Tareas en Segundo Plano y Rendimiento	Jen
15	Space Game	Desarrollo de juegos más avanzado con JavaScript	Aprende sobre la herencia utilizando tanto clases como composición y el patrón Pub/Sub, como preparación para construir un juego	Introducción al Desarrollo Avanzado de Juegos	Chris
16	Space Game	Dibujar en canvas	Aprende sobre la API de Canvas, utilizada para dibujar elementos en una pantalla	Dibujar en Canvas	Chris
17	Space Game	Mover elementos en la pantalla	Descubre cómo los elementos pueden adquirir movimiento utilizando coordenadas cartesianas y la API de Canvas	Mover Elementos	Chris
18	Space Game	Detección de colisiones	Haz que los elementos colisionen y reaccionen entre sí utilizando teclas y proporciona una función de enfriamiento para garantizar el rendimiento del juego	Detección de Colisiones	Chris
19	Space Game	Llevar la puntuación	Realiza cálculos matemáticos basados en el estado y rendimiento del juego	Llevar la Puntuación	Chris
20	Space Game	Terminar y reiniciar el juego	Aprende sobre cómo terminar y reiniciar el juego, incluyendo la limpieza de recursos y el reinicio de valores de variables	Condición de Finalización	Chris
21	Banking App	Plantillas HTML y rutas en una aplicación web	Aprende cómo crear la estructura de la arquitectura de un sitio web multipágina utilizando rutas y plantillas HTML	Plantillas HTML y Rutas	Yohan
22	Banking App	Crear un formulario de inicio de sesión y registro	Aprende sobre cómo construir formularios y manejar rutinas de validación	Formularios	Yohan
23	Banking App	Métodos para obtener y usar datos	Cómo los datos fluyen dentro y fuera de tu aplicación, cómo obtenerlos, almacenarlos y eliminarlos	Datos	Yohan
24	Banking App	Conceptos de gestión de estado	Aprende cómo tu aplicación retiene el estado y cómo gestionarlo programáticamente	Gestión de Estado	Yohan

🏫 Pedagogía

Nuestro plan de estudios 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 herramientas y técnicas más recientes utilizadas 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 de navegador ecológica, un juego estilo "Space Invaders" y una aplicación bancaria para empresas. Al final de la serie, los estudiantes habrán adquirido una comprensión sólida del desarrollo web.

🎓 ¡Puedes tomar las primeras lecciones de este plan de estudios como un Learn Path en Microsoft Learn!

Al garantizar que el contenido se alinee con los proyectos, el proceso se vuelve más atractivo para los estudiantes y se mejora la retención de conceptos. También escribimos varias lecciones introductorias sobre los conceptos básicos de JavaScript, acompañadas de un video de la colección "Beginners Series to: JavaScript", algunos de cuyos autores contribuyeron a este plan de estudios.

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

Aunque hemos evitado intencionalmente introducir frameworks de JavaScript para concentrarnos en las habilidades básicas necesarias como desarrollador web antes de adoptar un framework, un buen siguiente paso después de completar este plan de estudios sería aprender sobre Node.js a través de otra colección de videos: "Beginner Series to: Node.js".

Visita nuestras Normas de Conducta y las pautas de Contribución. ¡Agradecemos tus comentarios constructivos!

🧭 Acceso sin conexión

Puedes ejecutar esta documentación sin conexión utilizando Docsify. Haz un fork de este repositorio, instala Docsify en tu máquina local y luego, en la carpeta raíz de este repositorio, 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! Echa un vistazo:

• Generative AI for Beginners
• Generative AI for Beginners .NET
• Generative AI with JavaScript
• Generative AI with Java
• AI for Beginners
• Data Science for Beginners
• ML for Beginners
• Cybersecurity for Beginners
• Web Dev for Beginners
• IoT for Beginners
• XR Development for Beginners
• Mastering GitHub Copilot for Agentic use
• Mastering GitHub Copilot for C#/.NET Developers
• Choose Your Own Copilot Adventure

Licencia

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

Descargo de responsabilidad:
Este documento ha sido traducido utilizando el servicio de traducción automática Co-op Translator. Si bien nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o imprecisiones. El documento original en su idioma nativo debe considerarse como la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas que puedan surgir del uso de esta traducción.