Learn the fundamentals of web development with our 12-week comprehensive course by Microsoft Cloud Advocates. Each of the 24 lessons dives into JavaScript, CSS, and HTML through hands-on projects like terrariums, browser extensions, and space games. Engage with quizzes, discussions, and practical assignments. Enhance your skills and optimize your knowledge retention with our effective project-based pedagogy. Start your coding journey today!
Join the Azure AI Foundry Discord Community
Join the Azure AI Foundry Discord and meet experts and fellow developers.
@ -51,7 +51,7 @@ Follow these steps to get started using these resources:
> This gives you everything you need to complete the course with a much faster download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**If you wish to have additional translations languages supported are listed [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**If you wish to have additional translations, the supported languages are listed here. [here](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
@ -276,5 +276,5 @@ This repository is licensed under the MIT license. See the [LICENSE](../../LICEN
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
This document has been translated using AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please be aware that automated translations may contain errors or inaccuracies. The original document in its native language should be considered the authoritative source. For critical information, professional human translation is recommended. We are not liable for any misunderstandings or misinterpretations arising from the use of this translation.
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please be aware that automated translations may contain errors or inaccuracies. The original document in its native language should be considered the authoritative source. For critical information, professional human translation is recommended. We are not liable for any misunderstandings or misinterpretations arising from the use of this translation.
@ -52,5 +73,7 @@ Optional: Include a screenshot of the final UI from the lesson if relevant.
---
**Disclaimer**:
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
This document has been translated using AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we strive for accuracy, please be aware that automated translations may contain errors or inaccuracies. The original document in its native language should be considered the authoritative source. For critical information, professional human translation is recommended. We are not liable for any misunderstandings or misinterpretations arising from the use of this translation.
Este es un repositorio educativo para enseñar los fundamentos del desarrollo web a principiantes. El currículum es un curso integral de 12 semanas desarrollado por Microsoft Cloud Advocates, que incluye 24 lecciones prácticas sobre JavaScript, CSS y HTML.
Este es un repositorio de currículo educativo para enseñar los fundamentos del desarrollo web a principiantes. El currículo es un curso integral de 12 semanas desarrollado por Microsoft Cloud Advocates, que incluye 24 lecciones prácticas sobre JavaScript, CSS y HTML.
### Componentes Clave
### Componentes clave
- **Contenido Educativo**: 24 lecciones estructuradas organizadas en módulos basados en proyectos
- **Proyectos Prácticos**: Terrarium, Juego de mecanografía, Extensión de navegador, Juego espacial, Aplicación bancaria, Editor de código y Asistente de chat con IA
- **Cuestionarios Interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones pre y post lección)
- **Soporte Multilenguaje**: Traducciones automáticas en más de 50 idiomas vía GitHub Actions
- **Contenido educativo**: 24 lecciones estructuradas organizadas en módulos basados en proyectos
- **Proyectos prácticos**: Terrario, juego de mecanografía, extensión de navegador, juego espacial, aplicación bancaria, editor de código y asistente de chat con IA
- **Cuestionarios interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones antes/después de la lección)
- **Soporte multilingüe**: Traducciones automáticas a más de 50 idiomas mediante GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para estudiantes
- Cursos adicionales: Currículos de IA generativa, Ciencia de datos, ML, IoT disponibles
### Trabajo con Proyectos Específicos
### Trabajar con proyectos específicos
Para instrucciones detalladas de proyectos individuales, consultar los archivos README en:
- `quiz-app/README.md` - aplicación de cuestionarios en Vue 3
- `7-bank-project/README.md` - aplicación bancaria con autenticación
- `5-browser-extension/README.md` - desarrollo de extensión de navegador
- `6-space-game/README.md` - desarrollo de juego en canvas
- `9-chat-project/README.md` - proyecto de asistente de chat IA
Para instrucciones detalladas sobre proyectos individuales, consulta los archivos README en:
- `quiz-app/README.md` - Aplicación de cuestionarios en Vue 3
- `7-bank-project/README.md` - Aplicación bancaria con autenticación
- `5-browser-extension/README.md` - Desarrollo de extensiones para navegador
- `6-space-game/README.md` - Desarrollo de juego basado en Canvas
- `9-chat-project/README.md` - Proyecto de asistente de chat con IA
### Estructura Monorepo
### Estructura de monorepositorio
Aunque no es un monorepo tradicional, este repositorio contiene múltiples proyectos independientes:
- Cada lección es autónoma
- Los proyectos no comparten dependencias
- Se puede trabajar en proyectos individuales sin afectar otros
- Clonar el repositorio completo para experiencia completa del currículum
- Trabaja en proyectos individuales sin afectar otros
- Clona el repositorio completo para la experiencia completa del currículo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por 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 humana. No nos hacemos responsables de malentendidos o interpretaciones erróneas derivadas del uso de esta traducción.
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por la precisión, tenga en cuenta que las traducciones automáticas 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 malentendidos o interpretaciones erróneas derivadas del uso de esta traducción.
# 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 efectiva metodología basada en proyectos. ¡Comienza tu viaje de codificación hoy!
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 conocimientos con nuestra eficaz pedagogía basada en proyectos. ¡Comienza tu viaje de programación hoy!
Únete a la Comunidad Azure AI Foundry en Discord
Únete al Discord de Azure AI Foundry y conoce a expertos y compañeros desarrolladores.
Sigue estos pasos para comenzar a usar estos recursos:
1. **Haz un Fork del Repositorio**: Haz clic en [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clona el Repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Únete al Azure AI Foundry Discord y conoce a expertos y otros desarrolladores**](https://discord.com/invite/ByRwuEEgH4)
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 compañeros desarrolladores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Soporte Multilenguaje
#### Soportado vía GitHub Action (Automatizado y Siempre Actualizado)
#### Soportado a través de GitHub Action (Automatizado y siempre actualizado)
> Este repositorio incluye más de 50 traducciones de idiomas que aumentan significativamente el tamaño de la descarga. Para clonar sin traducciones, usa checkout disperso:
> Este repositorio incluye traducciones a más de 50 idiomas que aumentan significativamente el tamaño de la descarga. Para clonar sin traducciones, usa sparse checkout:
>
> **Bash / macOS / Linux:**
> ```bash
@ -48,26 +48,26 @@ Sigue estos pasos para comenzar a usar estos recursos:
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Esto te da todo lo necesario para completar el curso con una descarga mucho más rápida.
> Esto te proporciona todo lo necesario para completar el curso con una descarga mucho más rápida.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Si deseas que se admitan idiomas adicionales para la traducción, están listados [aquí](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Si deseas tener traducciones adicionales, los idiomas soportados están listados aquí. [aquí](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _¿Eres estudiante?_
Visita la [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) donde encontrarás recursos para principiantes, paquetes para estudiantes e incluso formas de obtener un cupón para certificado gratis. Esta es la página que quieres marcar como favorita y revisar de vez en cuando ya que actualizamos el contenido mensualmente.
Visita la [**página Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) donde encontrarás recursos para principiantes, paquetes para estudiantes e incluso maneras de obtener un cupón para certificado gratuito. Esta es la página que deseas guardar en favoritos y consultar periódicamente ya que cambiamos el contenido mensualmente.
### 📣 Anuncio - ¡Nuevos desafíos del modo Agente GitHub Copilot para completar!
### 📣 Anuncio - ¡Nuevos desafíos del 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 desafío para que completes usando GitHub Copilot y el modo Agente. Si no has usado el modo Agente antes, es capaz no solo de generar texto, sino también de crear y editar archivos, ejecutar comandos y más.
Nuevo desafío agregado, busca "Desafío del Agente GitHub Copilot 🚀" en la mayoría de los capítulos. Es un nuevo reto para que completes usando GitHub Copilot y el modo Agente. Si no has usado el modo Agente antes, es capaz no solo de generar texto sino también crear y editar archivos, ejecutar comandos y más.
### 📣 Anuncio - _Nuevo proyecto para construir usando IA Generativa_
### 📣 Anuncio - _Nuevo Proyecto para construir usando IA Generativa_
Nuevo proyecto Asistente AI añadido, échale un vistazo [proyecto](./9-chat-project/README.md)
Nuevo proyecto de Asistente IA agregado, échale un vistazo en [proyecto](./9-chat-project/README.md)
### 📣 Anuncio - _Nuevo currículo_ sobre IA Generativa para JavaScript acaba de ser lanzado
### 📣 Anuncio - _Nuevo Currículo_ sobre IA Generativa para JavaScript acaba de ser lanzado
¡No te pierdas nuestro nuevo currículo de IA Generativa!
@ -76,14 +76,14 @@ Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
Cada lección incluye una tarea para completar, una revisión de conocimiento y un desafío para guiarte en temas como:
- Prompting y ingeniería de prompts
Cada lección incluye una tarea para completar, una evaluación de conocimiento y un desafío para guiar tu aprendizaje en temas como:
- Prompts y ingeniería de prompts
- Generación de apps de texto e imagen
- Apps de búsqueda
@ -95,35 +95,35 @@ Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para com
> **Profesores**, hemos [incluido algunas sugerencias](for-teachers.md) sobre cómo usar este currículo. ¡Nos encantaría recibir sus comentarios [en nuestro foro de discusión](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Estudiantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lección, comiencen con un cuestionario previo y sigan leyendo el material de la lección, completando las diversas actividades y comprobando su comprensión con el cuestionario posterior a la clase.
**[Estudiantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lección, comienza con un cuestionario previo a la clase y continúa leyendo el material, completando las actividades y verificando tu comprensión con el cuestionario posterior a la clase.
Para mejorar su experiencia de aprendizaje, ¡conéctense con sus compañeros para trabajar juntos en los proyectos! Las discusiones están alentadas en nuestro [foro de discusión](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) donde nuestro equipo de moderadores estará disponible para responder sus preguntas.
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](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) donde nuestro equipo de moderadores estará disponible para responder tus preguntas.
Para profundizar en la educación, recomendamos altamente explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiales de estudio adicionales.
Para ampliar tu educación, te recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para obtener materiales de estudio adicionales.
### 📋 Configurando tu entorno
### 📋 Configuración de tu entorno
¡Este currículo tiene un entorno de desarrollo listo para usar! Al comenzar puedes elegir ejecutar el currículo en un [Codespace](https://github.com/features/codespaces/) (_un entorno basado en navegador, sin necesidad de instalaciones_), o localmente en tu computadora usando un editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Este currículo tiene un entorno de desarrollo listo para usar. Al comenzar, puedes elegir ejecutar el currículo en un [Codespace](https://github.com/features/codespaces/) (_un entorno basado en navegador sin necesidad de instalaciones_), o localmente en tu ordenador usando un editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crea tu repositorio
Para guardar fácilmente tu trabajo, 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.
Para que guardes 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`
2. **Clona el Repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Ejecutando el currículo en un Codespace
#### Ejecutar 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
#### Ejecutar el currículo localmente en tu equipo
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 Lenguajes de Programación y Herramientas del Oficio](../../1-getting-started-lessons/1-intro-to-programming-languages), te guiará a través de varias opciones para cada una de estas herramientas para que elijas lo que mejor se adapte a ti.
Para ejecutar este currículo localmente en tu equipo, 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](../../1-getting-started-lessons/1-intro-to-programming-languages), te guiará por varias opciones para cada una de estas herramientas para que selecciones la que mejor te funcione.
Nuestra recomendación es usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como tu editor, que también tiene un [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Puedes descargar Visual Studio Code [aquí](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clona tu repositorio en tu computadora. Puedes hacer esto haciendo clic en el botón **Code** y copiando la URL:
Nuestra recomendación es usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como editor, que también tiene un [Terminal integrado](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Puedes descargar Visual Studio Code [aquí](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clona tu repositorio en tu computadora. Puedes hacerlo haciendo clic en el botón **Code** y copiando la URL:
[CodeSpace](./images/createcodespace.png)
@ -133,19 +133,19 @@ Nuestra recomendación es usar [Visual Studio Code](https://code.visualstudio.co
git clone <your-repository-url>
```
2. Abre la carpeta en Visual Studio Code. Puedes hacer esto haciendo clic en **File** > **Open Folder** y seleccionando la carpeta que acabas de clonar.
2. 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:
> Extensiones recomendadas para Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para previsualizar páginas HTML dentro de Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ayudarte a escribir código más rápido
## 📂 Cada lección incluye:
- nota gráfica opcional
- video complementario opcional
- cuestionario de calentamiento antes de la lección
- boceto opcional
- video opcional complementario
- 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
@ -154,38 +154,38 @@ Nuestra recomendación es usar [Visual Studio Code](https://code.visualstudio.co
- tarea
- [cuestionario posterior a la lección](https://ff-quizzes.netlify.app/web/)
> **Una nota sobre los cuestionarios**: Todos los cuestionarios están contenidos en la carpeta Quiz-app, un total de 48 cuestionarios con tres preguntas cada uno. Están disponibles [aquí](https://ff-quizzes.netlify.app/web/); la aplicación de cuestionarios puede ejecutarse localmente o desplegarse en Azure; sigue las instrucciones en la carpeta `quiz-app`.
> **Una nota sobre los cuestionarios**: Todos los cuestionarios están contenidos en la carpeta Quiz-app, con un total de 48 cuestionarios de tres preguntas cada uno. Están disponibles [aquí](https://ff-quizzes.netlify.app/web/); la aplicación del cuestionario puede ejecutarse localmente o desplegarse 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 | Comenzando | 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 desarrolladores profesionales a hacer su trabajo | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Comenzando | Conceptos básicos de GitHub, incluye trabajo en equipo | Cómo usar GitHub en tu proyecto, cómo colaborar con otros en una base de código | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Comenzando | Accesibilidad | Aprende los conceptos básicos de accesibilidad web | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Básico | Tipos de datos en JavaScript | Los conceptos básicos de los tipos de datos en JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Básico | Funciones y métodos | Aprende sobre funciones y métodos para manejar el flujo lógico de una aplicación | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine y Christopher |
| 06 | JS Básico | Tomando decisiones con JS | Aprende a crear condiciones en tu código utilizando métodos de toma de decisiones | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Básico | Arreglos y bucles | Trabaja con datos usando arreglos y bucles en JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML en práctica | Construye el HTML para crear un terrario en línea, enfocándote en construir un diseño | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS en práctica | Construye el CSS para darle estilo al terrario en línea, enfocándote en los fundamentos de CSS, incluyendo hacer la página responsiva | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closures en JavaScript, manipulación del DOM| Construye el JavaScript para que el terrario funcione como una interfaz de arrastrar y soltar, enfocándote en closures y manipulación del DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Construye un juego de mecanografía | Aprende a usar eventos de teclado para manejar la lógica de tu aplicación JavaScript | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Trabajando con navegadores | Aprende cómo funcionan los navegadores, su historia y cómo esqueletonizar los primeros elementos de una extensión para navegador | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Construir un formulario, llamar a una API y almacenar variables localmente | Construye los elementos JavaScript de tu extensión de navegador para llamar una API usando variables almacenadas localmente | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Procesos en segundo plano en el navegador, rendimiento web | Usa los procesos en segundo plano del navegador para administrar el ícono de la extensión; aprende sobre el rendimiento web y algunas optimizaciones para mejorarlo | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Desarrollo de juegos más avanzado con JavaScript | Aprende sobre herencia usando tanto clases como composición y el patrón Pub/Sub, para prepararte para construir un juego | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Dibujando en canvas | Aprende sobre la API Canvas, usada para dibujar elementos en una pantalla | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Moviendo elementos por la pantalla | Descubre cómo los elementos pueden adquirir movimiento usando coordenadas cartesianas y la API Canvas | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Detección de colisiones | Haz que los elementos colisionen y reaccionen entre sí usando presiones de tecla y provee una función de enfriamiento para asegurar el rendimiento del juego | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Mantener puntuación | Realiza cálculos matemáticos basados en el estado y rendimiento del juego | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) |Finalizar y reiniciar el juego | Aprende sobre finalizar y reiniciar el juego, incluyendo limpiar recursos y reiniciar valores de variables | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | Plantillas HTML y rutas en una aplicación web | Aprende a crear la estructura de la arquitectura de un sitio web multipágina usando rutas y plantillas HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Construye un formulario de inicio de sesión y registro | Aprende a construir formularios y manejar rutinas de validación | [Forms](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Métodos para obtener y usar datos | Cómo fluyen los datos dentro y fuera de tu aplicación, cómo obtenerlos, almacenarlos y desecharlos | [Data](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Conceptos de gestión de estado | Aprende cómo tu aplicación retiene el estado y cómo gestionarlo programáticamente | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Trabajar con VScode | Aprende a usar un editor de código | [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Trabajar con IA | Aprende a construir tu propio asistente de IA | [AI Assistant project](./9-chat-project/README.md) | Chris |
| | 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 | 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 a hacer su trabajo | [Introducción a Lenguajes de Programación y Herramientas del Oficio](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Comenzando | Conceptos básicos de GitHub, incluyendo 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](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Comenzando | Accesibilidad | Aprende los conceptos básicos de accesibilidad web | [Fundamentos de Accesibilidad](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos JS | Tipos de Datos en JavaScript | Lo básico sobre los tipos de datos en JavaScript | [Tipos de Datos](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos JS | Funciones y Métodos | Aprende sobre funciones y métodos para manejar el flujo lógico de una aplicación | [Funciones y Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine y Christopher |
| 06 | Fundamentos JS | Tomar Decisiones con JS | Aprende a crear condiciones en tu código utilizando métodos de toma de decisiones | [Tomar Decisiones](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos JS | Arreglos y Bucles | Trabaja con datos usando arreglos y bucles en JavaScript | [Arreglos y Bucles](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrario](./3-terrarium/solution/README.md) | HTML en la Práctica | Construye el HTML para crear un terrario en línea, enfocándose en construir un diseño | [Introducción a HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrario](./3-terrarium/solution/README.md) | CSS en la Práctica | Construye el CSS para estilizar el terrario en línea, enfocándose en los conceptos básicos de CSS incluyendo hacer la página responsiva | [Introducción a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrario](./3-terrarium/solution/README.md) | Closures en JavaScript, manipulación del DOM | Construye el JavaScript para hacer que el terrario funcione como una interfaz de arrastrar y soltar, con énfasis en closures y manipulación del DOM | [Closures en JavaScript, manipulación del DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Juego de tipeo](./4-typing-game/solution/README.md) | Construir un Juego de Tipeo | Aprende a usar eventos de teclado para impulsar la lógica de tu aplicación JavaScript | [Programación guiada por eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensión Verde para Navegadores](./5-browser-extension/solution/README.md) | Trabajando con Navegadores | Aprende cómo funcionan los navegadores, su historia y cómo crear la estructura inicial de una extensión para navegador | [Acerca de los Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensión Verde para Navegadores](./5-browser-extension/solution/README.md) | Construcción de formularios, llamadas a API y almacenamiento local | Construye los elementos JavaScript de tu extensión para navegador para llamar a una API usando variables almacenadas localmente | [APIs, Formularios y Almacenamiento Local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensión Verde para Navegadores](./5-browser-extension/solution/README.md) | Procesos en segundo plano en el 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](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Juego Espacial](./6-space-game/solution/README.md) | Desarrollo de Juegos Avanzado con JavaScript | Aprende sobre herencia usando Clases y Composición y el patrón Pub/Sub, preparando para construir un juego | [Introducción al Desarrollo Avanzado de Juegos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Juego Espacial](./6-space-game/solution/README.md) | Dibujo en canvas | Aprende sobre la API Canvas, usada para dibujar elementos en una pantalla | [Dibujo en Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Juego Espacial](./6-space-game/solution/README.md) | Mover elementos por la pantalla | Descubre cómo los elementos pueden adquirir movimiento usando coordenadas cartesianas y la API Canvas | [Mover Elementos](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Juego Espacial](./6-space-game/solution/README.md) | Detección de colisiones | Haz que los elementos colisionen y reaccionen entre sí usando pulsaciones de tecla y proporciona una función de enfriamiento para asegurar el rendimiento del juego | [Detección de Colisiones](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Juego Espacial](./6-space-game/solution/README.md) | Mantener la puntuación | Realiza cálculos matemáticos basados en el estado y desempeño del juego | [Mantener la puntuación](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Juego Espacial](./6-space-game/solution/README.md) | Finalizar y reiniciar el juego | Aprende sobre cómo finalizar y reiniciar el juego, incluyendo limpiar recursos y reiniciar valores de variables | [Condición de Finalización](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Aplicación Bancaria](./7-bank-project/solution/README.md) | Plantillas HTML y Rutas en una aplicación web | Aprende a crear la estructura arquitectónica de un sitio web multipágina usando rutas y plantillas HTML | [Plantillas HTML y Rutas](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Aplicación Bancaria](./7-bank-project/solution/README.md) | Construye un formulario de inicio de sesión y registro | Aprende sobre construcción de formularios y manejo de rutinas de validación | [Formularios](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Aplicación Bancaria](./7-bank-project/solution/README.md) | Métodos para obtener y usar datos | Cómo fluye la información dentro y fuera de tu aplicación, cómo obtenerla, almacenarla y eliminarla | [Datos](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Aplicación Bancaria](./7-bank-project/solution/README.md) | Conceptos de gestión de estado | Aprende cómo tu aplicación mantiene el estado y cómo gestionarlo programáticamente | [Gestión de Estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código de Navegador/VSCode](../../8-code-editor) | Trabajando con VScode | Aprende a usar un editor de código | [Usar el editor de código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Asistentes AI](./9-chat-project/README.md) | Trabajar con AI | Aprende a construir tu propio asistente AI | [Proyecto de asistente AI](./9-chat-project/README.md) | Chris |
## 🏫 Pedagogía
@ -193,22 +193,22 @@ Nuestro currículo está diseñado con dos principios pedagógicos clave en ment
* 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 estilo invasores espaciales y una aplicación bancaria para negocios. Al final de la serie, los estudiantes habrán adquirido una sólida comprensión del desarrollo web.
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 tipeo, terrario virtual, una extensión de navegador ecológica, un juego estilo invasores espaciales y una aplicación bancaria para negocios. Al final de 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](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) en Microsoft Learn!
> 🎓 ¡Puedes tomar las primeras lecciones de este currículo como un [Camino de Aprendizaje](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) en Microsoft Learn!
Al asegurar que el contenido se alinee con proyectos, el proceso se vuelve más atractivo para los estudiantes y se potencia la retención de conceptos. También escribimos varias lecciones introductorias en los fundamentos de JavaScript para introducir conceptos, acompañadas de un video de la colección de tutoriales en video "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", algunos de cuyos autores contribuyeron a este currículo.
Al asegurar que el contenido esté alineado 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 iniciales en fundamentos de JavaScript para introducir conceptos, combinadas con un video de la colección "[Serie para principiantes en: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" de tutoriales en video, 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 garantiza una mayor retención. Este currículo 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.
Además, un cuestionario de baja presión 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 retención adicional. 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 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 después de completar este currículo sería aprender sobre Node.js a través de otra colección de videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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 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](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visita nuestras guías de [Código de Conducta](CODE_OF_CONDUCT.md) y [Contribuciones](CONTRIBUTING.md). ¡Agradecemos tus comentarios constructivos!
> Visita nuestras directrices de [Código de Conducta](CODE_OF_CONDUCT.md) y [Contribuciones](CONTRIBUTING.md). ¡Agradecemos tus comentarios constructivos!
## 🧭 Acceso sin conexión
Puedes ejecutar esta documentación sin conexión utilizando [Docsify](https://docsify.js.org/#/). Haz un fork de este repositorio, [instala Docsify](https://docsify.js.org/#/quickstart) 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 en tu localhost: `localhost:3000`.
Puedes ejecutar esta documentación sin conexión usando [Docsify](https://docsify.js.org/#/). Haz un fork de este repositorio, [instala Docsify](https://docsify.js.org/#/quickstart) 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 en tu localhost: `localhost:3000`.
## 📘 PDF
Un PDF de todas las lecciones se puede encontrar [aquí](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -216,7 +216,7 @@ Un PDF de todas las lecciones se puede encontrar [aquí](https://microsoft.githu
## 🎒 Otros Cursos
¡Nuestro equipo produce otros cursos! Mira:
¡Nuestro equipo produce otros cursos! Consulta:
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -225,7 +225,7 @@ Un PDF de todas las lecciones se puede encontrar [aquí](https://microsoft.githu
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
### Azure / Edge / MCP / Agentes
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
@ -260,21 +260,21 @@ Un PDF de todas las lecciones se puede encontrar [aquí](https://microsoft.githu
## Obtener ayuda
Si te quedas atascado o tienes alguna pregunta sobre cómo construir 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 te quedas atascado o tienes alguna pregunta sobre cómo crear aplicaciones de IA. Únete a otros aprendices y desarrolladores experimentados en discusiones sobre MCP. Es una comunidad de apoyo donde las preguntas son bienvenidas y el conocimiento se comparte libremente.
Este repositorio está licenciado bajo la licencia MIT. Consulta el archivo [LICENSE](../../LICENSE) para más información.
Este repositorio está bajo licencia MIT. Consulta el archivo [LICENSE](../../LICENSE) para más información.
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por lograr precisión, tenga en cuenta que las traducciones automáticas 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 cualquier malentendido o interpretación errónea que surja del uso de esta traducción.
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por la exactitud, 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 humana. No nos hacemos responsables de ningún malentendido o interpretación errónea derivada del uso de esta traducción.
## 🎥 Video
## [Cuestionario previo a la clase](../../../lesson-template/quiz-url)
> Agrega un video incrustado o enlace de la lección aquí.
[Describe lo que aprenderemos]
---
## Cuestionario previo a la clase
> Agrega un enlace al cuestionario aquí cuando esté disponible.
---
Proporciona una breve visión general de lo que los estudiantes aprenderán en esta lección.
---
### Introducción
Describe lo que se cubrirá
Proporciona una breve introducción que describa lo que se cubrirá en esta lección.
> Notas
---
### Requisitos previos
¿Qué pasos deberían haberse completado antes de esta lección?
Enumera los conceptos o temas que los estudiantes ya deberían conocer antes de comenzar esta lección.
---
### Preparación
Pasos preparatorios para comenzar esta lección
Enumera los pasos de configuración o herramientas necesarias antes de comenzar la lección.
---
[Avanza por el contenido en bloques]
### Contenido
Avanza a través del contenido de la lección en secciones estructuradas.
## [Tema 1]
---
## Tema 1
### Tarea:
Trabajen juntos para mejorar progresivamente su base de código y construir el proyecto con código compartido:
Trabajen juntos para mejorar progresivamente su base de código para construir el proyecto con código compartido:
```html
code blocks
```
✅ Verificación de conocimiento: aprovecha este momento para ampliar el conocimiento de los estudiantes con preguntas abiertas
✅ Verificación de conocimiento
Aprovecha este momento para desafiar el conocimiento de los estudiantes con preguntas abiertas.
## [Tema 2]
## Tema 2
## Tema 3
## [Tema 3]
🚀 Desafío
Agrega un desafío colaborativo para que los estudiantes mejoren el proyecto.
🚀 Desafío: Agrega un desafío para que los estudiantes trabajen colaborativamente en clase y mejoren el proyecto
Opcional: agrega una captura de pantalla de la interfaz de usuario completa de la lección si es apropiado.
Opcional: agrega una captura de pantalla de la interfaz de usuario de la lección completada si es apropiado
## Cuestionario posterior a la clase
## [Cuestionario posterior a la clase](../../../lesson-template/quiz-url)
Agrega un enlace al cuestionario aquí después de completar la lección.
## Revisión y estudio autónomo
## Revisión y Estudio Personal
**Entrega de tarea [MM/YY]**: [Nombre de la tarea](assignment.md)
**Entrega de asignación [MM/AA]**: [Nombre de la asignación](assignment.md)
---
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/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.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso legal**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por la precisión, tenga en cuenta que las traducciones automáticas 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 por malentendidos o interpretaciones erróneas que surjan del uso de esta traducción.
Il s'agit d'un référentiel de programme éducatif pour enseigner les fondamentaux du développement web aux débutants. Le programme est un cours complet de 12 semaines développé par les Microsoft Cloud Advocates, comprenant 24 leçons pratiques couvrant JavaScript, CSS et HTML.
Il s'agit d'un dépôt de programme éducatif pour enseigner les fondamentaux du développement web aux débutants. Le programme est un cours complet de 12 semaines développé par Microsoft Cloud Advocates, comprenant 24 leçons pratiques couvrant JavaScript, CSS et HTML.
### Composants clés
- **Contenu éducatif** : 24 leçons structurées organisées en modules basés sur des projets
- **Projets pratiques** : Terrarium, Jeu de frappe, Extension de navigateur, Jeu spatial, Application bancaire, Éditeur de code, et Assistant de chat IA
- **Contenu éducatif** : 24 leçons structurées organisées en modules basés sur des projets
- **Projets pratiques** : Terrarium, Jeu de dactylographie, Extension de navigateur, Jeu spatial, Application bancaire, Éditeur de code, et Assistant de chat IA
- **Quiz interactifs** : 48 quiz avec 3 questions chacun (évaluations avant/après chaque leçon)
- **Support multilingue** : Traductions automatisées pour plus de 50 langues via GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommandé pour les apprenants
- Cours additionnels : IA générative, Science des données, ML, IoT disponibles
### Travailler avec des projets spécifiques
Pour des instructions détaillées sur les projets individuels, consultez les fichiers README dans :
- `quiz-app/README.md` - application quiz Vue 3
- `7-bank-project/README.md` - application bancaire avec authentification
- `5-browser-extension/README.md` - développement d’extension navigateur
- `6-space-game/README.md` - développement de jeu Canvas
- `9-chat-project/README.md` - projet assistant chat IA
Pour des instructions détaillées sur des projets individuels, consultez les README dans :
- `quiz-app/README.md` - Application quiz Vue 3
- `7-bank-project/README.md` - Application bancaire avec authentification
- `5-browser-extension/README.md` - Développement d’extension navigateur
- `6-space-game/README.md` - Développement de jeu canvas
- `9-chat-project/README.md` - Projet d’assistant de chat IA
### Structure Monorepo
Bien que ce ne soit pas un monorepo traditionnel, ce référentiel contient plusieurs projets indépendants :
- Chaque leçon est autonome
- Les projets ne partagent pas de dépendances
- Travaillez sur des projets individuels sans impacter les autres
- Clonez le référentiel complet pour l’expérience complète du programme
Bien que ce ne soit pas un monorepo traditionnel, ce dépôt contient plusieurs projets indépendants :
- Chaque leçon est autonome
- Les projets ne partagent pas les dépendances
- Travaillez sur des projets individuels sans affecter les autres
- Clonez le dépôt complet pour une expérience complète du programme
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant autorité. Pour les informations critiques, une traduction professionnelle humaine est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.
**Clause de non-responsabilité** :
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue native doit être considéré comme la source faisant autorité. Pour des informations critiques, une traduction professionnelle humaine est recommandée. Nous ne sommes pas responsables des malentendus ou des interprétations erronées résultant de l’utilisation de cette traduction.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
[](https://discord.gg/nTYy5BXMWG)
# Développement Web pour Débutants - Un Programme
Apprenez les fondamentaux du développement web avec notre cours complet de 12 semaines conçu par les Défenseurs du Cloud Microsoft. Chacune des 24 leçons explore JavaScript, CSS et HTML à travers des projets pratiques comme des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, des discussions et des exercices pratiques. Améliorez vos compétences et optimisez votre rétention des connaissances grâce à notre pédagogie efficace basée sur des projets. Commencez votre apprentissage du code dès aujourd'hui !
Apprenez les fondamentaux du développement web avec notre cours complet de 12 semaines par les Microsoft Cloud Advocates. Chacune des 24 leçons explore JavaScript, CSS et HTML à travers des projets pratiques tels que des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, discussions et exercices pratiques. Améliorez vos compétences et optimisez votre rétention des connaissances grâce à notre pédagogie efficace basée sur des projets. Commencez votre parcours de programmation dès aujourd’hui !
Rejoignez la Communauté Azure AI Foundry sur Discord
Rejoignez le Discord Azure AI Foundry et rencontrez des experts et autres développeurs.
[](https://discord.gg/nTYy5BXMWG)
Suivez ces étapes pour commencer à utiliser ces ressources :
1. **Faites un fork du dépôt** : Cliquez sur [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clonez le dépôt** :`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Rejoignez le Discord Azure AI Foundry et rencontrez des experts ainsi que d'autres développeurs**](https://discord.com/invite/ByRwuEEgH4)
Suivez ces étapes pour commencer à utiliser ces ressources :
1. **Forkez le Dépôt** : Cliquez sur [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clonez le Dépôt** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Rejoignez le Discord Azure AI Foundry et rencontrez experts et développeurs**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Support Multilingue
#### Pris en charge via GitHub Action (Automatisé et Toujours à Jour)
#### Pris en charge via GitHub Action (Automatisé & Toujours à jour)
> Ce dépôt comprend plus de 50 traductions, ce qui augmente significativement la taille du téléchargement. Pour cloner sans les traductions, utilisez le checkout sparse :
>
> **Bash / macOS / Linux :**
> **Préférez cloner localement ?**
>
> Ce dépôt inclut plus de 50 traductions de langues ce qui augmente significativement la taille du téléchargement. Pour cloner sans traductions, utilisez le sparse checkout :
> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images"
> ```
>
> Cela vous donne tout ce dont vous avez besoin pour suivre le cours avec un téléchargement beaucoup plus rapide.
>
> Cela vous fournit tout ce dont vous avez besoin pour compléter le cours avec un téléchargement beaucoup plus rapide.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Si vous souhaitez que d'autres langues de traduction soient prises en charge, elles sont listées [ici](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Si vous souhaitez d’autres traductions, les langues supportées sont listées ici. [ici](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Êtes-vous étudiant ?_
#### 🧑🎓 _Vous êtes étudiant ?_
Visitez la [**page Hub Étudiant**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) où vous trouverez des ressources pour débutants, des packs pour étudiants et même des moyens d'obtenir un bon de certificat gratuit. C’est la page que vous voudrez mettre en favori et consulter régulièrement car son contenu est mis à jour chaque mois.
Visitez la [**page du Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) où vous trouverez des ressources pour débutants, des packs étudiants et même des moyens pour obtenir un bon de certificat gratuit. C’est la page à mettre en favori et à consulter de temps en temps car le contenu change chaque mois.
### 📣 Annonce - Nouveaux défis en mode GitHub Copilot Agent à compléter !
### 📣 Annonce - Nouveaux défis du mode GitHub Copilot Agent à compléter !
Nouveau défi ajouté, cherchez le "Défi GitHub Copilot Agent 🚀" dans la plupart des chapitres. C’est un nouveau défi à compléter en utilisant GitHub Copilot et le mode Agent. Si vous n'avez jamais utilisé le mode Agent, il est capable non seulement de générer du texte, mais aussi de créer et modifier des fichiers, exécuter des commandes et plus encore.
Nouveau défi ajouté, recherchez « GitHub Copilot Agent Challenge 🚀 » dans la plupart des chapitres. C’est un nouveau défi à réaliser avec GitHub Copilot et le mode Agent. Si vous n’avez jamais utilisé le mode Agent auparavant, il peut non seulement générer du texte, mais aussi créer et modifier des fichiers, exécuter des commandes, et plus encore.
### 📣 Annonce - _Nouveau projet à construire en utilisant l’IA générative_
### 📣 Annonce - _Nouveau projet à construire avec l’IA générative_
Nouveau projet Assistant IA ajouté, consultez le [projet](./9-chat-project/README.md)
Nouveau projet Assistant IA ajouté, découvrez-le [projet](./9-chat-project/README.md)
### 📣 Annonce - _Nouveau programme_ sur l’IA générative pour JavaScript vient d’être publié
@ -73,138 +73,142 @@ Ne manquez pas notre nouveau programme sur l’IA générative !
Visitez [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pour commencer !
Chaque leçon comprend un devoir à réaliser, un contrôle de connaissances et un défi pour vous guider dans l’apprentissage de sujets comme :
- Le prompt et l’ingénierie du prompt
- La génération d’applications texte et image
- Les applications de recherche
Chaque leçon inclut un exercice à réaliser, une vérification des connaissances et un défi pour vous guider dans l’apprentissage de sujets tels que :
- La formulation de requêtes et l’ingénierie de prompts
- La génération d’applications de texte et d’image
- Les applications de recherche
Visitez [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pour commencer !
## 🌱 Pour commencer
> **Enseignants**, nous avons [inclus quelques suggestions](for-teachers.md) sur comment utiliser ce programme. Nous attendons vos retours [dans notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) !
**[Apprenants](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pour chaque leçon, commencez par un quiz pré-conférence puis lisez le contenu de la conférence, complétez les diverses activités et vérifiez votre compréhension via le quiz post-conférence.
## 🌱 Pour Bien Commencer
> **Enseignants**, nous avons [inclus quelques suggestions](for-teachers.md) sur comment utiliser ce programme. Nous aimerions avoir vos retours [sur notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) !
**[Apprenants](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pour chaque leçon, commencez par un quiz avant la leçon et poursuivez en lisant le matériel, en réalisant les différentes activités puis vérifiez votre compréhension avec le quiz après la leçon.
Pour améliorer votre expérience d’apprentissage, connectez-vous avec vos pairs pour travailler ensemble sur les projets ! Les discussions sont encouragées sur notre [forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) où notre équipe de modérateurs sera disponible pour répondre à vos questions.
Pour approfondir vos connaissances, nous recommandons vivement d’explorer [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pour des supports d’étude supplémentaires.
Pour approfondir votre formation, nous recommandons vivement d’explorer [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pour des ressources complémentaires.
### 📋 Configuration de votre environnement
Ce programme dispose d’un environnement de développement prêt à l’emploi ! Pour démarrer, vous pouvez choisir d’exécuter le programme dans un [Codespace](https://github.com/features/codespaces/) (_un environnement basé sur navigateur, sans installation nécessaire_), ou localement sur votre ordinateur avec un éditeur de texte comme [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Ce programme dispose d’un environnement de développement prêt à l’emploi ! Dès le début, vous pouvez choisir d’exécuter le programme dans un [Codespace](https://github.com/features/codespaces/) (_un environnement dans le navigateur, sans installation nécessaire_), ou localement sur votre ordinateur en utilisant un éditeur de texte comme [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Créez votre dépôt
Pour sauvegarder facilement votre travail, il est recommandé de créer votre propre copie de ce dépôt. Vous pouvez le faire en cliquant sur le bouton **Use this template** en haut de la page. Cela créera un nouveau dépôt dans votre compte GitHub avec une copie du programme.
Pour sauvegarder facilement votre travail, il est recommandé de créer votre propre copie de ce dépôt. Vous pouvez le faire en cliquant sur le bouton **Utiliser ce modèle** en haut de la page. Cela créera un nouveau dépôt dans votre compte GitHub avec une copie du programme.
Suivez ces étapes :
1. **Faites un fork du dépôt** : Cliquez sur le bouton "Fork" en haut à droite de cette page.
2. **Clonez le dépôt** :`git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Suivez ces étapes :
1. **Forkez le Dépôt** : Cliquez sur le bouton « Fork » en haut à droite de cette page.
2. **Clonez le Dépôt** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Exécuter le programme dans un Codespace
Dans votre copie de ce dépôt, cliquez sur le bouton **Code** puis sélectionnez **Open with Codespaces**. Cela créera un nouveau Codespace pour que vous puissiez travailler.
Dans votre copie de ce dépôt que vous avez créée, cliquez sur le bouton **Code** puis sélectionnez **Ouvrir avec Codespaces**. Cela créera un nouveau Codespace pour vous permettre de travailler.
#### Exécuter le programme localement sur votre ordinateur
Pour exécuter ce programme localement, vous aurez besoin d’un éditeur de texte, d’un navigateur et d’un outil en ligne de commande. Notre première leçon, [Introduction aux langages de programmation et outils du métier](../../1-getting-started-lessons/1-intro-to-programming-languages), vous guidera à travers diverses options pour chacun de ces outils afin que vous puissiez choisir ce qui vous convient le mieux.
Pour exécuter ce programme localement sur votre ordinateur, vous aurez besoin d’un éditeur de texte, d’un navigateur et d’un outil en ligne de commande. Notre première leçon, [Introduction aux langages de programmation et outils du métier](../../1-getting-started-lessons/1-intro-to-programming-languages), vous guidera à travers différentes options pour chacun de ces outils afin que vous choisissiez ce qui vous convient le mieux.
Nous recommandons l’utilisation de [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) comme éditeur, qui inclut également un [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) intégré. Vous pouvez télécharger Visual Studio Code [ici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clonez votre dépôt sur votre ordinateur. Vous pouvez le faire en cliquant sur le bouton **Code** et en copiant l’URL :
Nous recommandons d’utiliser [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) comme éditeur, qui dispose également d’un [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) intégré. Vous pouvez télécharger Visual Studio Code [ici](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clonez votre dépôt sur votre ordinateur. Vous pouvez le faire en cliquant sur le bouton **Code** et en copiant l'URL :
[CodeSpace](./images/createcodespace.png)
Ensuite, ouvrez [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dans [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) et exécutez la commande suivante, en remplaçant `<your-repository-url>` par l'URL que vous venez de copier :
Ensuite, ouvrez [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dans [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) et exécutez la commande suivante, en remplaçant `<your-repository-url>` par l’URL que vous venez de copier :
```bash
git clone <your-repository-url>
```
2. Ouvrez le dossier dans Visual Studio Code. Vous pouvez le faire en cliquant sur **Fichier** > **Ouvrir le dossier** et en sélectionnant le dossier que vous venez de cloner.
2. Ouvrez le dossier dans Visual Studio Code. Vous pouvez le faire en cliquant sur **Fichier** > **Ouvrir un dossier** et en sélectionnant le dossier que vous venez de cloner.
> Extensions Visual Studio Code recommandées :
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pour prévisualiser les pages HTML dans Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pour vous aider à écrire du code plus rapidement
> Extensions Visual Studio Code recommandées :
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pour prévisualiser les pages HTML dans Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - pour vous aider à coder plus rapidement
## 📂 Chaque leçon comprend :
- sketchnote optionnelle
- sketchnote optionnel
- vidéo complémentaire optionnelle
- quiz d’échauffement avant la leçon
- leçon écrite
- pour les leçons basées sur un projet, des guides étape par étape pour construire le projet
> **Une note à propos des quiz** : Tous les quiz sont contenus dans le dossier Quiz-app, avec 48 quiz au total de trois questions chacun. Ils sont disponibles [ici](https://ff-quizzes.netlify.app/web/) ; l’application de quiz peut être exécutée localement ou déployée sur Azure ; suivez les instructions dans le dossier `quiz-app`.
> **Une note concernant les quiz** : Tous les quiz se trouvent dans le dossier Quiz-app, 48 quiz au total avec trois questions chacun. Ils sont disponibles [ici](https://ff-quizzes.netlify.app/web/) ; l’application de quiz peut être lancée localement ou déployée sur Azure ; suivez les instructions dans le dossier `quiz-app`.
## 🗃️ Leçons
| | Nom du Projet | Concepts Enseignés | Objectifs d’Apprentissage | Leçon Associée | Auteur |
| 01 | Premiers Pas | Introduction à la Programmation et Outils du Métier | Apprendre les bases communes à la plupart des langages de programmation et sur les logiciels qui aident les développeurs pros | [Introduction aux langages de programmation et aux outils](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Premiers Pas | Bases de GitHub, y compris le travail en équipe | Comment utiliser GitHub dans votre projet et collaborer avec d’autres sur une base de code | [Introduction à GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Premiers Pas | Accessibilité | Apprendre les bases de l’accessibilité web | [Fondamentaux de l’accessibilité](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Bases JS | Types de données en JavaScript | Les bases des types de données en JavaScript | [Types de données](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Bases JS | Fonctions et Méthodes | Apprendre les fonctions et méthodes pour gérer le flux logique d’une application | [Fonctions et Méthodes](./2-js-basics/2-functions-methods/README.md) | Jasmine et Christopher |
| 06 | Bases JS | Prise de décisions avec JS | Apprendre à créer des conditions dans votre code grâce aux méthodes de prise de décisions | [Prise de décisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Bases JS | Tableaux et Boucles | Travailler avec les données en utilisant tableaux et boucles en JavaScript | [Tableaux et boucles](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML en Pratique | Construire le HTML pour créer un terrarium en ligne, en se concentrant sur la création d’une mise en page | [Introduction au HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS en Pratique | Construire le CSS pour styliser le terrarium en ligne, en se concentrant sur les bases du CSS y compris le rendu responsive | [Introduction au CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Fermetures JavaScript, manipulation DOM | Écrire le JavaScript pour rendre le terrarium fonctionnel en tant qu’interface drag/drop, en se concentrant sur les closures et DOM | [Closures JS, manipulation DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Jeu de frappe](./4-typing-game/solution/README.md) | Construire un jeu de frappe | Apprendre à utiliser les événements clavier pour piloter la logique de votre application JavaScript | [Programmation événementielle](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extension Navigateur Vert](./5-browser-extension/solution/README.md) | Travailler avec les navigateurs | Découvrir comment fonctionnent les navigateurs, leur histoire, et comment initier les premiers éléments d’une extension | [À propos des navigateurs](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extension Navigateur Vert](./5-browser-extension/solution/README.md) | Construire un formulaire, appeler une API et stocker localement | Construire les éléments JavaScript de votre extension navigateur pour appeler une API en utilisant des variables en stockage local | [APIs, formulaires et stockage local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extension Navigateur Vert](./5-browser-extension/solution/README.md) | Processus en arrière-plan dans le navigateur, performance web | Utiliser les processus en arrière-plan du navigateur pour gérer l’icône de l’extension ; apprendre la performance web et optimisations | [Tâches en arrière-plan et performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jeu Spatial](./6-space-game/solution/README.md) | Développement avancé de jeu avec JavaScript | Apprendre l’héritage utilisant classes et composition ainsi que le pattern Pub/Sub, en préparation au développement d’un jeu | [Introduction au développement avancé](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jeu Spatial](./6-space-game/solution/README.md) | Dessiner sur Canvas | Découvrir l’API Canvas, utilisée pour dessiner des éléments sur écran | [Dessiner sur Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jeu Spatial](./6-space-game/solution/README.md) | Déplacer des éléments à l’écran | Découvrir comment les éléments peuvent se déplacer avec les coordonnées cartésiennes et l’API Canvas | [Déplacer des éléments](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jeu Spatial](./6-space-game/solution/README.md) | Détection de collisions | Faire entrer en collision les éléments et réagir grâce aux pressions de touches, avec une fonction de refroidissement pour la performance | [Détection de collisions](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu Spatial](./6-space-game/solution/README.md) | Gestion du score | Effectuer des calculs mathématiques basés sur le statut et la performance du jeu | [Gestion du score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu Spatial](./6-space-game/solution/README.md) | Fin et redémarrage du jeu | Apprendre à terminer et redémarrer une partie, y compris le nettoyage des ressources et la réinitialisation des variables | [La condition de fin](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Application bancaire](./7-bank-project/solution/README.md) | Templates HTML et Routes dans une application web | Apprendre à créer l’ossature d’un site web multipages avec routage et templates HTML | [Templates HTML et Routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Application bancaire](./7-bank-project/solution/README.md) | Construire un formulaire de connexion et d'inscription | Apprendre la construction de formulaires et la gestion des validations | [Formulaires](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Application bancaire](./7-bank-project/solution/README.md) | Méthodes pour récupérer et utiliser les données | Comment les données entrent et sortent de votre application, comment les récupérer, stocker et gérer | [Données](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application bancaire](./7-bank-project/solution/README.md) | Concepts de gestion d’état | Comprendre comment votre application conserve l’état et comment le gérer par programmation | [Gestion d’état](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Code Navigateur/VScode](../../8-code-editor) | Travailler avec VScode | Apprendre à utiliser un éditeur de code | [Utiliser l’éditeur de code VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistants IA](./9-chat-project/README.md) | Travailler avec l’IA | Apprendre à créer votre propre assistant IA | [Projet Assistant IA](./9-chat-project/README.md) | Chris |
| | Nom du Projet | Concepts Enseignés | Objectifs d’apprentissage | Leçon liée | Auteur |
| 01 | Premiers pas | Introduction à la programmation et aux outils du métier | Découvrez les bases communes à la plupart des langages de programmation et les logiciels qui aident les développeurs professionnels dans leur travail | [Intro aux langages de programmation et outils](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Premiers pas | Notions de base de GitHub, y compris travail en équipe | Apprenez à utiliser GitHub dans vos projets, comment collaborer avec d’autres sur une base de code | [Introduction à GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Premiers pas | Accessibilité | Apprenez les bases de l’accessibilité web | [Fondamentaux de l’accessibilité](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | Types de données JavaScript | Les bases des types de données en JavaScript | [Types de données](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Fonctions et méthodes | Apprenez les fonctions et méthodes pour gérer le flux logique d’une application | [Fonctions et méthodes](./2-js-basics/2-functions-methods/README.md) | Jasmine et Christopher |
| 06 | JS Basics | Prise de décisions avec JS | Apprenez à créer des conditions dans votre code en utilisant les méthodes de prise de décision | [Prise de décisions](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Tableaux et boucles | Manipulez des données avec des tableaux et des boucles en JavaScript | [Tableaux et boucles](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML en pratique | Construisez le HTML pour créer un terrarium en ligne, en vous concentrant sur la création d’une mise en page | [Introduction au HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS en pratique | Construisez le CSS pour styliser le terrarium en ligne, en vous concentrant sur les bases du CSS dont la responsivité de la page | [Introduction au CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Fermetures JavaScript, manipulation du DOM | Construisez le JavaScript pour rendre le terrarium fonctionnel avec une interface glisser-déposer, en vous concentrant sur les fermetures et la manipulation du DOM | [Fermetures JavaScript, manipulation du DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Construire un jeu de frappe | Apprenez à utiliser les événements clavier pour diriger la logique de votre application JavaScript | [Programmation événementielle](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extension de navigateur verte](./5-browser-extension/solution/README.md) | Travailler avec les navigateurs | Apprenez le fonctionnement des navigateurs, leur histoire, et comment créer les premiers éléments d’une extension de navigateur | [À propos des navigateurs](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extension de navigateur verte](./5-browser-extension/solution/README.md) | Construire un formulaire, appeler une API et stocker des variables dans le stockage local | Construisez les éléments JavaScript de votre extension de navigateur pour appeler une API en utilisant des variables stockées localement | [APIs, formulaires et stockage local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extension de navigateur verte](./5-browser-extension/solution/README.md) | Processus d’arrière-plan dans le navigateur, performance web | Utilisez les processus d’arrière-plan du navigateur pour gérer l’icône de l’extension ; apprenez la performance web et des optimisations pour l’améliorer | [Tâches de fond et performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jeu spatial](./6-space-game/solution/README.md) | Développement de jeux avancé avec JavaScript | Apprenez l’héritage utilisant à la fois les classes et la composition ainsi que le modèle Pub/Sub, en préparation à la création d’un jeu | [Introduction au développement avancé de jeux](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jeu spatial](./6-space-game/solution/README.md) | Dessiner sur le canevas | Découvrez l’API Canvas, utilisée pour dessiner des éléments à l’écran | [Dessiner sur le canevas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jeu spatial](./6-space-game/solution/README.md) | Déplacer des éléments à l’écran | Découvrez comment déplacer des éléments en utilisant les coordonnées cartésiennes et l’API Canvas | [Déplacer des éléments](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jeu spatial](./6-space-game/solution/README.md) | Détection de collision | Faites collisionner les éléments et réagir mutuellement avec des pressions sur les touches et fournissez une fonction de temps de récupération pour assurer une bonne performance du jeu | [Détection de collision](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu spatial](./6-space-game/solution/README.md) | Tenue du score | Effectuez des calculs mathématiques en fonction du statut et de la performance du jeu | [Tenue du score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu spatial](./6-space-game/solution/README.md) | Fin et redémarrage du jeu | Apprenez à terminer et redémarrer le jeu, y compris nettoyer les ressources et réinitialiser les variables | [La condition de fin](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Application bancaire](./7-bank-project/solution/README.md) | Modèles HTML et routes dans une application web | Apprenez à créer la structure d’un site web multipage avec routage et modèles HTML | [Modèles HTML et routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Application bancaire](./7-bank-project/solution/README.md) | Créer un formulaire de connexion et d’inscription | Apprenez à construire des formulaires et gérer les routines de validation | [Formulaires](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Application bancaire](./7-bank-project/solution/README.md) | Méthodes pour récupérer et utiliser des données | Comment les données entrent et sortent de votre application, comment les récupérer, stocker et éliminer | [Données](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application bancaire](./7-bank-project/solution/README.md) | Concepts de gestion d’état | Apprenez comment votre application conserve son état et comment le gérer programmatiquement | [Gestion d’état](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Code navigateur/VScode](../../8-code-editor) | Travailler avec VScode | Apprenez à utiliser un éditeur de code | [Utiliser l’éditeur de code VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Assistants IA](./9-chat-project/README.md) | Travailler avec l’IA | Apprenez à construire votre propre assistant IA | [Projet assistant IA](./9-chat-project/README.md) | Chris |
## 🏫 Pédagogie
Notre programme est conçu autour de deux principes pédagogiques clés :
* apprentissage par projets
* quiz fréquents
Notre programme est conçu autour de deux principes pédagogiques clés :
* apprentissage par projet
* quiz fréquents
Le programme enseigne les fondamentaux de JavaScript, HTML et CSS, ainsi que les outils et techniques actuels utilisés par les développeurs web. Les étudiants auront l’occasion de développer une expérience pratique en construisant un jeu de frappe, un terrarium virtuel, une extension de navigateur écologique, un jeu de type space-invader et une application bancaire pour les entreprises. À la fin de la série, les étudiants auront acquis une compréhension solide du développement web.
Le programme enseigne les fondamentaux du JavaScript, HTML et CSS, ainsi que les outils et techniques les plus récents utilisés par les développeurs web d’aujourd’hui. Les étudiants auront l’opportunité de développer une expérience pratique en construisant un jeu de frappe, un terrarium virtuel, une extension de navigateur écologique, un jeu de type space-invader, et une application bancaire pour entreprises. À la fin de la série, les étudiants auront acquis une solide compréhension du développement web.
> 🎓 Vous pouvez suivre les premières leçons de ce programme comme un [parcours d’apprentissage](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sur Microsoft Learn !
> 🎓 Vous pouvez suivre les premières leçons de ce programme en tant que [Parcours d’apprentissage](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) sur Microsoft Learn !
En veillant à ce que les contenus correspondent aux projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est renforcée. Nous avons également rédigé plusieurs leçons d’introduction aux bases de JavaScript pour présenter les concepts, accompagnées d’une vidéo de la collection de tutoriels vidéo "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", dont certains auteurs ont contribué à ce programme.
En alignant le contenu sur des projets, le processus est rendu plus attrayant pour les étudiants et la rétention des concepts est améliorée. Nous avons aussi créé plusieurs leçons de base en JavaScript pour introduire les concepts, associées à une vidéo de la collection de tutoriels vidéo "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", dont certains auteurs ont contribué à ce programme.
De plus, un quiz à enjeu faible avant le cours oriente l’intention de l’étudiant vers l’apprentissage d’un sujet, tandis qu’un second quiz après le cours garantit une meilleure rétention. Ce programme a été conçu pour être flexible et ludique et peut être suivi en totalité ou en partie. Les projets commencent petits et deviennent de plus en plus complexes à la fin du cycle de 12 semaines.
De plus, un quiz à faible enjeu avant la classe prépare l’intention d’apprentissage de l’étudiant sur un sujet, tandis qu’un second quiz après la classe assure une meilleure rétention. Ce programme est conçu pour être flexible et ludique et peut être suivi en totalité ou en partie. Les projets commencent petits et deviennent de plus en plus complexes à la fin du cycle de 12 semaines.
Bien que nous ayons volontairement évité d’introduire des frameworks JavaScript pour nous concentrer sur les compétences de base nécessaires en tant que développeur web avant d’adopter un framework, une bonne étape suivante pour compléter ce programme serait d’apprendre Node.js via une autre collection de vidéos : "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Bien que nous ayons délibérément évité d’introduire des frameworks JavaScript afin de nous concentrer sur les compétences de base nécessaires avant l’adoption d’un framework, une bonne étape suivante serait d’apprendre Node.js via une autre collection de vidéos : "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Consultez notre [Code de conduite](CODE_OF_CONDUCT.md) et nos directives de [contribution](CONTRIBUTING.md). Vos retours constructifs sont les bienvenus !
> Consultez nos directives [Code de conduite](CODE_OF_CONDUCT.md) et [Contribution](CONTRIBUTING.md). Nous accueillons vos retours constructifs !
## 🧭 Accès hors ligne
Vous pouvez consulter cette documentation hors ligne en utilisant [Docsify](https://docsify.js.org/#/). Forkez ce dépôt, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine locale, puis dans le dossier racine de ce dépôt, tapez `docsify serve`. Le site sera servi sur le port 3000 sur votre localhost : `localhost:3000`.
Vous pouvez exécuter cette documentation hors ligne en utilisant [Docsify](https://docsify.js.org/#/). Forkez ce dépôt, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine locale, puis dans le dossier racine de ce dépôt, tapez `docsify serve`. Le site web sera servi sur le port 3000 de votre localhost : `localhost:3000`.
## 📘 PDF
Un PDF de toutes les leçons est disponible [ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -216,51 +220,51 @@ Notre équipe produit d'autres cours ! Découvrez :
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://aka.ms/langchain4j-for-beginners)
[](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin)
[](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/AZD-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/edgeai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mcp-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/ai-agents-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série IA générative
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst)
[-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst)
[-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9)](https://github.com/microsoft/generative-ai-with-javascript?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
### Apprentissage fondamental
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/Security-101?WT.mc_id=academic-96948-sayoung)
[](https://aka.ms/webdev-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/iot-beginners?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/xr-development-for-beginners?WT.mc_id=academic-105485-koreyst)
---
### Série Copilot
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst)
[](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst)
Si vous êtes bloqué ou avez des questions sur la création d'applications d'IA, rejoignez d'autres apprenants et développeurs expérimentés dans les discussions sur MCP. C'est une communauté de soutien où les questions sont les bienvenues et où les connaissances sont librement partagées.
Si vous êtes bloqué ou si vous avez des questions sur la création d'applications d'IA. Rejoignez d'autres apprenants et développeurs expérimentés pour discuter de MCP. C'est une communauté bienveillante où les questions sont les bienvenues et le savoir est partagé librement.
@ -272,5 +276,5 @@ Ce dépôt est sous licence MIT. Consultez le fichier [LICENSE](../../LICENSE) p
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue native doit être considéré comme la source faisant foi. Pour des informations cruciales, une traduction professionnelle humaine est recommandée. Nous ne sommes pas responsables des malentendus ou des interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatisée [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue natale doit être considéré comme la source faisant foi. Pour des informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées découlant de l’utilisation de cette traduction.
## 🎥 Vidéo
## [Quiz avant le cours](../../../lesson-template/quiz-url)
> Ajoutez une vidéo intégrée ou un lien vers la leçon ici.
[Décrire ce que nous allons apprendre]
---
## Quiz pré-lecture
> Ajoutez un lien vers un quiz ici lorsqu'il est disponible.
---
Fournissez un aperçu bref de ce que les étudiants apprendront dans cette leçon.
---
### Introduction
Décrire ce qui sera abordé
Fournissez une courte introduction décrivant ce qui sera couvert dans cette leçon.
> Notes
---
### Prérequis
Quelles étapes devraient avoir été couvertes avant cette leçon ?
Listez les concepts ou sujets que les étudiants doivent déjà connaître avant de commencer cette leçon.
---
### Préparation
Étapes préparatoires pour commencer cette leçon
Listez les étapes d'installation ou les outils requis avant de commencer la leçon.
---
[Parcourir le contenu par blocs]
### Contenu
Déroulez le contenu de la leçon en sections structurées.
## [Sujet 1]
---
## Sujet 1
### Tâche :
@ -34,21 +52,28 @@ Travaillez ensemble pour améliorer progressivement votre base de code afin de c
code blocks
```
✅ Vérification des connaissances - utilisez ce moment pour élargir les connaissances des étudiants avec des questions ouvertes
✅ Vérification des connaissances
Profitez de ce moment pour tester les connaissances des étudiants avec des questions ouvertes.
## [Sujet 2]
## Sujet 2
## Sujet 3
## [Sujet 3]
🚀 Défi
Ajoutez un défi collaboratif pour que les étudiants améliorent le projet.
🚀 Défi : Ajoutez un défi pour que les étudiants travaillent ensemble en classe afin d'améliorer le projet
Optionnel : Ajoutez une capture d'écran de l'interface utilisateur de la leçon terminée si cela est pertinent.
Optionnel : ajoutez une capture d'écran de l'interface utilisateur de la leçon terminée si cela est pertinent
## Quiz post-lecture
## [Quiz après le cours](../../../lesson-template/quiz-url)
Ajoutez un lien vers un quiz ici après avoir terminé la leçon.
## Révision & Étude personnelle
## Revue & Auto-apprentissage
**Devoir à rendre [MM/AA]** : [Nom du devoir](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour les informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous déclinons toute responsabilité en cas de malentendus ou d’interprétations erronées résultant de l’utilisation de cette traduction.
localizeflow[bot]
2 weeks ago