@ -215,7 +215,7 @@ Our team produces other courses! Check out:
### 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)
Dies ist ein Bildungsrepository, das Grundlagen der Webentwicklung für Anfänger vermittelt. Der Lehrplan ist ein umfassender 12-wöchiger Kurs, der von den Microsoft Cloud Advocates entwickelt wurde und 24 praxisorientierte Lektionen zu JavaScript, CSS und HTML umfasst.
Dies ist ein Bildungs-Curriculum-Repository zum Erlernen der Grundlagen der Webentwicklung für Anfänger. Das Curriculum ist ein umfassender 12-Wochen-Kurs, der von Microsoft Cloud Advocates entwickelt wurde und 24 praxisorientierte Lektionen zu JavaScript, CSS und HTML umfasst.
### Hauptkomponenten
- **Bildungsinhalte**: 24 strukturierte Lektionen, organisiert in projektbasierte Module
- `6-space-game/README.md` - Spielentwicklung mit Canvas
- `9-chat-project/README.md` - KI Chat-Assistent Projekt
### Monorepo-Struktur
Obwohl kein traditionelles Monorepo, enthält dieses Repository mehrere unabhängige Projekte:
Obwohl kein klassisches Monorepo, enthält dieses Repository mehrere unabhängige Projekte:
- Jede Lektion ist eigenständig
- Projekte teilen keine Abhängigkeiten
- Arbeiten Sie an einzelnen Projekten, ohne andere zu beeinflussen
- Klonen Sie das gesamte Repository für das vollständige Curriculum-Erlebnis
- Arbeit an einzelnen Projekten ohne Beeinträchtigung anderer möglich
- Komplettes Repository klonen für das volle Curriculum-Erlebnis
---
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Haftungsausschluss**:
Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, bitten wir zu beachten, dass automatische Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.
Lernen Sie die Grundlagen der Webentwicklung mit unserem 12-wöchigen umfassenden Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen taucht in JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browsererweiterungen und Weltraumspiele ein. Nehmen Sie an Quizzen, Diskussionen und praktischen Aufgaben teil. Verbessern Sie Ihre Fähigkeiten und optimieren Sie Ihre Wissensspeicherung mit unserer effektiven projektbasierten Pädagogik. Starten Sie noch heute Ihre Programmierreise!
Lernen Sie die Grundlagen der Webentwicklung mit unserem 12-wöchigen umfassenden Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen taucht tief in JavaScript, CSS und HTML ein durch praxisnahe Projekte wie Terrarien, Browsererweiterungen und Weltraumspiele. Nehmen Sie teil an Quizzen, Diskussionen und praktischen Aufgaben. Verbessern Sie Ihre Fähigkeiten und optimieren Sie Ihre Wissensaufnahme mit unserer effektiven, projektbasierten Didaktik. Starten Sie noch heute Ihre Programmierreise!
Treten Sie der Azure AI Foundry Discord Community bei
Befolgen Sie diese Schritte, um mit diesen Ressourcen zu starten:
1. **Forken Sie das Repository**: Klicken Sie auf [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
Folgen Sie diesen Schritten, um diese Ressourcen zu nutzen:
1. **Forken Sie das Repository**: Klicken Sie [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Klonen Sie das Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Treten Sie dem Azure AI Foundry Discord bei und treffen Sie Experten und andere Entwickler**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Mehrsprachige Unterstützung
#### Unterstützt durch GitHub Action (Automatisch & Immer auf dem neuesten Stand)
#### Unterstützt durch GitHub Action (Automatisiert & Immer Aktuell)
> Dieses Repository enthält über 50 Sprachübersetzungen, was die Downloadgröße erheblich erhöht. Um ohne Übersetzungen zu klonen, verwenden Sie SparseCheckout:
> Dieses Repository enthält über 50 Sprachübersetzungen, was die Downloadgröße erheblich erhöht. Um ohne Übersetzungen zu klonen, verwenden Sie Sparse-Checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Damit erhalten Sie alles, was Sie für den Abschluss des Kurses benötigen, mit einem viel schnelleren Download.
> Damit erhalten Sie alles, was Sie zum Abschluss des Kurses benötigen, mit einem viel schnelleren Download.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Wenn Sie weitere Übersetzungen wünschen, sind unterstützte Sprachen [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) aufgelistet**
**Wenn Sie möchten, dass zusätzliche Übersetzungssprachen unterstützt werden, sind diese [hier](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md) aufgelistet**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Sind Sie ein Student?_
#### 🧑🎓 _Sind Sie Student?_
Besuchen Sie die [**Student Hub-Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), auf der Sie Einstiegsressourcen, Studentensets und sogar Möglichkeiten finden, einen kostenlosen Zertifikatsgutschein zu erhalten. Dies ist die Seite, die Sie als Lesezeichen setzen und von Zeit zu Zeit überprüfen sollten, da wir monatlich Inhalte austauschen.
Besuchen Sie die [**Student Hub-Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), auf der Sie Anfängerressourcen, Studentenkits und sogar Möglichkeiten finden, einen kostenlosen Zertifikat-Gutschein zu erhalten. Dies ist die Seite, die Sie als Lesezeichen speichern und von Zeit zu Zeit überprüfen sollten, da wir monatlich Inhalte austauschen.
### 📣 Ankündigung - Neue GitHub Copilot Agent Mode Herausforderungen zu meistern!
### 📣 Ankündigung - Neue GitHub Copilot Agent Modus Herausforderungen zum Abschließen!
Neue Herausforderung hinzugefügt, suchen Sie in den meisten Kapiteln nach "GitHub Copilot Agent Challenge 🚀". Das ist eine neue Herausforderung für Sie, die Sie mit GitHub Copilot und dem Agent-Modus abschließen können. Wenn Sie den Agent-Modus noch nicht benutzt haben, kann dieser nicht nur Text generieren, sondern auch Dateien erstellen und bearbeiten, Befehle ausführen und mehr.
Neue Herausforderung hinzugefügt, suchen Sie nach "GitHub Copilot Agent Challenge 🚀" in den meisten Kapiteln. Das ist eine neue Herausforderung, die Sie mit GitHub Copilot und dem Agent Modus abschließen können. Wenn Sie den Agent-Modus noch nicht verwendet haben, kann dieser nicht nur Text generieren, sondern auch Dateien erstellen und bearbeiten, Befehle ausführen und mehr.
### 📣 Ankündigung - _Neues Projekt mit Generativer KI bauen_
### 📣 Ankündigung - _Neues Projekt zum Bauen mit Generativer KI_
Neues AI Assistant-Projekt gerade hinzugefügt, sehen Sie sich das [Projekt](./9-chat-project/README.md) an.
Neues AI-Assistent-Projekt gerade hinzugefügt, schauen Sie es sich an [Projekt](./9-chat-project/README.md)
### 📣 Ankündigung - _Neues Curriculum_ zu Generativer KI für JavaScript wurde gerade veröffentlicht
### 📣 Ankündigung - _Neuer Lehrplan_ über Generative KI für JavaScript wurde gerade veröffentlicht
Verpassen Sie nicht unser neues Curriculum für Generative KI!
Verpassen Sie nicht unseren neuen Lehrplan zur Generativen KI!
Besuchen Sie [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) für den Einstieg!
Besuchen Sie [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um zu starten!
Jede Lektion enthält eine Aufgabe zum Abschließen, eine Wissensüberprüfung und eine Herausforderung, die Sie beim Lernen der Themen unterstützt wie:
- Prompting und Prompt Engineering
Jede Lektion enthält eine Aufgabe zur Fertigstellung, eine Wissensüberprüfung und eine Herausforderung, um Sie beim Erlernen von Themen wie:
- Prompting und Prompt-Engineering
- Text- und Bild-App-Generierung
- Such-Apps
Besuchen Sie [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) für den Start!
Besuchen Sie [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course), um zu starten!
## 🌱 Erste Schritte
## 🌱 Loslegen
> **Lehrer**, wir haben [einige Vorschläge](for-teachers.md) zur Nutzung dieses Curriculums eingefügt. Wir würden uns über Ihr Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) freuen!
> **Lehrkräfte**, wir haben [einige Vorschläge](for-teachers.md) für den Einsatz dieses Lehrplans hinzugefügt. Wir freuen uns über Ihr Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Lernende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, beginnen Sie mit jeder Lektion mit einem Quiz vor der Vorlesung und lesen Sie dann das Vorlesungsmaterial, bearbeiten Sie die verschiedenen Aktivitäten und überprüfen Sie Ihr Verständnis mit dem Quiz nach der Vorlesung.
**[Lernende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, beginnen Sie jede Lektion mit einem Quiz vor der Vorlesung und arbeiten Sie dann die Vorlesungsmaterialien durch, erledigen Sie die verschiedenen Aktivitäten und überprüfen Sie Ihr Verständnis mit dem Quiz nach der Vorlesung.
Um Ihr Lernerlebnis zu verbessern, vernetzen Sie sich mit Ihren Mitlernenden, um die Projekte zusammen zu bearbeiten! Diskussionen sind in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) erwünscht, wo unser Moderatorenteam Ihre Fragen beantwortet.
Zur Verbesserung Ihres Lernerlebnisses verbinden Sie sich mit Ihren Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen werden in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) gefördert, wo unser Moderatorenteam Ihre Fragen beantwortet.
Zur Erweiterung Ihrer Bildung empfehlen wir auch, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) für zusätzliche Lernmaterialien zu erkunden.
Um Ihre Ausbildung weiter voranzutreiben, empfehlen wir dringend, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) für zusätzliche Lernmaterialien zu erkunden.
### 📋 Richten Sie Ihre Arbeitsumgebung ein
### 📋 Einrichtung Ihrer Umgebung
Dieses Curriculum hat eine sofort einsatzbereite Entwicklungsumgebung! Sie können wählen, ob Sie das Curriculum in einem [Codespace](https://github.com/features/codespaces/) (_eine browserbasierte Umgebung ohne Installation_) oder lokal auf Ihrem Computer mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen möchten.
Dieser Lehrplan verfügt über eine sofort einsatzbereite Entwicklungsumgebung! Sobald Sie starten, können Sie den Lehrplan in einem [Codespace](https://github.com/features/codespaces/) (_eine browserbasierte Umgebung ohne notwendige Installationen_) oder lokal auf Ihrem Computer mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen.
#### Erstellen Sie Ihr Repository
Um Ihre Arbeit einfach zu speichern, empfehlen wir, eine eigene Kopie dieses Repositories zu erstellen. Dies können Sie tun, indem Sie oben auf der Seite auf die Schaltfläche **Use this template** klicken. Dadurch wird ein neues Repository in Ihrem GitHub-Konto mit einer Kopie des Curriculums erstellt.
Damit Sie Ihre Arbeit leicht speichern können, wird empfohlen, eine eigene Kopie dieses Repositories zu erstellen. Dies können Sie tun, indem Sie oben auf der Seite auf die Schaltfläche **Use this template** klicken. Dadurch wird ein neues Repository in Ihrem GitHub-Konto mit einer Kopie des Lehrplans erstellt.
Folgen Sie diesen Schritten:
1. **Forken Sie das Repository**: Klicken Sie oben rechts auf der Seite auf den „Fork“-Button.
1. **Forken Sie das Repository**: Klicken Sie auf die Schaltfläche "Fork" oben rechts auf dieser Seite.
2. **Klonen Sie das Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Ausführen des Curriculums in einem Codespace
#### Ausführen des Lehrplans in einem Codespace
Klicken Sie in Ihrer erstellten Kopie dieses Repositories auf die Schaltfläche **Code** und wählen Sie **Open with Codespaces**. Dies erstellt einen neuen Codespace, in dem Sie arbeiten können.
In Ihrer erstellten Kopie dieses Repositories klicken Sie auf die Schaltfläche **Code** und wählen **Open with Codespaces**. Dadurch wird für Sie ein neuer Codespace erstellt, in dem Sie arbeiten können.
#### Lokales Ausführen des Curriculums auf Ihrem Computer
#### Ausführen des Lehrplans lokal auf Ihrem Computer
Um diesen Lehrplan lokal auf Ihrem Computer auszuführen, benötigen Sie einen Texteditor, einen Browser und ein Befehlszeilenwerkzeug. Unsere erste Lektion, [Einführung in Programmiersprachen und Werkzeuge der Branche](../../1-getting-started-lessons/1-intro-to-programming-languages), führt Sie durch verschiedene Optionen für jedes dieser Werkzeuge, damit Sie das auswählen können, was am besten zu Ihnen passt.
Um das Curriculum lokal auf Ihrem Computer auszuführen, benötigen Sie einen Texteditor, einen Browser und ein Kommandozeilentool. Unsere erste Lektion, [Einführung in Programmiersprachen und Werkzeuge](../../1-getting-started-lessons/1-intro-to-programming-languages), führt Sie durch verschiedene Optionen für diese Tools, damit Sie das passendste auswählen können.
Unsere Empfehlung ist, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor zu verwenden, das auch ein eingebautes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) besitzt. Sie können Visual Studio Code [hier herunterladen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
Wir empfehlen die Verwendung von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor, der außerdem ein eingebautes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) enthält. Visual Studio Code können Sie [hier herunterladen](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Klonen Sie Ihr Repository auf Ihren Computer. Das können Sie tun, indem Sie auf die **Code**-Schaltfläche klicken und die URL kopieren:
1. Klonen Sie Ihr Repository auf Ihren Computer. Dies können Sie tun, indem Sie auf die **Code**-Schaltfläche klicken und die URL kopieren:
[CodeSpace](./images/createcodespace.png)
Dann öffne [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) innerhalb von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) und führe den folgenden Befehl aus, wobei du `<your-repository-url>` durch die soeben kopierte URL ersetzt:
Öffnen Sie dann innerhalb von [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) das [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) und führen Sie folgenden Befehl aus, wobei Sie `<your-repository-url>` durch die gerade kopierte URL ersetzen:
```bash
git clone <your-repository-url>
```
2. Öffne den Ordner in Visual Studio Code. Dies kannst du tun, indem du auf **Datei** > **Ordner öffnen** klickst und den soeben geklonten Ordner auswählst.
2. Öffnen Sie den Ordner in Visual Studio Code. Dies können Sie tun, indem Sie auf **Datei** > **Ordner öffnen** klicken und den gerade geklonten Ordner auswählen.
> Empfohlene Visual Studio Code Erweiterungen:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) –zum Vorschauen von HTML-Seiten innerhalb von Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – um dir beim schnelleren Schreiben von Code zu helfen
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) – um HTML-Seiten innerhalb von Visual Studio Code anzusehen
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) – um Ihnen zu helfen, schneller Code zu schreiben
## 📂 Jede Lektion beinhaltet:
@ -136,134 +138,134 @@ Dann öffne [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc
- optionales ergänzendes Video
- Aufwärmquiz vor der Lektion
- schriftliche Lektion
- für projektbasierte Lektionen Schritt-für-Schritt-Anleitungen zum Aufbau des Projekts
- Wissenskontrollen
- bei projektbasierten Lektionen Schritt-für-Schritt-Anleitungen zum Erstellen des Projekts
- [Quiz nach der Lektion](https://ff-quizzes.netlify.app/web/)
> **Eine Anmerkung zu den Quizzen**: Alle Quizze befinden sich im Ordner Quiz-app, insgesamt 48 Quizze mit jeweils drei Fragen. Sie sind [hier](https://ff-quizzes.netlify.app/web/) verfügbar. Die Quiz-App kann lokal ausgeführt oder in Azure bereitgestellt werden; folge der Anleitung im Ordner `quiz-app`.
> **Eine Anmerkung zu den Quizzen**: Alle Quizze sind im Ordner Quiz-app enthalten, insgesamt 48 Quizze mit jeweils drei Fragen. Sie sind [hier](https://ff-quizzes.netlify.app/web/) verfügbar. Die Quiz-App kann lokal ausgeführt oder in Azure bereitgestellt werden; folgen Sie den Anweisungen im Ordner `quiz-app`.
| 01 | Erste Schritte | Einführung in Programmierung und Arbeitswerkzeuge | Lerne die grundlegenden Grundlagen der meisten Programmiersprachen und über die Software, die professionelle Entwickler unterstützt | [Einführung in Programmiersprachen und Arbeitswerkzeuge](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Erste Schritte | Grundlagen von GitHub, einschließlich Teamarbeit | Wie man GitHub im Projekt verwendet und wie man mit anderen an einem Codebasis zusammenarbeitet | [Einführung in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Erste Schritte | Barrierefreiheit | Lerne die Grundlagen der Web-Barrierefreiheit | [Grundlagen der Barrierefreiheit](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Grundlagen | JavaScript-Datentypen | Die Grundlagen der JavaScript-Datentypen | [Datentypen](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Grundlagen | Funktionen und Methoden | Lerne Funktionen und Methoden kennen, um den Logikablauf einer Anwendung zu steuern | [Funktionen und Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine und Christopher |
| 06 | JS Grundlagen | Entscheidungen treffen mit JS | Lerne, wie man Bedingungen im Code mit Entscheidungsstrukturen erstellt | [Entscheidungen treffen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Grundlagen | Arrays und Schleifen | Arbeite mit Daten unter Verwendung von Arrays und Schleifen in JavaScript | [Arrays und Schleifen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in der Praxis | Baue das HTML für ein Online-Terrarium, mit Fokus auf Layout-Erstellung | [Einführung in HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in der Praxis | Baue das CSS, um das Online-Terrarium zu stylen, konzentriere dich auf die Grundlagen von CSS einschließlich der responsiven Gestaltung der Seite | [Einführung in CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-Manipulation | Baue das JavaScript, das Terrarium als Drag-and-Drop-Oberfläche funktionsfähig macht, mit Fokus auf Closures und DOM-Manipulation | [JavaScript Closures, DOM-Manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Tipp-Spiel](./4-typing-game/solution/README.md) | Ein Tipp-Spiel bauen | Lerne, wie Tastaturereignisse die Logik deiner JavaScript-App steuern | [Ereignisgesteuerte Programmierung](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Zusammenarbeit mit Browsern | Lerne, wie Browser funktionieren, deren Geschichte und wie man die ersten Elemente einer Browser-Erweiterung erstellt | [Über Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Formular erstellen, API aufrufen und Variablen im lokalen Speicher speichern | Baue die JavaScript-Elemente deiner Browser-Erweiterung, um eine API aufzurufen und verwendete Variablen im lokalen Speicher zu speichern | [APIs, Formulare und lokaler Speicher](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Hintergrundprozesse im Browser, Web-Performance | Nutze die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; lerne über Web-Performance und Optimierungen | [Hintergrundaufgaben und Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Weltraumspiel](./6-space-game/solution/README.md) | Fortgeschrittene Spieleentwicklung mit JavaScript| Lerne Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster kennen, um dich auf den Bau eines Spiels vorzubereiten | [Einführung in die fortgeschrittene Spieleentwicklung](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Weltraumspiel](./6-space-game/solution/README.md) | Zeichnen auf der Leinwand | Lerne die Canvas-API kennen, die zum Zeichnen auf dem Bildschirm verwendet wird | [Zeichnen auf Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Weltraumspiel](./6-space-game/solution/README.md) | Elemente auf dem Bildschirm bewegen | Entdecke, wie Elemente Bewegung mit kartesischen Koordinaten und der Canvas-API bekommen | [Elemente bewegen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Weltraumspiel](./6-space-game/solution/README.md) | Kollisionserkennung | Sorge dafür, dass Elemente miteinander kollidieren und aufeinander reagieren, verwende Tastendrücke und eine Abklingfunktion | [Kollisionserkennung](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Weltraumspiel](./6-space-game/solution/README.md) | Punkte zählen | Führe mathematische Berechnungen basierend auf dem Spielstatus und der Leistung durch | [Punkte zählen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Weltraumspiel](./6-space-game/solution/README.md) | Beenden und Neustarten des Spiels | Lerne das Beenden und Neustarten des Spiels, einschließlich Bereinigung von Ressourcen und Zurücksetzen von Variablenwerten | [Bedingung für das Ende](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-Vorlagen und Routen in einer Webanwendung | Lerne, wie man das Gerüst einer mehrseitigen Website-Architektur mit Routing und HTML-Vorlagen erstellt | [HTML-Vorlagen und Routen](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Ein Login- und Registrierungsformular erstellen | Lerne das Erstellen von Formularen und Validierungsroutinen | [Formulare](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methoden des Abrufens und Nutzens von Daten | Wie Daten in deine App hinein- und herausfließen, wie man sie abruft, speichert und entsorgt | [Daten](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konzepte des Zustandsmanagements | Lerne, wie deine App den Zustand beibehält und wie man ihn programmatisch verwaltet | [Zustandsmanagement](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeiten mit VScode | Lerne, wie man einen Code-Editor benutzt| [Benutzung des VScode Code Editors](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [KI-Assistenten](./9-chat-project/README.md) | Arbeiten mit KI | Lerne, wie du deinen eigenen KI-Assistenten baust | [KI-Assistent-Projekt](./9-chat-project/README.md) | Chris |
| 01 | Einstieg | Einführung in Programmierung und Werkzeuge der Branche | Lernen Sie die grundlegenden Grundlagen der meisten Programmiersprachen und über Software, die professionelle Entwickler unterstützt | [Einführung in Programmierungssprachen und Werkzeuge](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Einstieg | Grundlagen von GitHub, inklusive Teamarbeit | Wie man GitHub im Projekt benutzt, wie man mit anderen an einem Code zusammenarbeitet | [Einführung in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Einstieg | Barrierefreiheit | Lernen Sie die Grundlagen der Barrierefreiheit im Web | [Barrierefreiheitsgrundlagen](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Datentypen | Die Grundlagen der JavaScript-Datentypen | [Datentypen](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Funktionen und Methoden | Lernen Sie über Funktionen und Methoden, um den Ablauf einer Anwendung zu steuern | [Funktionen und Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine und Christopher |
| 06 | JS Basics | Entscheidungen treffen mit JS | Lernen Sie, wie man Bedingungen im Code mit Entscheidungsstrukturen erstellt | [Entscheidungen treffen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays und Schleifen | Arbeiten Sie mit Daten unter Verwendung von Arrays und Schleifen in JavaScript | [Arrays und Schleifen](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML in der Praxis | Erstellen Sie das HTML für ein Online-Terrarium, konzentrieren Sie sich auf das Layout | [Einführung in HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS in der Praxis | Erstellen Sie das CSS zur Gestaltung des Online-Terrariums, mit Fokus auf die Grundlagen von CSS und responsive Gestaltung | [Einführung in CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-Manipulation | Schreiben Sie das JavaScript, um das Terrarium als Drag-&-Drop-Oberfläche nutzbar zu machen, mit Fokus auf Closures und DOM-Manipulation | [JavaScript Closures, DOM-Manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Tippspiel](./4-typing-game/solution/README.md) | Erstellen eines Tipp-Spiels | Lernen Sie, wie Sie Tastatureingaben verwenden, um die Logik Ihrer JavaScript-App zu steuern | [Ereignisgesteuerte Programmierung](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Grüne Browsererweiterung](./5-browser-extension/solution/README.md) | Arbeiten mit Browsern | Lernen Sie, wie Browser funktionieren, deren Geschichte und wie man die ersten Elemente einer Browsererweiterung erstellt | [Über Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Grüne Browsererweiterung](./5-browser-extension/solution/README.md) | Formulare erstellen, API aufrufen und Variablen im lokalen Speicher sichern | Erstellen Sie die JavaScript-Elemente Ihrer Browsererweiterung, um eine API aufzurufen und Variablen im lokalen Speicher zu nutzen | [APIs, Formulare und lokaler Speicher](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Grüne Browsererweiterung](./5-browser-extension/solution/README.md) | Hintergrundprozesse im Browser, Web-Performance | Verwenden Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; erfahren Sie mehr über Web-Performance und Optimierungen | [Hintergrundaufgaben und Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Fortgeschrittene Spieleentwicklung mit JavaScript | Lernen Sie über Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster, als Vorbereitung zum Erstellen eines Spiels | [Einführung in fortgeschrittene Spieleentwicklung](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Zeichnen auf dem Canvas | Lernen Sie die Canvas-API kennen, die verwendet wird, um Elemente auf einem Bildschirm zu zeichnen | [Zeichnen auf Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Bewegung von Elementen auf dem Bildschirm | Entdecken Sie, wie Elemente mit kartesischen Koordinaten und der Canvas-API Bewegung erhalten | [Bewegung von Elementen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Kollisionserkennung | Lassen Sie Elemente kollidieren und aufeinander reagieren, verwenden Sie Tastendrücke und eine Abkühlfunktion, um die Spielperformance zu sichern | [Kollisionserkennung](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Punkte zählen | Führen Sie mathematische Berechnungen basierend auf dem Spielstatus und der Performance durch | [Punkte zählen](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Weltraum-Spiel](./6-space-game/solution/README.md) | Spiel beenden und neu starten | Lernen Sie, wie man das Spiel beendet und neu startet, inklusive Aufräumen von Assets und Zurücksetzen von Variablen | [Die Endbedingung](./6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-Vorlagen und Routen in einer Web-App | Lernen Sie, wie Sie das Gerüst der Architektur einer mehrseitigen Webseite mit Routing und HTML-Vorlagen erstellen | [HTML-Vorlagen und Routen](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](./7-bank-project/solution/README.md) | Erstellen von Login- und Registrierungsformularen | Lernen Sie, wie man Formulare erstellt und Validierungsroutinen handhabt | [Formulare](./7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](./7-bank-project/solution/README.md) | Methoden zum Abrufen und Verwenden von Daten | Wie Daten in Ihre App gelangen, wie man sie abruft, speichert und entsorgt | [Daten](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](./7-bank-project/solution/README.md) | Konzepte des State-Managements | Lernen Sie, wie Ihre App den Zustand behält und wie Sie ihn programmgesteuert verwalten | [State Management](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeiten mit VScode | Lernen Sie, wie man einen Code-Editor benutzt | [VScode Code Editor verwenden](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [KI-Assistenten](./9-chat-project/README.md) | Arbeiten mit KI | Lernen Sie, wie Sie Ihren eigenen KI-Assistenten bauen | [KI-Assistent Projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pädagogik
Unser Lehrplan ist auf zwei wichtige pädagogische Prinzipien ausgerichtet:
Unser Lehrplan wurde mit zwei zentralen pädagogischen Prinzipien entworfen:
* projektbasiertes Lernen
* häufige Quizze
Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Werkzeuge und Techniken, die heutige Webentwickler nutzen. Die Lernenden haben die Möglichkeit, praktische Erfahrungen durch den Bau eines Tipp-Spiels, eines virtuellen Terrariums, einer umweltfreundlichen Browser-Erweiterung, eines Weltraumspiel-Klons im Stil von Space Invaders und einer Banking-App für Unternehmen zu sammeln. Am Ende der Reihe besitzen die Lernenden ein solides Verständnis der Webentwicklung.
Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Werkzeuge und Techniken, die heutige Webentwickler verwenden. Die Teilnehmer haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Tipp-Spiel, ein virtuelles Terrarium, eine umweltfreundliche Browser-Erweiterung, ein Weltraum-Invader-Spiel und eine Banking-App für Unternehmen erstellen. Am Ende der Reihe haben die Teilnehmer ein solides Verständnis für Webentwicklung.
> 🎓 Die ersten Lektionen dieses Lehrplans kannst du als [Lernpfad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) auf Microsoft Learn absolvieren!
> 🎓 Sie können die ersten Lektionen dieses Lehrplans als [Lernpfad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) bei Microsoft Learn absolvieren!
Indem sichergestellt wird, dass die Inhalte mit Projekten verknüpft sind, wird der Prozess für die Lernenden interessanter und das Behalten der Konzepte wird verbessert. Wir haben außerdem mehrere Einstiegslektionen zu den Grundlagen von JavaScript geschrieben, um Konzepte einzuführen, kombiniert mit einem Video aus der Video-Tutorial-Reihe "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", einige der Autoren haben zu diesem Curriculum beigetragen.
Indem sichergestellt wird, dass die Inhalte mit Projekten übereinstimmen, wird der Prozess für Lernende ansprechender gestaltet und das Behalten der Konzepte wird verbessert. Wir haben außerdem mehrere Einstiegslektionen zu den Grundlagen von JavaScript geschrieben, um Konzepte einzuführen, kombiniert mit einem Video aus der Video-Tutorial-Reihe "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", von deren Autoren einige zu diesem Lehrplan beigetragen haben.
Zudem sorgt ein Quiz mit niedrigem Schwierigkeitsgrad vor einer Stunde dafür, dass der Lernende sich gezielt auf ein Thema einstellt, während ein zweites Quiz nach der Stunde das Behalten weiter unterstützt. Dieser Lehrplan wurde flexibel und unterhaltsam gestaltet und kann komplett oder in Teilen durchlaufen werden. Die Projekte beginnen klein und werden bis zum Ende des 12-Wochen-Zyklus zunehmend komplexer.
Zusätzlich setzt ein Quiz mit geringem Risiko vor einer Klasse die Absicht des Lernenden, ein Thema zu lernen, während ein zweites Quiz nach dem Unterricht die weitere Behaltensleistung sicherstellt. Dieser Lehrplan wurde flexibel und unterhaltsam gestaltet und kann komplett oder teilweise verwendet werden. Die Projekte beginnen klein und werden bis zum Ende des 12-wöchigen Zyklus zunehmend komplexer.
Obwohl wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten als Webentwickler vor der Nutzung eines Frameworks zu konzentrieren, wäre ein guter nächster Schritt zur Abrundung dieses Lehrplans das Lernen über Node.js durch eine weitere Videosammlung: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
Während wir bewusst vermieden haben, JavaScript-Frameworks einzuführen, um uns auf grundlegende Fähigkeiten als Webentwickler vor der Einführung eines Frameworks zu konzentrieren, wäre ein guter nächster Schritt nach Abschluss dieses Lehrplans das Lernen über Node.js mit einer weiteren Video-Tutorial-Reihe: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Besuche unsere [Verhaltensregeln](CODE_OF_CONDUCT.md) und [Beiträgerrichtlinien](CONTRIBUTING.md). Wir freuen uns über dein konstruktives Feedback!
> Besuchen Sie unsere [Verhaltensregeln](CODE_OF_CONDUCT.md) und [Beitragsrichtlinien](CONTRIBUTING.md). Wir freuen uns über Ihr konstruktives Feedback!
## 🧭 Offline-Zugriff
Du kannst diese Dokumentation offline nutzen, indem du [Docsify](https://docsify.js.org/#/) verwendest. Forke dieses Repo, [installiere Docsify](https://docsify.js.org/#/quickstart) auf deinem lokalen Rechner und gib dann im Hauptordner dieses Repos den Befehl `docsify serve` ein. Die Website wird auf Port 3000 auf deinem lokalen Host bereitgestellt: `localhost:3000`.
Sie können diese Dokumentation offline mit [Docsify](https://docsify.js.org/#/) ausführen. Forken Sie dieses Repository, [installieren Sie Docsify](https://docsify.js.org/#/quickstart) auf Ihrem lokalen Rechner und tippen Sie im Stammordner dieses Repos `docsify serve`. Die Webseite wird auf Port 3000 Ihres lokalen Hosts bereitgestellt: `localhost:3000`.
## 📘 PDF
Ein PDF aller Lektionen ist [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) verfügbar.
Ein PDF aller Lektionen finden Sie [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Weitere Kurse
Unser Team erstellt weitere Kurse! Schau dir an:
## 🎒 Andere Kurse
Unser Team produziert auch andere Kurse! Schau dir an:
<!-- 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://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)
---
### Generative AI Series
[](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)
### Generative KI-Serie
[](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)
---
### Core Learning
[](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)
### Grundlegendes Lernen
[](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)
---
### Copilot Series
[](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)
Wenn du stecken bleibst oder Fragen zum Erstellen von KI-Apps hast. Schließe dich anderen Lernenden und erfahrenen Entwicklern in Diskussionen über MCP an. Es ist eine unterstützende Gemeinschaft, in der Fragen willkommen sind und Wissen frei geteilt wird.
Wenn du feststeckst oder Fragen zum Erstellen von KI-Anwendungen hast, schließe dich Mitlernenden und erfahrenen Entwicklern in Diskussionen über MCP an. Es ist eine unterstützende Gemeinschaft, in der Fragen willkommen sind und Wissen frei geteilt wird.
Dieses Repository ist unter der MIT-Lizenz lizenziert. Weitere Informationen findest du in der [LICENSE](../../LICENSE)-Datei.
Dieses Repository ist unter der MIT-Lizenz lizenziert. Weitere Informationen findest du in der Datei [LICENSE](../../LICENSE).
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Haftungsausschluss**:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, bitten wir zu beachten, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als verbindliche Quelle anzusehen. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Verwendung dieser Übersetzung entstehen.
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir auf Genauigkeit achten, können automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten. Das Originaldokument in seiner ursprünglichen Sprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Verwendung dieser Übersetzung entstehen.
Este es un repositorio de currículo educativo diseñado para enseñar los fundamentos del desarrollo web a principiantes. El currículo es un curso completo de 12 semanas desarrollado por los 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 de desarrollo web a principiantes. El currículo es un curso completo de 12 semanas desarrollado por Microsoft Cloud Advocates, con 24 lecciones prácticas que cubren JavaScript, CSS y HTML.
### Componentes Clave
- **Contenido Educativo**: 24 lecciones estructuradas organizadas en módulos basados en proyectos
- **Proyectos Prácticos**: Terrario, Juego de Escritura, 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 y después de las lecciones)
- **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 IA
- **Cuestionarios Interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones pre/post 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: Generative AI, Ciencia de Datos, ML, currículos de IoT disponibles
- Cursos adicionales: IA generativa, ciencia de datos, ML, curricula de IoT disponibles
### Trabajando con Proyectos Específicos
### Trabajo con Proyectos Específicos
Para instrucciones detalladas sobre proyectos individuales, consulta los archivos README en:
- `quiz-app/README.md` - Aplicación de cuestionarios en Vue 3
- `quiz-app/README.md` - Aplicación de quizzes en Vue 3
- `7-bank-project/README.md` - Aplicación bancaria con autenticación
- `5-browser-extension/README.md` - Desarrollo de extensiones de navegador
- `6-space-game/README.md` - Desarrollo de juegos basados en Canvas
- `9-chat-project/README.md` - Proyecto de asistente de chat con IA
- `5-browser-extension/README.md` - Desarrollo de extensión de navegador
- `6-space-game/README.md` - Desarrollo de juego basado en canvas
- `9-chat-project/README.md` - Proyecto de asistente de chat IA
### Estructura Monorepo
### Estructura de Monorepo
Aunque no es un monorepo tradicional, este repositorio contiene múltiples proyectos independientes:
- Cada lección es autónoma
- Los proyectos no comparten dependencias
- Trabaja en proyectos individuales sin afectar a otros
- Clona el repositorio completo para la experiencia completa del currículo
- Clona todo el repositorio para la experiencia completa del currículo
---
**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 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 surjan 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 lograr 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 responsabilizamos por ningún malentendido o interpretación errónea que resulte del uso de esta traducción.
# Desarrollo Web para Principiantes - Un Currículo
# Desarrollo Web para Principiantes - Un Plan de Estudios
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 en cuestionarios, discusiones y tareas prácticas. Mejora tus habilidades y optimiza la retención de conocimiento con nuestra pedagógica efectiva basada en proyectos. ¡Comienza tu viaje en la programació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 se sumerge en JavaScript, CSS y HTML a través de proyectos prácticos como terrarios, extensiones de navegador y juegos espaciales. Participa en cuestionarios, discusiones y tareas prácticas. Mejora tus habilidades y optimiza la retención del conocimiento con nuestra efectiva pedagogía basada en proyectos. ¡Comienza tu viaje de programación hoy!
Únete a la Comunidad de Discord de Azure AI Foundry
@ -21,113 +21,112 @@ 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 Discord de Azure AI Foundry y conoce expertos y desarrolladores**](https://discord.com/invite/ByRwuEEgH4)
3. [**Únete al Discord de Azure AI Foundry y conoce expertos y otros desarrolladores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Soporte Multilingüe
#### Soportado vía GitHub Action (Automatizado y Siempre Actualizado)
#### Soportado mediante 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, utiliza sparse checkout:
> Este repositorio incluye más de 50 traducciones de idiomas, lo que incrementa significativamente el tamaño de descarga. Para clonar sin las traducciones, usa el sparse checkout:
> git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'
> ```
> Esto te da todo lo que necesitas 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 soporten más idiomas de traducción están listados [aquí](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Si deseas que se soporten idiomas de traducción adicionales, estos 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 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 de certificado gratuito. Esta es la página que quieres agregar a favoritos y revisar de vez en cuando ya que cambiamos el contenido mensualmente.
Visita la [**página del 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 gratuito. Esta es la página que quieres marcar como favorito y revisar de vez en cuando ya que cambiamos el contenido mensualmente.
### 📣 Anuncio - ¡Nuevos desafíos del modo GitHub Copilot Agent para completar!
### 📣 Anuncio - ¡Nuevos desafíos de 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 completes usando GitHub Copilot y el modo Agent. Si no has usado el modo Agent antes, este no solo genera texto sino que también puede 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 ti para completar usando GitHub Copilot y el modo Agente. Si no has usado antes el modo Agente, es capaz de no solo generar texto sino también crear y editar archivos, ejecutar comandos y más.
### 📣 Anuncio - _Nuevo Proyecto para construir con IA Generativa_
### 📣 Anuncio - _Nuevo proyecto para construir usando IA generativa_
Nuevo proyecto de Asistente AI agregado, échale un vistazo en el [proyecto](./9-chat-project/README.md)
Nuevo proyecto de asistente de IA agregado, échale un vistazo [proyecto](./9-chat-project/README.md)
### 📣 Anuncio - _Nuevo Currículo_ sobre IA Generativa para JavaScript acaba de ser publicado
### 📣 Anuncio - _Nuevo Plan de Estudios_ sobre IA Generativa para JavaScript acaba de ser lanzado
¡No te pierdas nuestro nuevo currículo de IA Generativa!
¡No te pierdas nuestro nuevo plan de estudios 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, un chequeo de conocimiento y un desafío que te guiará en aprendizaje de temas como:
- Prompts y la ingeniería de prompts
- Generación de apps con texto e imagen
- Apps de búsqueda
Cada lección incluye una tarea para completar, una verificación de conocimientos y un desafío para guiarte en temas como:
- Creación de prompts y ingeniería de prompts
- Generación de aplicaciones de texto e imagen
- Aplicaciones de búsqueda
Visita [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para comenzar!
## 🌱 Primeros pasos
## 🌱 Comenzando
> **Docentes**, 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)!
> **Docentes**, hemos [incluido algunas sugerencias](for-teachers.md) sobre cómo utilizar este plan de estudios. ¡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, completando las diversas actividades y evaluando 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 a la clase y sigan leyendo el material, completando las diversas actividades y verificando su 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! 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 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 su educación, recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiales de estudio adicionales.
Para profundizar en tu educación, te recomendamos explorar [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) para materiales adicionales de estudio.
### 📋 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 plan de estudios tiene un entorno de desarrollo listo para usar! Al comenzar, puedes elegir ejecutar el plan 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 puedas 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 puedas guardar fácilmente tu trabajo, se recomienda que crees tu propia copia de este repositorio. Puedes hacer esto haciendo clic en el botón **Usar esta plantilla** en la parte superior de la página. Esto creará un nuevo repositorio en tu cuenta de GitHub con una copia del plan de estudios.
Sigue estos pasos:
1. **Haz un Fork del Repositorio**: Haz clic en el botón "Fork" en la esquina superior derecha de esta página.
2. **Clona el Repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Ejecutando el currículo en un Codespace
#### Ejecutando el plan en un Codespace
En tu copia de este repositorio que creaste, haz clic en el botón **Code** y selecciona **Open with Codespaces**. Esto creará un nuevo Codespace para que trabajes en él.
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
#### Ejecutando el plan 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 diversas opciones para cada una de estas herramientas para que selecciones la que mejor te funcione.
Para ejecutar este plan 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 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 editor, que también tiene un [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) incorporado. Puedes descargar Visual Studio Code [aquí](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
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 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:
1. Clona tu repositorio a tu computadora. Puedes hacer esto haciendo clic en el botón **Code** y copiando la URL:
[CodeSpace](./images/createcodespace.png)
Luego, abre [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro de [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) y ejecuta el siguiente comando, reemplazando `<your-repository-url>` con la URL que acabas de copiar:
Luego, abre [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) dentro de [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) y ejecuta el siguiente comando, reemplazando `<your-repository-url>` con la URL que acabas de copiar:
```bash
git clone <your-repository-url>
```
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.
2. Abre la carpeta en Visual Studio Code. Puedes hacerlo haciendo clic en **Archivo** > **Abrir carpeta** y seleccionando la carpeta que acabas de clonar.
> Extensiones recomendadas 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
- cuestionario de calentamiento previo a la lección
- cuestionario previo a la lección
- lección escrita
- para lecciones basadas en proyectos, guías paso a paso sobre cómo construir el proyecto
- chequeos de conocimiento
- para lecciones basadas en proyectos, guías paso a paso para construir el proyecto
- verificaciones de conocimiento
- un desafío
- lectura suplementaria
- lectura complementaria
- 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, 48 cuestionarios en total 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, 48 cuestionarios en total 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 | Empezando | Introducción a la Programación y Herramientas de Trabajo | Aprende los fundamentos básicos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a los desarrolladores profesionales a hacer su trabajo | [Introducción a Lenguajes de Programación y Herramientas de Trabajo](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Empezando | 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 | [Introducción a GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Empezando | Accesibilidad | Aprende los conceptos básicos de accesibilidad web | [Fundamentos de Accesibilidad](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos 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 | Fundamentos 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 | Fundamentos de JS | Tomando Decisiones con JS | Aprende a crear condiciones en tu código usando métodos para tomar decisiones | [Tomando Decisiones](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos de JS | Arrays y Bucles | Trabaja con datos usando arrays y bucles en JavaScript | [Arrays 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, enfocado 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 diseñar el terrario en línea, enfocándote en los conceptos básicos de CSS, incluyendo hacer la página responsive | [Introducción a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrario](./3-terrarium/solution/README.md) | Clousures 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) | Construir un juego de mecanografía | Aprende a usar eventos del teclado para impulsar la lógica de tu aplicación en JavaScript | [Programación impulsada 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 estructurar los primeros elementos 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 un formulario, llamada a una API y almacenamiento local | Construye los elementos JavaScript de tu extensión de 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 manejar el ícono de la extensión; aprende acerca del 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 más Avanzado con JavaScript | Aprende sobre Herencia usando tanto Clases como Composición y el patrón Pub/Sub, preparándote 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) | Dibujar en canvas | Aprende sobre la API Canvas, usada para dibujar elementos en una pantalla | [Dibujar en Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Juego Espacial](./6-space-game/solution/README.md) | Mover elementos alrededor de la pantalla | Descubre cómo los elementos pueden ganar 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 teclas y proporciona una función de cooldown 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 puntuación | Realiza cálculos matemáticos basados en el estado y rendimiento del juego | [Mantener puntuación](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Juego Espacial](./6-space-game/solution/README.md) | Terminar y reiniciar el juego | Aprende sobre cómo terminar y reiniciar el juego, incluyendo limpiar recursos y resetear valores de variables | [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 App Web | Aprende a crear la estructura de un sitio web multipágina usando enrutamiento 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) | Construir un Formulario de Inicio de sesión y registro | Aprende a construir formularios y manejar 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 hacia y desde tu aplicación, cómo obtenerlos, almacenarlos y descartarlos | [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 estado y cómo manejarlo 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 Editor de Código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Asistentes AI](./9-chat-project/README.md) | Trabajando con AI | Aprende a construir tu propio asistente AI | [Proyecto de Asistente AI](./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 los desarrolladores profesionales a realizar 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 | Comenzando | 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 | Comenzando | Accesibilidad | Aprende los fundamentos de accesibilidad web | [Fundamentos de Accesibilidad](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Fundamentos de JS | Tipos de datos en JavaScript | Los fundamentos de los tipos de datos en JavaScript | [Tipos de Datos](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | Fundamentos de JS | Funciones y Métodos | Aprende sobre funciones y métodos para gestionar el flujo lógico de una aplicación | [Funciones y Métodos](./2-js-basics/2-functions-methods/README.md) | Jasmine y Christopher |
| 06 | Fundamentos de JS | Tomando Decisiones con JS | Aprende cómo crear condiciones en tu código usando métodos de toma de decisiones | [Tomando Decisiones](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Fundamentos 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 | [Terrarium](./3-terrarium/solution/README.md) | HTML en la práctica | Construye el HTML para crear un terrario en línea, enfocándote en construir un diseño | [Introducción a HTML](./3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS en la práctica | Construye el CSS para dar estilo al terrario en línea, enfocándote en los fundamentos de CSS incluyendo hacer que la página sea responsiva | [Introducción a 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 hacer que el terrario funcione como una interfaz de arrastrar y soltar, enfocándote en closures y manipulación del DOM | [Closures en JavaScript, manipulación del DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Juego de mecanografía](./4-typing-game/solution/README.md) | Construir un Juego de Mecanografía | Aprende a usar eventos del teclado para manejar la lógica de tu aplicación JavaScript | [Programación basada en eventos](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensión Verde de Navegador](./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 de navegador | [Acerca de los Navegadores](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensión Verde de Navegador](./5-browser-extension/solution/README.md) | Construcción de un formulario, llamada a API y almacenamiento local| Construye los elementos JavaScript de tu extensión para navegador para llamar a 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 Verde de Navegador](./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 icono de la extensión; aprende sobre rendimiento web y algunas optimizaciones para conseguirlo | [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 más avanzado 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) | 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) | Moviendo elementos en 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 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) | Mantener puntuación | Realiza cálculos matemáticos basados en el estado y rendimiento del juego | [Mantener puntuación](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Juego Espacial](./6-space-game/solution/README.md) | Terminar y reiniciar el juego | Aprende sobre cómo terminar y reiniciar el juego, incluyendo limpiar recursos y reiniciar valores de variables | [La condición de finalización](./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) | Construir 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 | [App Bancaria](./7-bank-project/solution/README.md) | Métodos para obtener y usar datos | Cómo fluyen los datos a través 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 estado y cómo manejarlo programáticamente | [Gestión de estado](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Código Browser/VScode](../../8-code-editor) | Trabajando con VScode | Aprende a usar un editor de código | [Usar editor de código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Asistentes AI](./9-chat-project/README.md) | Trabajando con IA | Aprende a construir tu propio asistente de IA | [Proyecto asistente de IA](./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 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 herramientas y técnicas más recientes utilizadas por los desarrolladores web de hoy. 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 tipo invasores espaciales y una aplicación bancaria para negocios. Al final de la serie, los estudiantes habrán adquirido una comprensión sólida del desarrollo web.
> 🎓 ¡Puedes tomar las primeras lecciones de este 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!
> 🎓 ¡Puedes tomar las primeras lecciones de este plan de estudios 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 aumentará la retención de conceptos. También escribimos varias lecciones iniciales en los fundamentos de JavaScript para introducir conceptos, acompañadas de un video de la colección de tutoriales en video "[Serie para principiantes en: JavaScript](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 garantizar que el contenido esté alineado con los proyectos, el proceso se vuelve más atractivo para los estudiantes y se incrementa la retención de los conceptos. También escribimos varias lecciones introductorias en fundamentos de JavaScript para presentar 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 cuyos autores contribuyeron a este plan de estudios.
Además, un cuestionario de baja dificultad antes de una clase establece la intención del estudiante hacia el aprendizaje de un tema, mientras que un segundo cuestionario después de la clase asegura una mayor retención. Este currículo fue diseñado para ser flexible y divertido y puede tomarse 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 mayor retención. Este plan de estudios fue diseñado para ser flexible y divertido y puede tomarse en su totalidad o en parte. Los proyectos comienzan pequeños y se vuelven progresivamente más complejos al final del ciclo de 12 semanas.
Aunque intencionalmente hemos evitado 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)".
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 plan de estudios 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)".
> Visita nuestras pautas de [Código de Conducta](CODE_OF_CONDUCT.md) y [Contribuciones](CONTRIBUTING.md). ¡Agradecemos tus comentarios constructivos!
> Visita nuestra [Normativa de Conducta](CODE_OF_CONDUCT.md) y las guías de [Contribución](CONTRIBUTING.md). ¡Agradecemos tus comentarios constructivos!
## 🧭 Acceso offline
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`.
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 será servido en el puerto 3000 en tu localhost: `localhost:3000`.
## 📘 PDF
Un PDF de todas las lecciones puede encontrarse [aquí](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
Un PDF con todas las lecciones se puede encontrar [aquí](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Otros Cursos
¡Nuestro equipo produce otros cursos! Consulta:
¡Nuestro equipo produce otros cursos! Échales un vistazo:
<!-- 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)
---
### 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)
@ -250,21 +250,21 @@ Un PDF de todas las lecciones puede encontrarse [aquí](https://microsoft.github
## Obtener ayuda
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 se dan la bienvenida las preguntas y se comparte el conocimiento 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 tiene licencia 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 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 realizada por humanos. No nos responsabilizamos por 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 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 malentendidos o interpretaciones erróneas derivadas del uso de esta traducción.
Ce dépôt est un programme éducatif conçu pour enseigner les bases du développement web aux débutants. Le programme est un cours complet de 12 semaines développé par les Cloud Advocates de Microsoft, comprenant 24 leçons pratiques couvrant JavaScript, CSS et HTML.
Il s'agit d'un référentiel de programme éducatif pour enseigner les bases 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.
### Principaux éléments
### Composants clés
- **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
- **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 automatiques dans plus de 50 langues via GitHub Actions
- **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 supplémentaires : IA générative, Data Science, ML, IoT disponibles
- Cours supplémentaires : IA générative, Science des données, ML, cursus 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 de quiz Vue 3
Pour les instructions détaillées sur les projets individuels, référez-vous aux 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'extensions de navigateur
- `6-space-game/README.md` - Développement de jeux basés sur Canvas
- `9-chat-project/README.md` - Projet d'assistant de chat IA
- `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 assistant de chat IA
### Structure du monorepo
### Structure Monorepo
Bien que ce ne soit pas un monorepo traditionnel, ce dépôt contient plusieurs projets indépendants :
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 affecter les autres
- Clonez l'intégralité du dépôt pour une expérience complète du programme éducatif
- Travaillez sur des projets individuels sans impact sur les autres
- Clonez tout le référentiel pour une expérience complète du programme scolaire
---
**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.
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
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 imprécisions. Le document original dans sa langue d’origine 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 de mauvaises interprétations résultant de l’utilisation de cette traduction.
[](https://discord.gg/nTYy5BXMWG)
# Développement web pour débutants - Un programme
# Développement Web pour Débutants - Un Programme
Apprenez les fondamentaux du développement web grâce à notre cours complet de 12 semaines dispensé 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, 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 codage aujourd’hui !
Apprenez les fondamentaux du développement web avec notre cours complet de 12 semaines par Microsoft Cloud Advocates. Chacune des 24 leçons plonge dans 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 avec notre pédagogie efficace basée sur des projets. Commencez votre parcours de codage dès aujourd'hui !
Rejoignez la communauté Discord Azure AI Foundry
Rejoignez la communauté Azure AI Foundry sur Discord
[](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 experts et développeurs**](https://discord.com/invite/ByRwuEEgH4)
Suivez ces étapes pour démarrer avec 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 des experts et d’autres développeurs**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Support multilingue
### 🌐 Support Multilingue
#### Pris en charge via GitHub Action (Automatisé & Toujours à jour)
#### Pris en charge via GitHub Action (Automatisé et Toujours à Jour)
> Ce dépôt inclut plus de 50 traductions qui augmentent significativement la taille du téléchargement. Pour cloner sans les traductions, utilisez le sparse checkout :
> Ce dépôt inclut plus de 50 traductions de langues, ce qui augmente considérablement la taille de téléchargement. Pour cloner sans les 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 donne 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)**
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
#### 🧑🎓 _Ê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 voucher pour un certificat gratuit. C’est une page à ajouter à vos favoris et à consulter régulièrement car nous changeons le contenu chaque mois.
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 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.
### 📣 Annonce - Nouveaux défis en mode GitHub Copilot Agent à compléter !
Nouveau défi ajouté, cherchez "Défi GitHub Copilot Agent 🚀" dans la plupart des chapitres. C’est un nouveau défi à réaliser en utilisant GitHub Copilot et le mode Agent. Si vous n’avez pas encore utilisé le mode Agent, il peut non seulement générer du texte mais aussi créer et éditer des fichiers, exécuter des commandes et plus encore.
Nouveau défi ajouté, cherchez "GitHub Copilot Agent Challenge 🚀" dans la plupart des chapitres. C’est un nouveau défi pour vous à compléter en utilisant 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 avec l’IA générative_
Nouveau projet Assistant IA vient d’être 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é
@ -63,55 +63,59 @@ 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 inclut un devoir à réaliser, un contrôle des connaissances et un défi pour vous guider sur des sujets tels que :
- Le prompting et l’ingénierie de prompt
- La génération d’applications de texte et d’images
Chaque leçon comprend un devoir à réaliser, un contrôle des connaissances et un défi pour vous guider dans des sujets comme :
- Le prompt et l’ingénierie de 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 !
## 🌱 Commencer
> **Enseignants**, nous avons [inclus quelques suggestions](for-teachers.md) sur la façon d’utiliser ce programme. Vos retours sont les bienvenus [dans notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) !
> **Enseignants**, nous avons [inclus quelques suggestions](for-teachers.md) sur la façon d’utiliser ce programme. Nous aimerions avoir votre retour [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é-lecture puis poursuivez avec la lecture du matériel, la réalisation des différentes 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 et poursuivez avec la lecture du matériel de cours, la réalisation des différentes activités et vérifiez votre compréhension avec 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 approfondir votre formation, nous vous recommandons vivement d’explorer [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pour des ressources d’étude supplémentaires.
Pour approfondir votre éducation, 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.
### 📋 Préparer votre environnement
### 📋 Configuration de votre environnement
Ce programme dispose déjà d’un environnement de développement prêt à l’emploi ! Au démarrage, vous pouvez choisir de lancer 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 ! Lors de votre démarrage, vous pouvez choisir de lancer 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 comme [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Créez votre dépôt
Pour enregistrer facilement votre travail, il est recommandé de créer une copie personnelle 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. **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`
2. **Clonez le dépôt** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Exécuter le programme dans un Codespace
#### Exécution du programme dans un Codespace
Dans votre copie de ce dépôt, cliquez sur le bouton **Code** et sélectionnez **Open with Codespaces**. Cela créera un nouveau Codespace pour que vous puissiez travailler dedans.
Dans votre copie de ce dépôt que vous avez créée, cliquez sur le bouton **Code** et sélectionnez **Ouvrir avec Codespaces**. Cela créera un nouveau Codespace pour que vous puissiez y travailler.
#### Exécuter le programme localement sur votre ordinateur
#### Exécution du 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 différentes 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 et outils de programmation](../../1-getting-started-lessons/1-intro-to-programming-languages), vous guidera à travers plusieurs options pour ces outils afin que vous puissiez choisir ce qui vous convient le mieux.
Notre recommandation est 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).
Nous recommandons d’utiliser [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) comme éditeur, qui dispose aussi d’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 faire ceci en cliquant sur le bouton **Code** et en copiant l’URL :
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 :
@ -123,93 +127,93 @@ Nous recommandons d’utiliser [Visual Studio Code](https://code.visualstudio.co
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 :
> Extensions recommandées pour Visual Studio Code :
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pour prévisualiser les pages HTML directement dans Visual Studio Code
> * [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 comprend :
- sketchnote optionnelle
- vidéo supplémentaire optionnelle
- quiz d'échauffement avant la leçon
- 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
- pour les leçons basées sur un projet, guides étape par étape pour construire le projet
- vérifications des connaissances
- un défi
- lectures complémentaires
- lecture complémentaire
- devoir
- [quiz après la leçon](https://ff-quizzes.netlify.app/web/)
> **Une note concernant les quiz** : Tous les quiz sont contenus 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 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, 48 quiz au total composés 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 | Premiers Pas | Introduction à la Programmation et aux 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 Outils du Métier](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Premiers Pas | Bases de GitHub, incluant le travail 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 | 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 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 | Travailler avec les données à l’aide de 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 mise en page | [Introduction à 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 rendre la page responsive | [Introduction au CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Fermetures JavaScript, manipulation du DOM | Construire le JavaScript pour rendre le terrarium fonctionnel en tant qu’interface glisser/déposer, en se concentrant sur les closures 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 | Apprendre à utiliser les événements clavier pour piloter la logique de votre application JavaScript | [Programmation orientée événements](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extension Navigateur Verte](./5-browser-extension/solution/README.md) | Travailler avec les navigateurs | Apprendre comment fonctionnent les navigateurs, leur histoire, et comment construire les premiers éléments d’une extension | [Au sujet des navigateurs](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extension Navigateur Verte](./5-browser-extension/solution/README.md) | Construire un formulaire, appeler une API et stocker des variables localement | Construire 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 Navigateur Verte](./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 quelques 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 jeux avec JavaScript | Apprendre l’héritage avec Classes et Composition ainsi que le patron 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 canvas | Apprendre l’API Canvas, utilisée pour dessiner des éléments sur un é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 prendre du mouvement 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 des éléments et leur réaction avec les touches pressées, fournir une fonction de cooldown pour la performance du jeu | [Détection de collisions](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu Spatial](./6-space-game/solution/README.md) | Tenue du score | Effectuer des calculs mathématiques basés sur l’état et 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) | Finir et redémarrer le jeu | Apprendre à 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) | Templates HTML et Routes dans une application web | Apprendre à créer l’ossature d’un site multipage utilisant le routage et les 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 à construire des formulaires et à gérer la 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 s’en débarrasser | [Données](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application Bancaire](./7-bank-project/solution/README.md) | Concepts de gestion d’état | Apprendre 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 à construire 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 outils du métier | Apprenez les bases sous-jacentes de la plupart des langages de programmation et sur les logiciels aidant les développeurs professionnels dans leur travail | [Introduction aux langages de programmation et 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, 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 | 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é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 | Bases JS | Tableaux et Boucles | Travaillez avec les données en utilisant les 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 | Construisez le HTML pour créer un terrarium en ligne, en vous concentrant sur la 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 incluant la réactivité de la page | [Introduction au CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closures JavaScript, manipulation du DOM | Construisez le JavaScript pour faire fonctionner le terrarium comme une interface glisser/déposer, en vous concentrant sur les closures et la manipulation du DOM | [Closures 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 dactylographie | 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 Navigateur Verte](./5-browser-extension/solution/README.md) | Travailler avec les navigateurs | Découvrez comment fonctionnent les navigateurs, leur histoire, et comment structurer les premiers éléments d’une extension navigateur | [À propos des navigateurs](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extension Navigateur Verte](./5-browser-extension/solution/README.md) | Construire un formulaire, appeler une API et stocker des variables en stockage local | Construisez les éléments JavaScript de votre extension pour appeler une API en utilisant les variables stockées en local | [APIs, formulaires et stockage local](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extension Navigateur Verte](./5-browser-extension/solution/README.md) | Processus en arrière-plan dans le navigateur, performance web | Utilisez les processus en arrière-plan du navigateur pour gérer l’icône de l’extension ; apprenez la performance web et quelques optimisations pour améliorer | [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 de jeu plus avancé avec JavaScript | Apprenez l’héritage en utilisant à la fois les classes et la composition ainsi que le modèle Pub/Sub, en préparation pour construire 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 un canvas | Apprenez à utiliser l’API Canvas, utilisée pour dessiner des éléments à l’é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écouvrez comment les éléments peuvent gagner du mouvement 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 collisions | Faites entrer en collision les éléments et réagir entre eux avec les appuis sur les touches, et fournissez une fonction de cooldown pour assurer les performances du jeu | [Détection de collisions](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu Spatial](./6-space-game/solution/README.md) | Comptage des points | Effectuez des calculs mathématiques basés sur l’état et la performance du jeu | [Comptage des points](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu Spatial](./6-space-game/solution/README.md) | Finir et redémarrer le jeu | Apprenez à finir et redémarrer le jeu, incluant le nettoyage des ressources et la réinitialisation des variables | [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 l’ossature de l’architecture d’un site web multipage en utilisant le routage et les 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) | Construire un formulaire de connexion et d’enregistrement | 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 circulent dans et hors de votre application, comment les récupérer, les stocker et s’en débarrasser | [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 | [Code Browser/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 à créer 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
Notre programme est conçu selon deux principes pédagogiques clés :
* apprentissage par projet
* quiz fréquents
Le programme enseigne les fondamentaux du JavaScript, HTML, et CSS, ainsi que les derniers outils et techniques utilisés par les développeurs web actuels. 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 style space-invader, et une application bancaire pour les entreprises. À la fin de la série, les étudiants auront acquis une solide compréhension du développement web.
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é de développer une expérience pratique en construisant un jeu de dactylographie, 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 [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 comme un [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 le contenu soit en adéquation avec les projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est augmentée. Nous avons aussi écrit plusieurs leçons introductives sur les bases de JavaScript pour présenter les concepts, accompagnées d’une vidéo de la collection "[Série Débutants sur : JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", dont certains auteurs ont contribué à ce programme.
En assurant que le contenu est aligné avec des projets, le processus devient plus engageant pour les étudiants et la rétention des concepts sera renforcée. Nous avons également rédigé plusieurs leçons d’introduction aux bases de JavaScript pour introduire les concepts, accompagnées d’une vidéo de la collection de tutoriels vidéo "[Série pour débutants sur : 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 sans enjeu avant la classe fixe l’intention de l’étudiant sur l’apprentissage d’un sujet, tandis qu’un second quiz après la classe assure 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 à enjeu faible avant le cours fixe l’intention de l’étudiant envers 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 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 étape suivante pour compléter ce programme serait d’apprendre Node.js via une autre série de vidéos : "[Série Débutants sur : 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 les frameworks JavaScript afin de 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 après avoir terminé ce programme serait d’apprendre Node.js via une autre collection de vidéos : "[Série pour débutants sur : 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 notre guide de [Contribution](CONTRIBUTING.md). Nous accueillons vos retours constructifs !
> Consultez notre [Code de conduite](CODE_OF_CONDUCT.md) et nos directives [Contribuer](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 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 web 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).
## 🎒 Autres Cours
Notre équipe produit d'autres cours ! Découvrez :
## 🎒 Autres cours
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)
---
### Azure / Edge / MCP / Agents
@ -220,7 +224,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)
@ -228,7 +232,7 @@ 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)
@ -245,23 +249,23 @@ Notre équipe produit d'autres cours ! Découvrez :
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 des discussions sur MCP. C'est une communauté bienveillante où les questions sont les bienvenues et le partage des connaissances est libre.
Si vous êtes bloqué ou avez des questions sur la création d’applications IA. Rejoignez d’autres apprenants et des développeurs expérimentés pour des discussions sur MCP. C’est une communauté bienveillante où les questions sont les bienvenues et où le savoir est partagé librement.
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. Voir 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 cruciales, 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 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 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 toute information critique, il est recommandé de recourir à une traduction professionnelle effectuée par un humain. Nous déclinons toute responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.
localizeflow[bot]
3 weeks ago