@ -275,6 +275,6 @@ This repository is licensed under the MIT license. See the [LICENSE](../../LICEN
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**:
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.
**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 curricular educativo para enseñar los fundamentos del desarrollo web a principiantes. El plan de estudios es un curso completo 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 fundamentos del desarrollo web a principiantes. El currículo es un curso comprensivo de 12 semanas desarrollado por Microsoft Cloud Advocates, que cuenta con 24 lecciones prácticas cubriendo JavaScript, CSS y HTML.
### Componentes Clave
- **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 pre/postlección)
- **Soporte Multilingüe**: Traducciones automatizadas en más de 50 idiomas mediante GitHub Actions
- **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/post-lección)
- **Soporte Multilenguaje**: Traducciones automáticas para más de 50 idiomas mediante GitHub Actions
- Ejecuta desde el directorio raíz del repositorio
- Confirma que existe `docs/_sidebar.md`
### Consejos para el Entorno de Desarrollo
- Usar VS Code con extensión Live Server para proyectos HTML
- Instalar extensiones ESLint y Prettier para formato consistente
- Usar herramientas de desarrollador del navegador para depurar JavaScript
- Para proyectos Vue, instalar extensión Vue DevTools para navegador
- Usa VS Code con la extensión Live Server para proyectos HTML
- Instala extensiones ESLint y Prettier para formato consistente
- Usa las DevTools del navegador para depurar JavaScript
- Para proyectos Vue, instala la extensión de navegador Vue DevTools
### Consideraciones de Rendimiento
- Gran número de archivos traducidos (50+ idiomas) hace que los clones completos sean pesados
- Usar clonación superficial si solo se trabaja con contenido: `git clone --depth 1`
- Excluir traducciones de búsquedas cuando se trabaja en contenido en inglés
- Procesos de construcción pueden ser lentos en ejecución inicial (npm install, construcción Vite)
- Gran cantidad de archivos traducidos (más de 50 idiomas) hace que los clones completos sean grandes
- Usa clonación superficial si solo trabajas con contenido: `git clone --depth 1`
- Excluye traducciones de búsquedas cuando trabajes con contenido en inglés
- Los procesos de build pueden ser lentos en la primera ejecución (npm install, build con Vite)
## Consideraciones de Seguridad
### Variables de Entorno
- Las claves API nunca deben incluirse en el repositorio
- Usar archivos `.env` (ya incluidos en `.gitignore`)
- Documentar las variables de entorno requeridas en los README de los proyectos
- Las claves API nunca deberían ser comprometidas en el repositorio
- Usa archivos `.env` (ya en `.gitignore`)
- Documenta las variables de entorno requeridas en los README de proyectos
### Proyectos en Python
### Proyectos Python
- Usar entornos virtuales: `python -m venv venv`
- Mantener dependencias actualizadas
- Los tokens de GitHub deben tener permisos mínimos necesarios
- Usa entornos virtuales: `python -m venv venv`
- Mantén dependencias actualizadas
- Los tokens de GitHub deben tener permisos mínimos requeridos
### Acceso a GitHub Models
- Se requieren Tokens de Acceso Personal (PAT) para GitHub Models
- Los tokens se deben guardar como variables de entorno
- Nunca se deben subir tokens ni credenciales al repositorio
- Se requieren Personal Access Tokens (PAT) para GitHub Models
- Guarda los tokens como variables de entorno
- Nunca cometas tokens ni credenciales
## Notas Adicionales
### Público Objetivo
- Principiantes completos en desarrollo web
- Estudiantes y autoaprendices
- Profesores usando el plan de estudios en aulas
- Contenido diseñado para accesibilidad y construcción gradual de habilidades
- Principiantes absolutos en desarrollo web
- Estudiantes y autodidactas
- Profesores usando el currículo en aulas
- Contenido diseñado para accesibilidad y desarrollo gradual de habilidades
### Filosofía Educativa
- Enfoque basado en aprendizaje por proyectos
- Evaluaciones frecuentes de conocimiento (cuestionarios)
- Enfoque de aprendizaje basado en proyectos
- Revisiones frecuentes de conocimientos (cuestionarios)
- Ejercicios prácticos de codificación
- Ejemplos aplicados del mundo real
- Enfoque en fundamentos antes que en frameworks
- Ejemplos de aplicación en el mundo real
- Enfoque en fundamentos antes de frameworks
### Mantenimiento del Repositorio
- Comunidad activa de aprendices y colaboradores
- Actualizaciones regulares de dependencias y contenido
- Issues y discusiones monitoreadas por mantenedores
- Actualizaciones de traducción automatizadas con GitHub Actions
- Actualizaciones regulares de dependencias y contenidos
- Monitoreo de issues y discusiones por mantenedores
- Actualizaciones de traducción automatizadas mediante GitHub Actions
### Recursos Relacionados
- [Módulos de Microsoft Learn](https://docs.microsoft.com/learn/)
- [Recursos de Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [Recursos del Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recomendado para estudiantes
- Cursos adicionales: IA generativa, Ciencia de Datos, ML, IoT disponibles
- Cursos adicionales: Currículos de IA generativa, Ciencia de Datos, ML, IoT disponibles
### Trabajando con Proyectos Específicos
### Trabajo con Proyectos Específicos
Para instrucciones detalladas sobre proyectos individuales, consulte 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 con Canvas
- `9-chat-project/README.md` - Proyecto asistente de chat con IA
Para instrucciones detalladas sobre proyectos individuales, consulta los archivos README en:
- `quiz-app/README.md` - aplicación de quiz 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 con canvas
- `9-chat-project/README.md` - proyecto asistente de chat con IA
### Estructura Monorepo
Aunque no es un monorepo tradicional, este repositorio contiene múltiples proyectos independientes:
- Cada lección es autónoma
- Cada lección es autocontenida
- Los proyectos no comparten dependencias
- Se puede trabajar en proyectos individuales sin afectar otros
- Clonar el repositorio completo para la experiencia completa del plan de estudios
- Trabaja en proyectos individuales sin afectar otros
- Clona el repositorio completo para la experiencia completa del currículo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso legal**:
Este documento ha sido traducido utilizando el servicio de traducción AI [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 realizada por humanos. No nos hacemos responsables de ningún malentendido o mala interpretación derivada 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 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 la traducción profesional humana. No nos hacemos responsables de malentendidos o interpretaciones erróneas que surjan 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 eficaz pedagogí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 conocimiento con nuestra efectiva metodología basada en proyectos. ¡Comienza tu viaje de codificación hoy!
Únete a la Comunidad Azure AI Foundry en Discord
@ -21,18 +21,18 @@ Aprende los fundamentos del desarrollo web con nuestro curso integral de 12 sema
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 expertos y compañeros desarrolladores**](https://discord.com/invite/ByRwuEEgH4)
3. [**Únete al Azure AI Foundry Discord y conoce a expertos y otros desarrolladores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Soporte Multilingüe
### 🌐 Soporte Multilenguaje
#### Soportado vía GitHub Action (Automatizado y Siempre Actualizado)
> Este repositorio incluye más de 50 traducciones que aumentan significativamente el tamaño de la descarga. Para clonar sin traducciones, usa sparse checkout:
> 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:
>
> **Bash / macOS / Linux:**
> ```bash
@ -51,62 +51,62 @@ Sigue estos pasos para comenzar a usar estos recursos:
> Esto te da 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 traducciones están listados [aquí](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _¿Eres estudiante?_
Visita la [**página del Centro de Estudiantes**](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 voucher gratuito para certificación. Esta es la página que debes guardar en favoritos y revisar periódicamente, ya que actualizamos 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 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.
### 📣 Anuncio - ¡Nuevos desafíos de modo Agente de GitHub Copilot para completar!
### 📣 Anuncio - ¡Nuevos desafíos del modo Agente GitHub Copilot para completar!
Nuevo desafío añadido, busca "GitHub Copilot Agent Challenge 🚀" en la mayoría de los capítulos. Es un nuevo reto para que lo 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 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.
### 📣 Anuncio - _Nuevo Proyecto para construir usando IA Generativa_
### 📣 Anuncio - _Nuevo proyecto para construir usando IA Generativa_
Nuevo proyecto de asistente de IA añadido, échale un vistazo [proyecto](./9-chat-project/README.md)
Nuevo proyecto Asistente AI añadido, échale un vistazo [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!
¡No te pierdas nuestro nuevo currículo de IA Generativa!
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar.
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar!
Cada lección incluye una tarea para completar, una verificación de conocimiento y un desafío para guiarte en temas como:
- Solicitudes y diseño de prompts
- Generación de aplicaciones de texto e imágenes
- Aplicaciones de búsqueda
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
- Generación de apps de texto e imagen
- Apps de búsqueda
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar.
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar!
## 🌱 Comenzando
## 🌱 Primeros Pasos
> **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 a la clase y continúen leyendo el material de la lección, completando las diversas actividades y verificando 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, 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.
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 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 continuar tu educación, recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para encontrar materiales de estudio adicionales.
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.
### 📋 Configurando tu entorno
¡Este currículo tiene un entorno de desarrollo listo para usar! Al comenzar, puedes elegir ejecutar el currículo en un [Codespace](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 computadora usando un editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crea tu repositorio
Para que sea fácil guardar tu trabajo, se recomienda crear tu propia copia de este repositorio. Puedes hacerlo haciendo clic en el botón **Usar esta plantilla** en la parte superior de la página. Esto creará un nuevo repositorio en tu cuenta de GitHub con una copia del currículo.
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.
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.
@ -114,16 +114,16 @@ Sigue estos pasos:
#### Ejecutando el currículo en un Codespace
En tu copia del repositorio que creaste, haz clic en el botón **Code** y selecciona **Open with Codespaces**. Esto creará un nuevo Codespace para que trabajes.
En tu copia de este repositorio que creaste, haz clic en el botón **Code** y selecciona **Open with Codespaces**. Esto creará un nuevo Codespace para que trabajes.
#### Ejecutando el currículo localmente en tu computadora
Para ejecutar este currículo localmente en tu computadora, necesitarás un editor de texto, un navegador y una herramienta de línea de comandos. Nuestra primera lección, [Introducción a los Lenguajes de Programación y Herramientas del Oficio](../../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 funcione mejor para ti.
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.
Nuestra recomendación es usar [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) como editor, que también tiene una [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrada. 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:
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:
[CodeSpace](./images/createcodespace.png)
@ -133,88 +133,88 @@ 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 hacerlo 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 **File** > **Open Folder** y seleccionando la carpeta que acabas de clonar.
> Extensiones recomendadas de Visual Studio Code:
> Extensiones recomendadas de 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:
- sketchnote opcional
- nota gráfica opcional
- video complementario opcional
- cuestionario de calentamiento previo a la lección
- cuestionario de calentamiento antes de la lección
- lección escrita
- para lecciones basadas en proyectos, guías paso a paso para construir el proyecto
- para lecciones basadas en proyectos, guías paso a paso sobre cómo construir el proyecto
- verificaciones de conocimiento
- un desafío
- lectura complementaria
- asignación
- 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, con un total de 48 cuestionarios de 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, 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`.
## 🗃️ Lecciones
| | Nombre del Proyecto | Conceptos Enseñados | Objetivos de Aprendizaje | Lección Vinculada | Autor |
| 01 | Primeros Pasos | Introducción a la programación y herramientas del oficio | Aprende los fundamentos básicos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a los desarrolladores profesionales a hacer su trabajo | [Introducción a los Lenguajes de Programación y Herramientas del Oficio](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Primeros Pasos | Fundamentos de GitHub, incluye trabajo en equipo | Cómo usar GitHub en tu proyecto, cómo colaborar con otros en una base de código | [Introducción a GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Primeros Pasos | Accesibilidad | Aprende los fundamentos de la accesibilidad web | [Fundamentos de Accesibilidad](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Conceptos Básicos de JS | Tipos de datos en JavaScript | Lo básico sobre tipos de datos en JavaScript | [Tipos de Datos](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Conceptos Básicos de 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 | Conceptos Básicos de JS | Tomando decisiones con JS | Aprende a crear condiciones en tu código usando métodos de toma de decisiones | [Tomando Decisiones](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Conceptos Básicos de 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 Práctica | Construye el HTML para crear un terrario en línea, enfocándote 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 Práctica | Construye el CSS para dar estilo al terrario en línea, enfocándote en lo básico de CSS incluyendo cómo 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 que el terrario funcione como una interfaz de arrastrar y soltar, enfocándote en closures y manipulación del DOM | [Closures en JavaScript, manipulación del DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Juego de mecanografía](./4-typing-game/solution/README.md) | Construye un juego de mecanografía | Aprende a usar eventos de teclado para dirigir la lógica de tu aplicación JavaScript | [Programación basada en eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensión de navegador verde](./5-browser-extension/solution/README.md) |Trabajando con navegadores | Aprende cómo funcionan los navegadores, su historia y cómo estructurar los primeros elementos de una extensión del navegador | [Acerca de los navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensión de navegador verde](./5-browser-extension/solution/README.md) | Construcción de formularios, llamada a API y almacenamiento local | Construye los elementos JavaScript de tu extensión de navegador para llamar una API usando variables almacenadas en almacenamiento local | [APIs, formularios y almacenamiento local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensión de navegador verde](./5-browser-extension/solution/README.md) | Procesos en segundo plano del navegador, rendimiento web | Usa los procesos en segundo plano del navegador para gestionar el ícono de la extensión; aprende sobre rendimiento web y algunas optimizaciones | [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 avanzado de juegos con JavaScript | Aprende sobre herencia usando tanto clases como composición y el patrón Pub/Sub, en preparación para construir un juego | [Introducción al desarrollo avanzado de juegos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Juego espacial](./6-space-game/solution/README.md) | Dibujando en canvas| Aprende sobre la API Canvas, usada para dibujar elementos en pantalla | [Dibujando en Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Juego espacial](./6-space-game/solution/README.md) | Moviendo elementos en la pantalla | Descubre cómo los elementos pueden ganar movimiento usando coordenadas cartesianas y la API Canvas | [Moviendo 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 teclas 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) | Mantenimiento de puntuación | Realiza cálculos matemáticos basados en el estado y rendimiento del juego | [Mantenimiento de puntuación](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Juego espacial](./6-space-game/solution/README.md) | Terminando y reiniciando el juego | Aprende sobre finalizar y reiniciar el juego, incluyendo limpiar recursos y resetear valores de variables | [La condición de finalización](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [App bancaria](./7-bank-project/solution/README.md) | Plantillas HTML y rutas en una aplicación web | Aprende cómo crear la estructura de arquitectura 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 | [App bancaria](./7-bank-project/solution/README.md) | Construcción de formularios 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 | [App bancaria](./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 deshacerse de ellos | [Datos](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [App bancaria](./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 | [Gestión de estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código Editor Browser/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 de IA](./9-chat-project/README.md) | Trabajando con IA | Aprende cómo construir tu propio asistente de IA | [Proyecto de Asistente de IA](./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 | 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 |
## 🏫 Pedagogía
Nuestro plan de estudios está diseñado con dos principios pedagógicos clave en mente:
Nuestro currículo está diseñado con dos principios pedagógicos clave en mente:
* aprendizaje basado en proyectos
* cuestionarios frecuentes
El programa enseña los fundamentos de JavaScript, HTML y CSS, así como las últimas herramientas y técnicas usadas por los desarrolladores web actuales. Los estudiantes tendrán la oportunidad de 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 app 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 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.
> 🎓 ¡Puedes tomar las primeras lecciones de este plan de estudios como un [Camino 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 una [ruta 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 esté alineado con proyectos, el proceso se vuelve más atractivo para los estudiantes y se potenciará la retención de conceptos. También escribimos varias lecciones introductorias sobre conceptos básicos de JavaScript para introducir conceptos, acompañadas por un video de la colección de tutoriales en video "[Serie para principiantes de: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", algunos de cuyos autores contribuyeron a este plan de estudios.
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.
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 mayor retención. Este plan se diseñó para ser flexible y divertido y puede realizarse completo o en parte. Los proyectos comienzan pequeños y se vuelven cada vez más complejos al finalizar el ciclo de 12 semanas.
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.
Aunque hemos evitado intencionadamente introducir frameworks de JavaScript para centrarnos en las habilidades básicas necesarias como desarrollador web antes de adoptar un framework, un buen siguiente paso después de completar este plan sería aprender sobre Node.js a través de otra colección de videos: "[Serie para principiantes de: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
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)".
> ¡Visita nuestras pautas de [Código de Conducta](CODE_OF_CONDUCT.md) y [Contribución](CONTRIBUTING.md)! ¡Esperamos tus comentarios constructivos!
> Visita nuestras guías 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 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`.
## 📘 PDF
Un PDF de todas las lecciones se puede encontrar [aquí](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Otros cursos
## 🎒 Otros Cursos
¡Nuestro equipo produce otros cursos! Mira:
@ -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 / Agentes
### 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)
@ -241,7 +241,7 @@ Un PDF de todas las lecciones se puede encontrar [aquí](https://microsoft.githu
---
### Aprendizaje básico
### Aprendizaje Básico
[](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)
@ -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 crear aplicaciones de IA. Únete a otros estudiantes y desarrolladores experimentados en discusiones sobre MCP. Es una comunidad solidaria donde las preguntas son bienvenidas y el conocimiento se comparte libremente.
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.
Este repositorio está bajo la licencia MIT. Consulta el archivo [LICENSE](../../LICENSE) para más información.
Este repositorio está licenciado bajo la 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 la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de malentendidos o interpretaciones erróneas derivadas 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 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.
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 Microsoft Cloud Advocates, comprenant 24 leçons pratiques couvrant JavaScript, CSS et HTML.
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.
### 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
- **Support multilingue** : Traductions automatisées pour plus de 50 langues via GitHub Actions
- **Projets pratiques** : Terrarium, jeu de frappe, 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 les leçons)
- **Support multilingue** : traductions automatisées en 50+ langues via GitHub Actions
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) recommandé pour les apprenants
- Cours supplémentaires : IA générative, Data Science, ML, cursus IoT disponibles
- Cours supplémentaires : IA générative, Data Science, ML, IoT disponibles
### Travailler avec des projets spécifiques
### Travail 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 de navigateur
- `6-space-game/README.md` - Développement de jeu sur Canvas
- `9-chat-project/README.md` - Projet d'assistant de chat IA
- `quiz-app/README.md` - application de quiz Vue 3
- `7-bank-project/README.md` - application bancaire avec authentification
- `5-browser-extension/README.md` - développement d’extension de navigateur
- `6-space-game/README.md` - développement de jeu basé sur Canvas
- `9-chat-project/README.md` - projet d’assistant de chat IA
### Structure du monorepo
### 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 leurs dépendances
- Travaillez sur des projets individuels sans impacter les autres
- Clonez le référentiel complet pour une expérience complète du programme
- Clonez le référentiel complet pour l’expérience du programme complet
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l'aide du service de traduction IA [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 humaine est recommandée. Nous ne sommes pas responsables des malentendus ou mauvaises interprétations 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 efforçons 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 autorité. Pour les informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous ne sommes pas responsables des malentendus ou des erreurs d’interprétation résultant de l’utilisation de cette traduction.
Apprenez les fondamentaux du développement web avec notre cours complet de 12 semaines proposé par les Microsoft Cloud Advocates. 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 devoirs pratiques. Améliorez vos compétences et optimisez la rétention de vos connaissances grâce à notre pédagogie efficace basée sur les projets. Commencez votre parcours de codage dès aujourd'hui !
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 !
Rejoignez la communauté Azure AI Foundry sur Discord
Rejoignez la Communauté Azure AI Foundry sur Discord
Suivez ces étapes pour commencer à utiliser ces ressources :
1. **Bifurquez le Référentiel** : Cliquez sur [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clonez le Référentiel** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Rejoignez l'Azure AI Foundry Discord pour rencontrer des experts et d'autres développeurs**](https://discord.com/invite/ByRwuEEgH4)
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)
### 🌐 Support Multilingue
#### Pris en charge via GitHub Action (Automatisé & Toujours à Jour)
#### Pris en charge via GitHub Action (Automatisé et Toujours à Jour)
> Ce référentiel inclut plus de 50 traductions de langues, ce qui augmente considérablement la taille du téléchargement. Pour cloner sans les traductions, utilisez un "sparse checkout" :
>
> **Bash / macOS / Linux :**
> **Vous préférez cloner localement ?**
>
> 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 :
> 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 donne tout ce dont vous avez besoin pour suivre le cours avec un téléchargement beaucoup plus rapide.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Si vous souhaitez avoir d'autres langues de traduction 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 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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Êtes-vous étudiant(e) ?_
#### 🧑🎓 _Êtes-vous étudiant ?_
Visitez la [**page 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 d’obtenir un bon de réduction pour un certificat gratuit. C’est la page que vous voulez mettre en favori et consulter de temps en temps, car nous changeons le contenu chaque mois.
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.
### 📣 Annonce - Nouveaux défis du mode GitHub Copilot Agent à compléter !
### 📣 Annonce - Nouveaux défis en mode GitHub Copilot Agent à compléter !
Nouveau défi ajouté, cherchez "GitHub Copilot Agent Challenge 🚀" dans la plupart des chapitres. C’est un nouveau défi à relever 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é, 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.
### 📣 Annonce - _Nouveau projet à construire avec l’IA Générative_
### 📣 Annonce - _Nouveau projet à construire en utilisant l’IA générative_
Nouveau projet d’assistant IA ajouté, découvrez-le [projet](./9-chat-project/README.md)
Nouveau projet Assistant IA ajouté, consultez le [projet](./9-chat-project/README.md)
### 📣 Annonce - _Nouveau programme_ sur l’IA Générative pour JavaScript vient d’être publié
### 📣 Annonce - _Nouveau programme_ sur l’IA générative pour JavaScript vient d’être publié
Ne manquez pas notre nouveau programme sur l’IA Générative !
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 des connaissances et un défi pour vous guider sur des thèmes tels que :
- Le prompting et l'ingénierie de prompt
- La génération d’applications textuelles et imagées
- Les applications de recherche
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
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) !
## 🌱 Pour Commencer
> **Enseignants**, nous avons [inclus quelques suggestions](for-teachers.md) sur la façon d’utiliser ce programme. Nous aimerions avoir votre retour [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 pré-lecture puis poursuivez avec la lecture du matériel de cours, la réalisation des diverses activités et vérifiez votre compréhension avec le quiz post-lecture.
**[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 améliorer votre expérience d’apprentissage, connectez-vous avec vos pairs pour travailler ensemble sur les projets ! Les discussions sont encouragées dans 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 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 votre formation, nous recommandons fortement d’explorer [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pour des matériaux d’étude supplémentaires.
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.
### 📋 Configuration de votre environnement
Ce programme dispose d’un environnement de développement prêt à l’emploi ! Lors de vos débuts, vous pouvez choisir d’exécuter le programme dans un [Codespace](https://github.com/features/codespaces/) (_un environnement basé sur navigateur, sans besoin d’installation_), ou localement sur votre ordinateur en utilisant un éditeur de texte tel que [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 ! 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).
#### Créez votre répertoire
Pour pouvoir sauvegarder facilement votre travail, il est recommandé de créer votre propre copie de ce répertoire. Vous pouvez le faire en cliquant sur le bouton **Use this template** en haut de la page. Cela créera un nouveau répertoire dans votre compte GitHub avec une copie du programme.
#### 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.
Suivez ces étapes :
1. **Bifurquez le Référentiel** : Cliquez sur le bouton "Fork" en haut à droite de cette page.
2. **Clonez le Référentiel** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
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`
#### Exécuter le programme dans un Codespace
Dans votre copie de ce répertoire que vous avez créée, cliquez sur le bouton **Code** et sélectionnez **Open with Codespaces**. Cela créera un nouveau Codespace dans lequel vous pourrez travailler.
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.
#### Exécuter le programme localement sur votre ordinateur
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 plusieurs options pour chacun de ces outils afin que vous puissiez choisir ce qui vous convient le mieux.
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.
Nous recommandons d’utiliser [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) comme éditeur, qui possède également un [Terminal intégré](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). 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 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 :
[CodeSpace](./images/createcodespace.png)
@ -133,7 +130,7 @@ Nous recommandons d’utiliser [Visual Studio Code](https://code.visualstudio.co
git clone <your-repository-url>
```
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.
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.
> Extensions Visual Studio Code recommandées :
@ -141,73 +138,73 @@ Nous recommandons d’utiliser [Visual Studio Code](https://code.visualstudio.co
> * [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
## 📂 Chaque leçon inclut :
## 📂 Chaque leçon comprend :
- sketchnote optionnel
- vidéo supplémentaire optionnelle
- sketchnote optionnelle
- vidéo complémentaire optionnelle
- quiz d’échauffement avant la leçon
- leçon écrite
- pour les leçons basées sur un projet, guides étape par étape pour construire le projet
- vérifications de connaissances
- pour les leçons basées sur un projet, des guides étape par étape pour construire le projet
> **Une note au sujet des quiz** : Tous les quiz sont regroupés dans le dossier Quiz-app, avec un total de 48 quiz composés chacun de trois questions. 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 à 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`.
## 🗃️ Leçons
| | Nom du projet | Concepts enseignés | Objectifs d’apprentissage | Leçon liée | Auteur |
| 01 | Prise en main | Introduction à la programmation et aux outils du métier | Apprenez les bases communes à la plupart des langages de programmation et sur les logiciels qui aident les développeurs professionnels | [Introduction aux langages de programmation et outils du métier](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Prise en main | Bases de GitHub, y compris travailler en équipe | Comment utiliser GitHub dans votre projet,comment collaborer avec d’autres sur une base de code | [Introduction à GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Prise en main | Accessibilité| Apprenez 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 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 | 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 | Bases JS | Prise de décision 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 | Bases JS | Tableaux et boucles | Travaillez avec les données en utilisant les tableaux et les 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 de la mise en page | [Introduction à 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, y compris rendre la page responsive | [Introduction à 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 en tant qu’interface drag/drop, 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 | [Jeu de frappe](./4-typing-game/solution/README.md) | Construire un jeu de frappe | Apprenez à 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 de navigateur verte](./5-browser-extension/solution/README.md) | Travailler avec les navigateurs | Apprenez comment fonctionnent les navigateurs, leur histoire, et comment structurer 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 en local storage | Construisez les éléments JavaScript de votre extension de navigateur pour appeler une API en utilisant des variables stockées en local storage | [API, 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 | [Tâches d’arrière-plan et performances](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jeu spatial](./6-space-game/solution/README.md) | Développement de jeu plus avancé avec JavaScript | Apprenez l’héritage avec Classes et Composition ainsi que le pattern Pub/Sub, en préparation à la création d’un jeu | [Introduction au développement de jeu avancé](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jeu spatial](./6-space-game/solution/README.md) | Dessin sur canvas | Apprenez l’API Canvas, utilisée pour dessiner des éléments sur un écran| [Dessin 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écouvrez comment les éléments peuvent se déplacer en utilisant les coordonnées cartésiennes et l’API Canvas | [Déplacement 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 se percuter et réagir les éléments en utilisant les pressions de touches et fournissez une fonction de temps de recharge pour assurer les performances du jeu | [Détection de collision](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu spatial](./6-space-game/solution/README.md) | Tenir le score | Effectuez des calculs mathématiques basés sur le statut et les performances du jeu | [Tenir le score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu spatial](./6-space-game/solution/README.md) | Terminer et relancer le jeu | Apprenez à terminer et relancer 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) | Templates HTML et routes dans une application web | Apprenez à créer l’ossature de l’architecture d’un site multipage en utilisant le routage et les modèles 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 | 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 de récupération et d’utilisation des données | Comment les données entrent et sortent de votre application, comment les récupérer, les stocker et les é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 l’état et comment le gérer par programmation | [Gestion d’état](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Navigateur/Editeur 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 IA | Apprenez à 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 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 |
## 🏫 Pédagogie
Notre programme est conçu selon deux principes pédagogiques clés :
* apprentissage par projet
Notre programme est conçu autour de deux principes pédagogiques clés :
* apprentissage par projets
* quiz fréquents
Le programme enseigne les fondamentaux de 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é d’acquérir une expérience pratique en créant 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.
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 cursus sous forme de [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 assurant que le contenu est aligné sur des projets, l’apprentissage devient plus engageant pour les étudiants et la rétention des concepts est améliorée. Nous avons également rédigé plusieurs leçons d’introduction aux bases de JavaScript pour présenter 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.
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.
En outre, un quiz à faible enjeu avant un cours fixe l’intention de l’étudiant pour l’apprentissage d’un sujet, tandis qu'un second quiz après le cours assure une meilleure rétention. Ce programme a été conçu pour être flexible et amusant, il peut être suivi dans sa 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 délibérément é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 prochaine étape après ce cursus 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)".
> Visitez nos [Règles de conduite](CODE_OF_CONDUCT.md) et [Contribuer](CONTRIBUTING.md). Nous accueillons vos retours constructifs !
> 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 de votre localhost : `localhost:3000`.
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`.
## 📘 PDF
Un PDF de toutes les leçons est disponible [ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
@ -215,7 +212,7 @@ Un PDF de toutes les leçons est disponible [ici](https://microsoft.github.io/We
## 🎒 Autres cours
Notre équipe produit d’autres cours ! Découvrez :
Notre équipe produit d'autres cours ! Découvrez :
<!-- CO-OP TRANSLATOR OTHER COURSES START -->
### LangChain
@ -232,7 +229,7 @@ Notre équipe produit d’autres cours ! Découvrez :
---
### Série IA Générative
### 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)
@ -240,14 +237,14 @@ Notre équipe produit d’autres cours ! Découvrez :
---
### Apprentissage Fondamental
### Apprentissage de base
[](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)
[](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)
---
@ -257,23 +254,23 @@ Notre équipe produit d’autres cours ! Découvrez :
Si vous êtes bloqué ou si vous avez des questions sur la création d’applications IA. Rejoignez d’autres apprenants et des développeurs expérimentés dans des discussions sur MCP. C’est une communauté solidaire où les questions sont les bienvenues et où les connaissances sont librement partagées.
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.
Ce dépôt est sous licence MIT. Consultez le fichier [LICENSE](../../LICENSE) pour plus d’informations.
Ce dépôt est sous licence MIT. Consultez le fichier [LICENSE](../../LICENSE) pour plus d'informations.
---
<!-- 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 efforçons 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.
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.
localizeflow[bot]
3 months ago