@ -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 Lehren der Grundlagen der Webentwicklung für Anfänger. Das Curriculum ist ein umfassender 12-Wochen-Kurs, entwickelt von Microsoft Cloud Advocates, mit 24 praxisorientierten Lektionen, die JavaScript, CSS und HTML abdecken.
### Hauptkomponenten
- **Bildungsinhalte**: 24 strukturierte Lektionen, organisiert in projektbasierte Module
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
- Gesamtes Repo klonen für komplettes Curriculum-Erlebnis
---
<!-- 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, 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.
Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir auf Genauigkeit achten, beachten Sie bitte, dass automatisierte Ü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 durch die 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 behandelt JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browsererweiterungen und Weltraumspiele. Arbeiten Sie mit Quizzen, Diskussionen und praktischen Aufgaben. Verbessern Sie Ihre Fähigkeiten und optimieren Sie die Wissensspeicherung mit unserer effektiven projektbasierten Pädagogik. Beginnen Sie noch heute Ihre Programmierreise!
Treten Sie der Azure AI Foundry DiscordCommunity bei
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)
2. **Klonen Sie das Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Folgen Sie diesen Schritten, um mit diesen Ressourcen zu starten:
1. **Repository forken**: Klicken Sie auf [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
> Dieses Repository enthält über 50 Sprachübersetzungen, was die Downloadgröße erheblich erhöht. Um ohne Übersetzungen zu klonen, verwenden Sie Sparse Checkout:
> Dieses Repository enthält über 50 Sprachübersetzungen, was die Download-Größe erheblich erhöht. Um ohne Übersetzungen zu klonen, nutzen 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.
> So erhalten Sie alles, was Sie benötigen, um den Kurs mit einem viel schnelleren Download abzuschließen.
<!-- 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 weitere Übersetzungssprachen wünschen, finden Sie die unterstützten Sprachen [hier](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)
#### 🧑🎓 _Sind Sie ein Student?_
#### 🧑🎓 _Bist du 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.
Besuche die [**Student Hub Seite**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), wo du Ressourcen für Anfänger, Studierendenpakete und sogar Möglichkeiten findest, einen kostenlosen Zertifikatgutschein zu erhalten. Das ist die Seite, die du als Lesezeichen speichern und von Zeit zu Zeit überprüfen solltest, da wir monatlich Inhalt austauschen.
### 📣 Ankündigung - Neue GitHub Copilot Agent Mode Herausforderungen zu meistern!
### 📣 Ankündigung – Neue GitHub Copilot Agent Mode 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, suche in den meisten Kapiteln nach „GitHub Copilot Agent Challenge 🚀“. Das ist eine neue Herausforderung, die du mit GitHub Copilot und dem Agent-Modus abschließen kannst. Wenn du den Agent-Modus noch nicht benutzt hast, er kann nicht nur Text generieren, sondern auch Dateien erstellen und bearbeiten, Befehle ausführen und vieles mehr.
### 📣 Ankündigung - _Neues Projekt mit Generativer KI bauen_
### 📣 Ankündigung – _Neues Projekt mit Generativer KI bauen_
Neues AI Assistant-Projekt gerade hinzugefügt, sehen Sie sich das [Projekt](./9-chat-project/README.md) an.
Neues AI-Assistenten-Projekt hinzugefügt, schau es dir 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_ zu Generativer KI für JavaScript wurde gerade veröffentlicht
Verpassen Sie nicht unser neues Curriculum für Generative KI!
Verpasse 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!
Besuche [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 PromptEngineering
Jede Lektion beinhaltet eine Aufgabe, einen Wissenscheck und eine Challenge, die dich in 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!
- Suchanwendungen
anleiten.
Besuche [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), um zu starten!
## 🌱 Erste Schritte
> **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) aufgenommen, wie Sie diesen Lehrplan verwenden können. Wir freuen uns auf 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)** starten für jede Lektion mit einem Pre-Lecture-Quiz und folgen mit dem Lesen des Vorlesungsmaterials, dem Abschließen der verschiedenen Aktivitäten und überprüfen ihr Verständnis mit dem Post-Lecture-Quiz.
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.
Um dein Lernerlebnis zu verbessern, verbinde dich mit deinen Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind erwünscht in unserem [Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), wo unser Moderatorenteam für deine Fragen zur Verfügung steht.
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.
Für deine weitere Bildung empfehlen wir dringend, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) zu erkunden, um zusätzliches Lernmaterial zu finden.
### 📋 Richten Sie Ihre Arbeitsumgebung ein
### 📋 Einrichtung deiner 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 einsatzfertige Entwicklungsumgebung! Zu Beginn kannst du wählen, ob du den Lehrplan in einem [Codespace](https://github.com/features/codespaces/) (_einer browserbasierten Umgebung ohne Installation_) oder lokal auf deinem Computer mit einem Texteditor wie [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ausführen möchtest.
#### 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.
#### Erstelle dein Repository
Damit du deine Arbeit einfach speichern kannst, empfehlen wir dir, eine eigene Kopie dieses Repositories anzulegen. Das kannst du tun, indem du oben auf der Seite den Button **Use this template** anklickst. Dadurch wird ein neues Repository in deinem 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.
2. **Klonen Sie das Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
Folge diesen Schritten:
1. **Repository forken**: Klicke auf den „Fork“-Button oben rechts auf dieser Seite.
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 deiner erstellten Kopie des Repositories klickst du auf den **Code**-Button und wählst **Open with Codespaces** aus. Dadurch wird ein neuer Codespace zum Arbeiten für dich erstellt.
#### Lokales Ausführen des Curriculums auf Ihrem Computer
#### Betrieb des Lehrplans lokal auf deinem Computer
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.
Um diesen Lehrplan lokal auf deinem Computer auszuführen, benötigst du einen Texteditor, einen Browser und ein Kommandozeilen-Tool. Unsere erste Lektion, [Einführung in Programmiersprachen und Werkzeuge](../../1-getting-started-lessons/1-intro-to-programming-languages), führt dich durch verschiedene Optionen für diese Tools, damit du das auswählen kannst, was am besten für dich passt.
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).
Unsere Empfehlung ist es, [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) als Editor zu verwenden, der auch ein integriertes [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) besitzt. Du kannst Visual Studio Code [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. Klone dein Repository auf deinen Computer. Das kannst du tun, indem du den **Code**-Button anklickst und die URL kopierst:
[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:
Dann öffnen Sie das [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ühren Sie den folgenden Befehl aus, wobei Sie `<your-repository-url>` durch die URL ersetzen, die Sie gerade kopiert haben:
```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 vorzuschauen
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - um Ihnen beim schnelleren Schreiben von Code zu helfen
## 📂 Jede Lektion beinhaltet:
- optionale Sketchnote
- optionales ergänzendes Video
- Aufwärmquiz vor der Lektion
- Aufwärm-Quiz vor der Lektion
- schriftliche Lektion
- für projektbasierte Lektionen Schritt-für-Schritt-Anleitungen zum Aufbau des Projekts
- bei projektbasierten Lektionen Schritt-für-Schritt-Anleitungen zum Aufbau 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 befinden sich im Quiz-app-Ordner, insgesamt 48 Quizze mit je drei Fragen. Sie sind [hier](https://ff-quizzes.netlify.app/web/) verfügbar, die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folgen Sie der Anleitung im `quiz-app`-Ordner.
| 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 | Lernen Sie die grundlegenden Grundlagen der meisten Programmiersprachen und über Software, die professionellen Entwicklern hilft | [Einführung in Programmiersprachen und Werkzeuge](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Einstieg | Grundlagen von GitHub, einschließlich Teamarbeit | Wie man GitHub im Projekt verwendet und mit anderen an einem Code-Repository zusammenarbeitet | [Einführung in GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Einstieg | Barrierefreiheit | Lernen Sie die Grundlagen der Web-Barrierefreiheit | [Grundlagen Barrierefreiheit](./1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS-Grundlagen | JavaScript Datentypen | Die Grundlagen von JavaScript-Datentypen | [Datentypen](./2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS-Grundlagen | Funktionen und Methoden | Lernen Sie Funktionen und Methoden zur Steuerung des Anwendungslogikflusses | [Funktionen und Methoden](./2-js-basics/2-functions-methods/README.md) | Jasmine und Christopher |
| 06 | JS-Grundlagen | Entscheidungen mit JS treffen | Lernen Sie, wie Sie Bedingungen in Ihrem Code mit Entscheidungsstrukturen erstellen | [Entscheidungen treffen](./2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS-Grundlagen | 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, um ein Online-Terrarium anzulegen, mit Fokus auf den Aufbau eines Layouts | [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 Design | [Einführung in CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, DOM-Manipulation | Erstellen Sie das JavaScript, um das Terrarium als Drag/Drop-Oberfläche zu gestalten, mit Fokus auf Closures und DOM-Manipulation | [JavaScript Closures, DOM-Manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](./4-typing-game/solution/README.md) | Aufbau eines Tipp-Spiels | Lernen Sie, wie Sie Tastatureignisse verwenden, um die Logik Ihrer JavaScript-App zu steuern | [Ereignisgesteuerte Programmierung](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeiten mit Browsern | Lernen Sie, wie Browser funktionieren, ihre Geschichte und wie Sie die ersten Elemente einer Browsererweiterung gestalten | [Über Browser](./5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Erstellen eines Formulars, Aufrufen einer API und Speichern von Variablen im lokalen Speicher | Erstellen Sie die JavaScript-Elemente Ihrer Browser-Erweiterung zum Aufrufen einer API unter Verwendung von Variablen im lokalen Speicher | [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 | Verwenden Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; lernen Sie über Web-Performance und Optimierungen | [Hintergrundaufgaben und Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](./6-space-game/solution/README.md) | Fortgeschrittene Spieleentwicklung mit JavaScript | Lernen Sie Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster, als Vorbereitung auf den Spielebau | [Einführung in die fortgeschrittene Spieleentwicklung](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](./6-space-game/solution/README.md) | Zeichnen auf Canvas | Lernen Sie die Canvas-API kennen, die zum Zeichnen von Elementen auf einem Bildschirm verwendet wird | [Zeichnen auf Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](./6-space-game/solution/README.md) | Bewegen von Elementen auf dem Bildschirm | Entdecken Sie, wie Elemente mit kartesischen Koordinaten und der Canvas-API Bewegung erhalten | [Bewegen von Elementen](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionserkennung | Lassen Sie Elemente kollidieren und aufeinander reagieren, basierend auf Tastatureingaben, und fügen Sie eine Cooldown-Funktion hinzu | [Kollisionserkennung](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](./6-space-game/solution/README.md) | Punkteverwaltung | Führen Sie mathematische Berechnungen basierend auf dem Status und der Leistung des Spiels durch | [Punkteverwaltung](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](./6-space-game/solution/README.md) | Beenden und Neustarten des Spiels | Lernen Sie, wie Sie das Spiel beenden und neu starten, einschließlich der Bereinigung 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 Webanwendung | Lernen Sie, wie Sie das Gerüst einer mehrseitigen Website-Architektur 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) | Login- und Registrierungsformular erstellen | 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 Verwalten von Daten | Wie Daten in Ihre 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 State Managements | Lernen Sie, wie Ihre App den Zustand beibehält und diesen programmatisch verwaltet | [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 | [Verwendung des VScode Code Editors](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeiten mit KI | Lernen Sie, wie Sie Ihren eigenen KI-Assistenten erstellen | [KI-Assistent-Projekt](./9-chat-project/README.md) | Chris |
## 🏫 Pädagogik
Unser Lehrplan ist auf zwei wichtige pädagogische Prinzipien ausgerichtet:
Unser Lehrplan ist nach zwei wesentlichen pädagogischen Prinzipien gestaltet:
* 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. Studierende haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Tipp-Spiel, ein virtuelles Terrarium, eine umweltfreundliche Browsererweiterung, ein Space-Invaders-artiges Spiel und eine Banking-App für Unternehmen entwickeln. Am Ende der Reihe haben die Studierenden ein solides Verständnis der Webentwicklung erworben.
> 🎓 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 Curriculums 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 die Studierenden ansprechender gestaltet und die Beibehaltung der Konzepte verbessert. Wir haben außerdem mehrere Einsteigerlektionen zu den Grundlagen von JavaScript geschrieben, um Konzepte einzuführen, begleitet von einem Video aus der Tutorialsammlung „[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)“, deren Autoren teilweise zum Curriculum 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.
Zudem setzt ein niedrigschwelliges Quiz vor einer Unterrichtsstunde die Lernintention der Studierenden, während ein zweites Quiz nach dem Unterricht die weitere Beibehaltung sichert. Dieses Curriculum wurde so gestaltet, dass es flexibel und unterhaltsam ist und ganz oder teilweise absolviert werden kann. Die Projekte starten klein und werden bis zum Ende des 12-Wochen-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 darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten für Webentwickler zu konzentrieren, bevor ein Framework eingesetzt wird, wäre ein guter nächster Schritt zum Abschluss dieses Curriculums, Node.js über eine weitere Videosammlung zu lernen: „[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 geben Sie dann im Stammordner dieses Repositories `docsify serve` ein. Die Website wird auf Port 3000 auf Ihrem lokalen Host 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:
Unser Team produziert weitere 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://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin)
---
### Azure / Edge / MCP / Agents
@ -247,23 +246,23 @@ Unser Team erstellt weitere Kurse! Schau dir an:
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 anderen Lernenden und erfahrenen Entwicklern an, um über MCP zu diskutieren. Es ist eine unterstützende Community, 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 [LICENSE](../../LICENSE)Datei.
---
<!-- 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 uns um Genauigkeit bemühen, bitten wir zu beachten, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache gilt als maßgebliche Quelle. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Verwendung dieser Übersetzung entstehen.
# Fahrplan für das Web-Dev-For-Beginners-Repository von Microsoft
**Dieses Repository bietet einen Fahrplan zum Erlernen der Grundlagen der Webentwicklung mit Schwerpunkt auf JavaScript, HTML und CSS. Der Lehrplan ist flexibel und kann ganz oder teilweise absolviert werden, mit 24 Lektionen verteilt auf 12 Wochen.**
## Wichtige Meilensteine
* **Wochen 1-3:**
* Einführung in Programmiersprachen und Arbeitstools
* Grundlagen von GitHub
* Barrierefreiheit
* JS-Grundlagen: Datentypen, Funktionen und Methoden
* Entscheidungen treffen mit JS
* **Wochen 4-6:**
* Arrays und Schleifen
* Terrarium: HTML in der Praxis
* CSS in der Praxis
* JavaScript Closures
* DOM-Manipulation
* **Wochen 7-9:**
* Tipp-Spiel: Ereignisgesteuerte Programmierung
* Green Browser Extension: Arbeiten mit Browsern
* Erstellen eines Formulars, Aufrufen einer API und Speichern von Variablen im lokalen Speicher
* Hintergrundprozesse im Browser
* Web-Performance
* **Wochen 10-12:**
* Space Game: Fortgeschrittene Spieleentwicklung mit JavaScript
* Zeichnen auf Canvas
* Elemente auf dem Bildschirm bewegen
* Kollisionsdetektion
* Punkte zählen, Spiel beenden und neu starten
* Banking App: HTML-Vorlagen und Routen in einer Web-App
* Erstellen eines Anmelde- und Registrierungsformulars
* Methoden zum Abrufen und Verwenden von Daten
* Konzepte des Zustandsmanagements
## Lernziele
**Durch das Absolvieren dieses Fahrplans erhalten die Lernenden praktische Erfahrung beim Erstellen eines Tipp-Spiels, eines virtuellen Terrariums, einer umweltfreundlichen Browser-Erweiterung, eines Space-Invader-ähnlichen Spiels und einer Banking-App für Unternehmen. Sie entwickeln außerdem ein solides Verständnis der Grundlagen der Webentwicklung.**
## Zusätzliche Ressourcen
* Dieses Repository stellt zahlreiche Ressourcen zum weiteren Lernen bereit, darunter Tutorials, Code-Beispiele und Herausforderungen.
* Die Microsoft Learn-Plattform bietet eine Vielzahl von Kursen und Lernpfaden zur Webentwicklung.
* Online-Communities wie Stack Overflow und die MDN Web Docs bieten wertvolle Unterstützung und Ressourcen für Webentwickler.
**Ich hoffe, dieser Fahrplan hilft dir auf deinem Weg zur Webentwicklung!**
---
<!-- 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, können automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle zu betrachten. 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.
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 los fundamentos del desarrollo web a principiantes. El currículo es un curso integral de 12 semanas desarrollado por Microsoft Cloud Advocates, que cuenta con 24 lecciones prácticas sobre 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)
- **Soporte Multilingüe**: Traducciones automáticas a más de 50 idiomas mediante GitHub Actions
- **Proyectos Prácticos**: Terrarium, Juego de mecanografía, Extensión de navegador, Juego espacial, Aplicación bancaria, Editor de código y Asistente de chat AI
- **Cuestionarios Interactivos**: 48 cuestionarios con 3 preguntas cada uno (evaluaciones pre y post lección)
- **Soporte Multilenguaje**: 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, currículos de IoT disponibles
### Trabajando 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 cuestionarios 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 para navegador
- `6-space-game/README.md` - Desarrollo de juego basado en canvas
- `9-chat-project/README.md` - Proyecto asistente de chat AI
### Estructura Monorepo
Aunque no es un monorepo tradicional, este repositorio contiene múltiples proyectos independientes:
- Cada lección es autónoma
- Cada lección es autocontenida
- Los proyectos no comparten dependencias
- Trabaja en proyectos individuales sin afectar a otros
- Clona el repositorio completo para la experiencia completa del currículo
- Trabaja en proyectos individuales sin afectar otros
- Clona el repositorio completo para experiencia del currículo completo
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Descargo de responsabilidad**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). 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.
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 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 la traducción profesional realizada por humanos. No nos hacemos responsables de ningún malentendido o interpretación errónea que surja del uso de esta traducción.
# Desarrollo Web para Principiantes - Un Currículo
Aprende los fundamentos del desarrollo web con nuestro curso integral de 12 semanas impartido por Microsoft Cloud Advocates. Cada una de las 24 lecciones profundiza en JavaScript, CSS y HTML a través de proyectos prácticos como terrarios, extensiones de navegador y juegos espaciales. Participa 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 profundiza en JavaScript, CSS y HTML a través de proyectos prácticos como terrarios, extensiones de navegador y juegos espaciales. Participa con cuestionarios, discusiones y tareas prácticas. Mejora tus habilidades y optimiza la retención de conocimiento con nuestra eficaz pedagogía basada en proyectos. ¡Comienza tu camino en la programación hoy!
Únete a la Comunidad de Discord de Azure AI Foundry
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)
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 a expertos y otros desarrolladores**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Soporte Multilingüe
#### Soportado vía GitHub Action (Automatizado y Siempre Actualizado)
> Este repositorio incluye más de 50 traducciones que aumentan significativamente el tamaño de la descarga. Para clonar sin traducciones, utiliza sparse checkout:
> Este repositorio incluye más de 50 traducciones de idiomas lo que incrementa significativamente el tamaño de la descarga. Para clonar sin las traducciones, usa 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 dará 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 añadan idiomas adicionales soportados, 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 Centro de Estudiantes**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) donde encontrarás recursos para principiantes, paquetes para estudiantes e incluso maneras de obtener un cupón para certificado gratis. Esta es la página que querrás guardar en tus favoritos y revisar de vez en cuando, ya que actualizamos contenido mensualmente.
### 📣 Anuncio - ¡Nuevos desafíos del modo GitHub Copilot Agent para completar!
### 📣 Anuncio - Nuevos desafíos de modo Agente de GitHub Copilot para completar
Nuevo desafío añadido, busca "GitHub Copilot Agent Challenge 🚀" en la mayoría de los capítulos. Es un nuevo 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 reto para que completes usando GitHub Copilot y el modo Agente. Si nunca has usado el modo Agente antes, este es capaz no solo de generar texto, sino también de crear y editar archivos, ejecutar comandos y más.
### 📣 Anuncio - _Nuevo Proyecto para construir 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 asistente IA recién añadido, échale un vistazo [proyecto](./9-chat-project/README.md)
### 📣 Anuncio - _Nuevo Currículo_ sobre IA Generativa para JavaScript acaba de ser publicado
### 📣 Anuncio - _Nuevo Currículo_ sobre IA Generativa para JavaScript recién lanzado
¡No te pierdas nuestro nuevo currículo de IA Generativa!
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar.
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para empezar.
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
Cada lección incluye una tarea para completar, una verificación de conocimientos y un desafío para guiar tu aprendizaje en temas como:
- Prompting y ingeniería de prompts
- Generación de apps de texto e imagen
- Apps de búsqueda
Visita [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) para comenzar!
Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para empezar.
## 🌱 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)!
> **Profesores**, hemos [incluido algunas sugerencias](for-teachers.md) sobre cómo usar este currículo. ¡Nos encantaría recibir sus comentarios [en nuestro foro de discusión](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
**[Estudiantes](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, para cada lección, comiencen con un cuestionario previo a la clase y continúen leyendo el material, 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 continúen leyendo el material de la clase, completando las diferentes actividades y verificando su comprensión con el cuestionario posterior.
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 tu educación, recomendamos ampliamente 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 currículo cuenta con un entorno de desarrollo listo para usar! Al comenzar, puedes elegir ejecutar el currículo en un [Codespace](https://github.com/features/codespaces/) (_un entorno basado en navegador, sin necesidad de instalaciones_), o localmente en tu computadora usando un editor de texto como [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### Crea tu repositorio
Para que 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 tu trabajo fácilmente, se recomienda crear tu propia copia de este repositorio. Puedes hacerlo haciendo clic en el botón **Use this template** en la parte superior de la página. Esto creará un nuevo repositorio en tu cuenta de GitHub con una copia del currículo.
Sigue estos pasos:
1. **Haz un Fork del Repositorio**: Haz clic en el botón "Fork" en la esquina superior derecha de esta página.
2. **Clona el Repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
1. **Haz un fork del repositorio**: Haz clic en el botón "Fork" en la esquina superior derecha de esta página.
2. **Clona el repositorio**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
#### Ejecutando el currículo en un Codespace
En tu copia de este repositorio que creaste, haz clic en el botón **Code** y selecciona **Open with Codespaces**. Esto creará un nuevo Codespace para que trabajes en él.
En tu copia de este repositorio que creaste, haz clic en el botón **Code** y selecciona **Open with Codespaces**. Esto creará un nuevo Codespace para que trabajes.
#### Ejecutando el currículo localmente en tu computadora
Para ejecutar este currículo localmente en tu computadora, necesitarás un editor de texto, un navegador y una herramienta de línea de comandos. Nuestra primera lección, [Introducción a los lenguajes de programación y herramientas del oficio](../../1-getting-started-lessons/1-intro-to-programming-languages), te guiará por diversas opciones para cada una de estas herramientas para que selecciones la que mejor te funcione.
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á a través de las opciones para cada una de estas herramientas para que selecciones lo 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 editor, que también tiene un [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) integrado. Puedes descargar Visual Studio Code [aquí](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
1. Clona tu repositorio en tu computadora. Puedes hacerlo haciendo clic en el botón **Code** y copiando la URL:
1. Clona tu repositorio a tu computadora. Puedes hacerlo 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 para Visual Studio Code:
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - para previsualizar páginas HTML dentro de Visual Studio Code
> * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - para ayudarte a escribir código más rápido
## 📂 Cada lección incluye:
- sketchnote opcional
- video suplementario opcional
- resumen opcional (sketchnote)
- video complementario opcional
- cuestionario de calentamiento previo a la lección
- lección escrita
- para lecciones basadas en proyectos, guías paso a paso sobre cómo construir el proyecto
- chequeos de conocimiento
- verificaciones de conocimiento
- un desafío
- lectura suplementaria
- 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 app de cuestionarios se puede ejecutar localmente o desplegar 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 | Empezando | Introducción a la Programación y Herramientas del Oficio | Aprende los fundamentos básicos detrás de la mayoría de los lenguajes de programación y sobre el software que ayuda a los desarrolladores profesionales a hacer su trabajo | [Introducción a Lenguajes de Programación y Herramientas del Oficio](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Empezando | 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 | Empezando | Accesibilidad | Aprende los fundamentos de la 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 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 de lógica 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 | [Terrario](./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 | [Terrario](./3-terrarium/solution/README.md) | CSS en la práctica | Construye el CSS para estilizar el terrario en línea, enfocándote en los fundamentos de CSS incluyendo hacer la página responsiva | [Introducción a CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrario](./3-terrarium/solution/README.md) | Closures en JavaScript, manipulación del DOM | Construye el JavaScript para hacer que el terrario funcione como una interfaz de arrastrar y soltar, 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 Escritura](./4-typing-game/solution/README.md) | Construir un Juego de Escritura | Aprende cómo 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 para Navegador](./5-browser-extension/solution/README.md) | Trabajando con Navegadores | Aprende cómo funcionan los navegadores, su historia y cómo crear 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 Navegador](./5-browser-extension/solution/README.md) | Construcción de formulario, llamada a API y almacenamiento local| Construye los elementos JavaScript de tu extensión de 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 para Navegador](./5-browser-extension/solution/README.md) | Procesos en segundo plano del navegador, rendimiento web | Usa los procesos en segundo plano del navegador para gestionar el ícono de la extensión; aprende sobre el rendimiento web y algunas optimizaciones para mejorar | [Tareas en segundo plano y rendimiento](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Juego Espacial](./6-space-game/solution/README.md) | Desarrollo avanzado de juegos con JavaScript | Aprende sobre herencia usando tanto clases como composición y el patrón Pub/Sub, en preparación para construir un juego | [Introducción al desarrollo avanzado de juegos](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Juego Espacial](./6-space-game/solution/README.md) | 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 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 pulsaciones de teclas y proporciona una función de enfriamiento para asegurar el rendimiento del juego | [Detección de colisiones](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Juego Espacial](./6-space-game/solution/README.md) | Mantener el puntaje | Realiza cálculos matemáticos basados en el estado y rendimiento del juego | [Mantener el puntaje](./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 | [Aplicación Bancaria](./7-bank-project/solution/README.md) | Plantillas HTML y rutas en una aplicación web | Aprende a crear el esqueleto de la arquitectura 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 | [Aplicación 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 | [Aplicación Bancaria](./7-bank-project/solution/README.md) | Métodos para obtener y usar datos | Cómo fluyen los datos dentro y fuera de tu aplicación, cómo obtenerlos, almacenarlos y descartarlos | [Datos](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Aplicación Bancaria](./7-bank-project/solution/README.md) | Conceptos de gestión de estado | Aprende cómo tu aplicación 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 el editor de código VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris |
| 26 | [Asistentes de IA](./9-chat-project/README.md) | Trabajando con IA | Aprende 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 últimas herramientas y técnicas usadas por los desarrolladores web actuales. Los estudiantes tendrán la oportunidad de adquirir experiencia práctica construyendo un juego de mecanografía, un terrario virtual, una extensión ecológica para navegador, un juego al estilo invasor espacial y una aplicación bancaria para negocios. Al finalizar la serie, los estudiantes habrán ganado una comprensión sólida del desarrollo web.
> 🎓 ¡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!
> 🎓 ¡Puedes tomar las primeras lecciones de este currículo como una [Ruta de Aprendizaje](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) en Microsoft Learn!
Al 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.
Al asegurar que el contenido se alinee con proyectos, el proceso se vuelve más atractivo para los estudiantes y se incrementará la retención de conceptos. También escribimos varias lecciones iniciales sobre 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)", cuyos autores contribuyeron a este currículo.
Además, un cuestionario de baja presión antes de una clase establece la intención del estudiante hacia el aprendizaje de un tema, mientras que un segundo cuestionario después de la clase asegura una mayor retención. Este plan 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.
Además, un cuestionario de bajo nivel antes de una clase establece la intención del estudiante hacia el aprendizaje de un tema, mientras que un segundo cuestionario posterior a 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 partes. Los proyectos comienzan pequeños y se vuelven cada vez más complejos al final del ciclo de 12 semanas.
Aunque hemos evitado intencionalmente introducir frameworks de JavaScript para concentrarnos en las habilidades básicas necesarias como desarrollador web antes de adoptar un framework, un buen siguiente paso 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)".
Aunque hemos evitado intencionadamente introducir frameworks de JavaScript para concentrarnos en las habilidades básicas necesarias como desarrollador web antes de adoptar un framework, un buen siguiente paso para completar este currículo sería aprender sobre Node.js a través de otra colección de videos: "[Serie para Principiantes en: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
> Visita nuestra [Normativa de Conducta](CODE_OF_CONDUCT.md) y las guías de [Contribución](CONTRIBUTING.md). ¡Agradecemos tus comentarios constructivos!
> Visita nuestras guías de [Código de Conducta](CODE_OF_CONDUCT.md) y [Contribuciones](CONTRIBUTING.md). ¡Agradecemos tus comentarios constructivos!
## 🧭 Acceso 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`.
## 🧭 Acceso sin conexión
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 repo, escribe `docsify serve`. El sitio web se servirá en el puerto 3000 de 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 de 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! Mira:
<!-- 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
@ -250,21 +251,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 atascas o tienes alguna pregunta sobre cómo crear aplicaciones de IA, únete a otros estudiantes y desarrolladores experimentados en discusiones sobre MCP. Es una comunidad 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.
**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 garantizar la precisión, tenga en cuenta que las traducciones automatizadas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda una traducción profesional realizada por humanos. No nos hacemos responsables de ningún malentendido o interpretación errónea que surja del uso de esta traducción.
# Hoja de ruta para el repositorio Web-Dev-For-Beginners de Microsoft
**Este repositorio ofrece una hoja de ruta para aprender los fundamentos del desarrollo web con un enfoque en JavaScript, HTML y CSS. El plan de estudios es flexible y se puede realizar en su totalidad o en partes, con 24 lecciones repartidas en 12 semanas.**
## Hitos clave
* **Semanas 1-3:**
* Introducción a los lenguajes de programación y herramientas del oficio
* Conceptos básicos de GitHub
* Accesibilidad
* Fundamentos de JS: tipos de datos, funciones y métodos
* Tomar decisiones con JS
* **Semanas 4-6:**
* Arreglos y bucles
* Terrario: HTML en práctica
* CSS en práctica
* Clausuras en JavaScript
* Manipulación del DOM
* **Semanas 7-9:**
* Juego de mecanografía: programación orientada a eventos
* Extensión de navegador ecológica: trabajando con navegadores
* Construcción de un formulario, llamada a una API y almacenamiento de variables en local storage
* Procesos en segundo plano en el navegador
* Rendimiento web
* **Semanas 10-12:**
* Juego espacial: desarrollo de juegos más avanzado con JavaScript
* Dibujando en canvas
* Moviendo elementos por la pantalla
* Detección de colisiones
* Mantener puntuación, finalizar y reiniciar el juego
* Aplicación bancaria: plantillas HTML y rutas en una aplicación web
* Construcción de un formulario de inicio de sesión y registro
* Métodos para obtener y utilizar datos
* Conceptos de gestión del estado
## Resultados de aprendizaje
**Al completar esta hoja de ruta, los estudiantes adquirirán 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. También desarrollarán una comprensión sólida de los fundamentos del desarrollo web.**
## Recursos adicionales
* Este repositorio ofrece una gran cantidad de recursos para seguir aprendiendo, incluyendo tutoriales, ejemplos de código y retos.
* La plataforma Microsoft Learn ofrece una variedad de cursos y rutas de aprendizaje en desarrollo web.
* Comunidades en línea como Stack Overflow y MDN Web Docs proporcionan apoyo y recursos valiosos para desarrolladores web.
**¡Espero que esta hoja de ruta te ayude en tu camino en el desarrollo web!**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Aviso Legal**:
Este documento ha sido traducido utilizando el servicio de traducción automática [Co-op Translator](https://github.com/Azure/co-op-translator). Aunque nos esforzamos por la precisión, tenga en cuenta que las traducciones automáticas pueden contener errores o inexactitudes. El documento original en su idioma nativo debe considerarse la fuente autorizada. Para información crítica, se recomienda la traducción profesional humana. No somos responsables de ningún malentendido o interpretación errónea que surja 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 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
- **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
- **Projets pratiques** : Terrarium, Jeu de frappe, Extension de navigateur, Jeu spatial, Application bancaire, Éditeur de code et Assistant de chat AI
- [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 additionnels : Generative AI, Data Science, ML, IoT disponibles
### Travailler avec des projets spécifiques
### Travail avec des projets spécifiques
Pour des instructions détaillées sur les projets individuels, consultez les fichiers README dans :
Pour des instructions détaillées sur des projets individuels, référez-vous aux fichiers README dans :
- `quiz-app/README.md` - Application de quiz Vue 3
- `7-bank-project/README.md` - Application bancaire avec authentification
- `5-browser-extension/README.md` - Développement d'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’extensions de navigateur
- `6-space-game/README.md` - Développement de jeu basé sur Canvas
- `9-chat-project/README.md` - Projet assistant de chat AI
### Structure du monorepo
Bien que ce ne soit pas un monorepo traditionnel, ce dépôt contient plusieurs projets indépendants :
Bien qu’il ne s’agisse pas d’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
- Les projets ne partagent pas leurs dépendances
- Travaillez sur chaque projet sans affecter les autres
- Clonez le référentiel complet pour l’expérience complète du programme
---
**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 -->
**Avis 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 efforçons 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 foi. Pour les informations critiques, il est recommandé de recourir à une traduction professionnelle réalisée par un humain. Nous ne saurions être tenus responsables des malentendus ou des erreurs d’interprétation résultant de l’utilisation de cette traduction.
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
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 proposé par les défenseurs du cloud Microsoft. Chacune des 24 leçons explore JavaScript, CSS et HTML à travers des projets pratiques tels que des terrariums, des extensions de navigateur et des jeux spatiaux. Participez aux quiz, discussions et missions 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 dès aujourd’hui !
Rejoignez la communauté Discord Azure AI Foundry
Rejoignez la communauté Azure AI Foundry sur Discord
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)
1. **Faites un Fork du dépôt** : Cliquez sur [](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork)
2. **Clonez le dépôt** : `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git`
3. [**Rejoignez le Discord Azure AI Foundry et rencontrez des experts et d’autres développeurs**](https://discord.com/invite/ByRwuEEgH4)
### 🌐 Support multilingue
### 🌐 Support Multi-langue
#### Pris en charge via GitHub Action (Automatisé & 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 contient plus de 50 traductions, ce qui augmente considérablement la taille du 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 fournit tout ce dont vous avez besoin pour suivre le cours avec un téléchargement beaucoup plus rapide.
<!-- CO-OP TRANSLATOR LANGUAGES TABLE END -->
**Si vous souhaitez que d’autres langues de traduction soient prises en charge, elles sont listées [ici](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)**
**Si vous souhaitez avoir des langues supplémentaires 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 ?_
#### 🧑🎓 _Êtes-vous un é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 certification gratuit. C’est la page à mettre en favori et à consulter régulièrement car nous mettons à jour le contenu chaque mois.
### 📣 Annonce - Nouveaux défis en mode GitHub Copilot Agent à compléter !
### 📣 Annonce - Nouveaux défis en mode GitHub Copilot Agent à réaliser !
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 à réaliser en utilisant GitHub Copilot et le mode Agent. Si vous n’avez jamais utilisé le mode Agent, il est capable non seulement de générer du texte mais aussi de créer et éditer des fichiers, d’exécuter des commandes et plus encore.
### 📣 Annonce - _Nouveau projet à construire avec l’IA générative_
### 📣 Annonce - _Nouveau projet à construire utilisant 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
- Les applications de recherche
Visitez [https://aka.ms/genai-js-course](../../[https:/aka.ms/genai-js-course) pour commencer !
Chaque leçon inclut une mission à accomplir, une vérification des connaissances et un défi pour vous guider sur des sujets comme :
- Le prompt et l’ingénierie des prompts
- Génération d’applications de texte et d’images
- 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 manière d’utiliser ce programme. Nous serions ravis d’avoir vos retours [sur notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) !
**[Apprenants](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, pour chaque leçon, commencez par un quiz 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 avant le cours, 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 après le cours.
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 enrichir votre expérience d’apprentissage, connectez-vous avec vos pairs pour travailler ensemble sur les projets ! Les discussions sont encouragées sur notre [forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions), où notre équipe de modérateurs sera disponible pour répondre à vos questions.
Pour approfondir votre formation, nous 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 formation, nous recommandons vivement d’explorer [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) pour des supports d’études supplémentaires.
### 📋 Préparer votre environnement
### 📋 Installation 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 ! Au début, vous pouvez choisir d’exécuter le programme dans un [Codespace](https://github.com/features/codespaces/) (_un environnement basé sur navigateur, sans besoin d’installer quoi que ce soit_), ou localement sur votre ordinateur en utilisant un éditeur de texte tel que [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon).
#### 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 enregistrer 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 sur 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
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** puis sélectionnez **Open with Codespaces**. Cela créera un nouveau Codespace où travailler.
#### Exécuter le programme localement sur votre ordinateur
Pour exécuter ce programme localement, vous aurez besoin d’un éditeur de texte, d’un navigateur et d’un outil en ligne de commande. Notre première leçon, [Introduction aux langages 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.
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 les différentes options pour chacun de ces outils afin de sélectionner ce qui vous convient le mieux.
Nous recommandons d’utiliser [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) comme éditeur, qui inclut également un [Terminal](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 Visual Studio Code recommandées :
>
> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - pour prévisualiser les pages HTML directement 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
> * [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 :
## 📂 Chaque leçon inclut :
- sketchnote optionnelle
- vidéo supplémentaire optionnelle
- quiz d'échauffement avant la leçon
- leçon écrite
- un sketchnote optionnel
- une vidéo complémentaire optionnelle
- un quiz d’échauffement avant la leçon
- la leçon écrite
- pour les leçons basées sur un projet, des guides étape par étape pour construire le projet
- vérifications des connaissances
- des vérifications des connaissances
- un défi
- lectures complémentaires
- devoir
- [quiz après la leçon](https://ff-quizzes.netlify.app/web/)
- des lectures complémentaires
- un devoir
- un [quiz post-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 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 | Prise en main | Introduction à la programmation et aux outils du métier | Apprendre les bases sous-jacentes de 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 | Prise en main | Bases de GitHub, travail collaboratif en équipe | Comment utiliser GitHub dans votre projet, comment collaborer avec d’autres sur une base de code | [Introduction à GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Prise en main | Accessibilité | 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 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 des 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 des données via des tableaux et des boucles en JavaScript | [Tableaux et boucles](./2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML en pratique | Construire le HTML pour créer un terrarium en ligne, en se concentrant sur la construction d’une 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 le responsive design | [Introduction au CSS](./3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](./3-terrarium/solution/README.md) | Closures JavaScript, manipulation du DOM | Construire le JavaScript pour faire fonctionner le terrarium comme une interface de glisser-déposer, en se 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 | [Jeu de frappe](./4-typing-game/solution/README.md) | Construire un jeu de frappe | Apprendre à utiliser les événements clavier pour piloter la logique de votre application JavaScript | [Programmation événementielle](./4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extension navigateur verte](./5-browser-extension/solution/README.md) | Travailler avec les navigateurs | Apprendre comment fonctionnent les navigateurs, leur histoire, et comment structurer les premiers éléments d’une extension | [À 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 localement | Construire les éléments JavaScript de votre extension navigateur pour appeler une API en utilisant des variables stockées localement | [API, 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 les performances 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 de jeux avancé avec JavaScript | Apprendre l’héritage avec les classes et la composition ainsi que le modèle Pub/Sub, en préparation à la création d’un jeu | [Introduction au développement avancé de jeux](./6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jeu spatial](./6-space-game/solution/README.md) | Dessiner sur un canvas | Apprendre 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écouvrir comment donner du mouvement aux éléments à l’aide des coordonnées cartésiennes et de l’API Canvas | [Déplacement d’éléments](./6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jeu spatial](./6-space-game/solution/README.md) | Détection de collision | Faire entrer en collision les éléments et réagir via des frappes clavier, et prévoir une fonction de temps de recharge pour assurer la performance du jeu | [Détection de collision](./6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu spatial](./6-space-game/solution/README.md) | Tenue du score | Effectuer des calculs mathématiques basés sur le statut et la performance du jeu | [Gestion du score](./6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu spatial](./6-space-game/solution/README.md) | Fin et redémarrage du jeu | Apprendre à finir et redémarrer le jeu, y compris nettoyer les ressources et réinitialiser les 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 | Apprendre à créer le squelette d’un site multipage avec routage et modèles HTML | [Modèles HTML et routes](./7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Application bancaire](./7-bank-project/solution/README.md) | Construire un formulaire de connexion et d’inscription | Apprendre à 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 votre application, comment les récupérer, les stocker et les éliminer | [Données](./7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application bancaire](./7-bank-project/solution/README.md) | Concepts de gestion de l’état | Apprendre comment votre application conserve l’état et comment le gérer de façon programmatique | [Gestion de l’état](./7-bank-project/4-state-management/README.md) | Yohan |
| 25 | [Code Browser/VScode](../../8-code-editor) | Travailler avec VScode | Apprendre à utiliser un éditeur de code | [Utiliser l’éditeur 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 son 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 curriculum est conçu en tenant compte de 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 derniers outils et techniques utilisés par les développeurs web actuels. Les étudiants auront l’occasion de développer une expérience pratique en créant un jeu de frappe, un terrarium virtuel, une extension de navigateur écologique, un jeu de type space invader, et une application bancaire pour entreprises. À la fin de la série, les étudiants auront acquis une solide compréhension du développement web.
> 🎓 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 curriculum sous la forme d’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 veillant à ce que le contenu soit aligné sur les projets, le processus devient plus engageant pour les étudiants et la rétention des concepts est renforcée. Nous avons également écrit plusieurs leçons d’introduction aux bases de JavaScript pour présenter les concepts, accompagnées d’une vidéo de la collection de tutoriels vidéo « [Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon) », dont certains auteurs ont contribué à ce curriculum.
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 à faible enjeu avant la classe fixe l’intention de l’étudiant à apprendre un sujet, tandis qu’un second quiz après la classe assure une meilleure rétention. Ce curriculum a été conçu pour être flexible et amusant et peut être suivi dans son intégralité 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)".
Même si nous avons volontairement évité d’introduire des 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 pour compléter ce curriculum serait d’apprendre Node.js via une autre collection de vidéos : « [Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon) ».
> Consultez notre [Code de Conduite](CODE_OF_CONDUCT.md) et notre guide de [Contribution](CONTRIBUTING.md). Nous accueillons vos retours constructifs !
> Consultez notre [Code de conduite](CODE_OF_CONDUCT.md) et nos lignes directrices pour la [Contribution](CONTRIBUTING.md). Nous accueillons vos retours constructifs !
## 🧭 Accès hors ligne
Vous pouvez consulter cette documentation hors ligne en utilisant [Docsify](https://docsify.js.org/#/). Forkez ce dépôt, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine locale, puis dans le dossier racine de ce dépôt, tapez `docsify serve`. Le site sera servi sur le port 3000 sur votre localhost : `localhost:3000`.
Vous pouvez utiliser cette documentation hors ligne en utilisant [Docsify](https://docsify.js.org/#/). Forkez ce dépôt, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine locale, puis dans le dossier racine de ce dépôt, tapez `docsify serve`. Le site sera servi sur le port 3000 sur votre localhost : `localhost:3000`.
## 📘 PDF
Un PDF de toutes les leçons est disponible [ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
## 🎒 Autres Cours
## 🎒 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 fondamental
[](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst)
[](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst)
@ -247,21 +251,21 @@ Notre équipe produit d'autres cours ! Découvrez :
## Obtenir de l'aide
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 dans des discussions sur MCP. C'est une communauté d'entraide où les questions sont les bienvenues et les connaissances partagées 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.
Ce document a été traduit à l’aide du service de traduction automatisée [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour les informations critiques, une traduction professionnelle réalisée par un humain est recommandée. Nous ne saurions être tenus responsables des malentendus ou interprétations erronées résultant de l’utilisation de cette traduction.
# Feuille de route pour le dépôt Web-Dev-For-Beginners de Microsoft
**Ce dépôt fournit une feuille de route pour apprendre les fondamentaux du développement web avec un focus sur JavaScript, HTML et CSS. Le programme est flexible et peut être suivi en totalité ou en partie, avec 24 leçons réparties sur 12 semaines.**
## Étapes clés
* **Semaines 1-3 :**
* Introduction aux langages de programmation et aux outils du métier
* Notions de base de GitHub
* Accessibilité
* Bases de JS : types de données, fonctions et méthodes
* Prendre des décisions avec JS
* **Semaines 4-6 :**
* Tableaux et boucles
* Terrarium : HTML en pratique
* CSS en pratique
* Closures en JavaScript
* Manipulation du DOM
* **Semaines 7-9 :**
* Typing Game : Programmation pilotée par événements
* Extension de navigateur Green : travailler avec les navigateurs
* Création d’un formulaire, appel d’une API et stockage des variables dans le local storage
* Processus d’arrière-plan dans le navigateur
* Performance web
* **Semaines 10-12 :**
* Space Game : Développement de jeu plus avancé avec JavaScript
* Dessiner sur le canvas
* Déplacement des éléments à l’écran
* Détection de collisions
* Gestion du score, fin et redémarrage du jeu
* Banking App : Modèles HTML et routes dans une application web
* Création d’un formulaire de connexion et d’enregistrement
* Méthodes pour récupérer et utiliser des données
* Concepts de gestion d’état
## Résultats d’apprentissage
**En complétant cette feuille de route, les étudiants acquerront une expérience pratique en construisant un jeu de frappe, un terrarium virtuel, une extension de navigateur écologique, un jeu de type space-invader, et une application bancaire pour entreprises. Ils développeront également une solide compréhension des fondamentaux du développement web.**
## Ressources supplémentaires
* Ce dépôt fournit une multitude de ressources pour aller plus loin, incluant tutoriels, exemples de code et défis.
* La plateforme Microsoft Learn offre une variété de cours et parcours d’apprentissage en développement web.
* Des communautés en ligne comme Stack Overflow et les MDN Web Docs apportent un soutien et des ressources précieuses pour les développeurs web.
**J’espère que cette feuille de route vous aidera dans votre parcours de développement web !**
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Avertissement** :
Ce document a été traduit à l’aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d’en garantir l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant foi. Pour les informations critiques, une traduction professionnelle humaine est recommandée. Nous n’assumons aucune responsabilité en cas de malentendus ou de mauvaises interprétations résultant de l’utilisation de cette traduction.
localizeflow[bot]
1 day ago