Desarrollo Web para Principiantes - Un Plan de Estudios

Aprende los fundamentos del desarrollo web con nuestro curso integral de 12 semanas por parte de 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!

🧑‍🎓 ¿Eres estudiante?

Visita la página del Centro para Estudiantes donde encontrarás recursos para principiantes, paquetes para estudiantes e incluso formas de obtener un voucher gratuito para certificaciones. Esta es la página que querrás guardar y revisar periódicamente, ya que actualizamos el contenido mensualmente.

📣 Anuncio - Nuevo Plan de Estudios sobre IA Generativa para JavaScript acaba de ser lanzado

¡No te pierdas nuestro nuevo plan de estudios sobre IA Generativa!

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 envolvente, viajarás en el tiempo!

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

Prompting e ingeniería 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 plan de estudios. Nos encantaría recibir tus comentarios en nuestro foro de discusión!

Estudiantes, para cada lección, comienza con un cuestionario previo a la clase y sigue con la lectura del material, 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 en los proyectos juntos! Se fomentan las discusiones en nuestro foro de discusión donde nuestro equipo de moderadores estará disponible para responder tus preguntas.

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

📋 Configurando tu entorno

Este plan de estudios tiene un entorno de desarrollo listo para usar. Al comenzar, puedes elegir ejecutar el plan de estudios 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 fácilmente tu trabajo, se recomienda que crees tu propia copia de este repositorio. Puedes hacer esto haciendo clic en el botón Usar esta plantilla en la parte superior de la página. Esto creará un nuevo repositorio en tu cuenta de GitHub con una copia del plan de estudios.

Sigue estos pasos:

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

Ejecutando el plan de estudios en un Codespace

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

Ejecutando el plan de estudios localmente en tu computadora

Para ejecutar este plan de estudios 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 lo que mejor funcione para ti.

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

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

Luego, abre Terminal dentro de Visual Studio Code y ejecuta el siguiente comando, reemplazando <tu-url-de-repositorio> con la URL que acabas de copiar:
```
git clone <tu-url-de-repositorio>
```
Abre la carpeta en Visual Studio Code. Puedes hacer esto haciendo clic en Archivo > Abrir Carpeta y seleccionando la carpeta que acabas de clonar.

Extensiones recomendadas de 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:

notas visuales opcionales
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 se encuentran en la carpeta Quiz-app, 48 cuestionarios en total con tres preguntas cada uno. Están vinculados desde dentro de las lecciones; la aplicación de cuestionarios puede ejecutarse localmente o desplegarse en Azure; sigue las instrucciones en la carpeta quiz-app. Están siendo localizados gradualmente.

🗃️ Lecciones

	Nombre del Proyecto	Conceptos Enseñados	Objetivos de Aprendizaje	Lección Vinculada	Autor
01	Introducción	Introducción a la Programación y Herramientas del Oficio	Aprender 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 en su trabajo	Introducción a los Lenguajes de Programación y Herramientas del Oficio	Jasmine
02	Introducción	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	Introducción	Accesibilidad	Aprender los fundamentos de accesibilidad web	Fundamentos de Accesibilidad	Christopher
04	Fundamentos de JS	Tipos de Datos en JavaScript	Los fundamentos de los tipos de datos en JavaScript	Tipos de Datos	Jasmine
05	Fundamentos de JS	Funciones y Métodos	Aprender sobre funciones y métodos para gestionar el flujo lógico de una aplicación	Funciones y Métodos	Jasmine y Christopher
06	Fundamentos de JS	Toma de Decisiones con JS	Aprender a crear condiciones en tu código usando métodos de toma de decisiones	Toma de Decisiones	Jasmine
07	Fundamentos de JS	Arrays y Bucles	Trabajar con datos usando arrays y bucles en JavaScript	Arrays y Bucles	Jasmine
08	Terrario	HTML en Práctica	Construir el HTML para crear un terrario en línea, enfocándose en diseñar un layout	Introducción a HTML	Jen
09	Terrario	CSS en Práctica	Construir el CSS para estilizar el terrario en línea, enfocándose en los fundamentos de CSS incluyendo hacer la página responsiva	Introducción a CSS	Jen
10	Terrario	Cierres en JavaScript, Manipulación del DOM	Construir el JavaScript para hacer que el terrario funcione como una interfaz de arrastrar y soltar, enfocándose en cierres y manipulación del DOM	Cierres en JavaScript, Manipulación del DOM	Jen
11	Juego de Mecanografía	Construir un Juego de Mecanografía	Aprender a usar eventos del teclado para manejar la lógica de tu aplicación JavaScript	Programación Orientada a Eventos	Christopher
12	Extensión de Navegador Verde	Trabajando con Navegadores	Aprender cómo funcionan los navegadores, su historia y cómo estructurar los primeros elementos de una extensión de navegador	Sobre Navegadores	Jen
13	Extensión de Navegador Verde	Construir un formulario, llamar a una API y almacenar variables en localStorage	Construir los elementos JavaScript de tu extensión de navegador para llamar a una API usando variables almacenadas en localStorage	APIs, Formularios y Almacenamiento Local	Jen
14	Extensión de Navegador Verde	Procesos en segundo plano en el navegador, rendimiento web	Usar los procesos en segundo plano del navegador para gestionar el ícono de la extensión; aprender sobre rendimiento web y algunas optimizaciones para hacer	Tareas en Segundo Plano y Rendimiento	Jen
15	Juego Espacial	Desarrollo de Juegos más Avanzado con JavaScript	Aprender 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	Dibujando en canvas	Aprender sobre la API de Canvas, usada para dibujar elementos en una pantalla	Dibujando en Canvas	Chris
17	Juego Espacial	Moviendo elementos por la pantalla	Descubrir cómo los elementos pueden ganar movimiento usando coordenadas cartesianas y la API de Canvas	Moviendo Elementos	Chris
18	Juego Espacial	Detección de Colisiones	Hacer que los elementos colisionen y reaccionen entre sí usando pulsaciones de teclas y proporcionar una función de enfriamiento para asegurar el rendimiento del juego	Detección de Colisiones	Chris
19	Juego Espacial	Manteniendo Puntuación	Realizar cálculos matemáticos basados en el estado y rendimiento del juego	Manteniendo Puntuación	Chris
20	Juego Espacial	Terminando y reiniciando el juego	Aprender sobre terminar y reiniciar el juego, incluyendo limpiar recursos y reiniciar valores de variables	Condición de Finalización	Chris
21	Aplicación Bancaria	Plantillas HTML y Rutas en una Aplicación Web	Aprender a crear la estructura 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	Aprender sobre construir formularios y manejar rutinas de validación	Formularios	Yohan
23	Aplicación Bancaria	Métodos de Obtención y Uso de Datos	Cómo fluyen los datos dentro y fuera de tu aplicación, cómo obtenerlos, almacenarlos y desecharlos	Datos	Yohan
24	Aplicación Bancaria	Conceptos de Gestión de Estado	Aprender cómo tu aplicación retiene estado y cómo gestionarlo programáticamente	Gestión de Estado	Yohan

🏫 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 utilizadas por los desarrolladores web actuales. Los estudiantes tendrán la oportunidad de desarrollar experiencia práctica construyendo un juego de mecanografía, un terrario virtual, una extensión de navegador ecológica, un juego al estilo space-invaders y una aplicación bancaria para negocios. Al finalizar la serie, los estudiantes habrán adquirido un sólido entendimiento 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 incrementa la retención de conceptos. También escribimos varias lecciones introductorias sobre fundamentos de JavaScript para presentar conceptos, acompañadas de un video de la colección "Serie para Principiantes: JavaScript", algunos de cuyos autores contribuyeron a este currículo.

Además, un cuestionario de bajo riesgo antes de una 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 currículo fue diseñado para ser flexible y divertido, y puede tomarse completo o en partes. Los proyectos comienzan pequeños y se vuelven progresivamente más complejos al final del ciclo de 12 semanas.

Si bien 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 currículo sería aprender sobre Node.js a través de otra colección de videos: "Serie para Principiantes: Node.js".

Visita nuestro Código de Conducta y Pautas de Contribución. ¡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 repositorio, escribe docsify serve. El sitio web se servirá en el puerto 3000 de tu localhost: localhost:3000.

📘 PDF

Un PDF con todas las lecciones puede encontrarse aquí.

🎒 Otros Cursos

¡Nuestro equipo produce otros cursos! Echa un vistazo a:

Licencia

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