From 1c2be46f1b502c804a01d8c4571d7d3a0b30e38c Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Fri, 6 Feb 2026 15:46:22 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 1/1, 13 changes) --- README.md | 2 +- translations/de/.co-op-translator.json | 12 +- translations/de/AGENTS.md | 356 +++++++++++++------------ translations/de/README.md | 205 +++++++------- translations/de/Roadmap.md | 53 ++++ translations/es/.co-op-translator.json | 12 +- translations/es/AGENTS.md | 254 +++++++++--------- translations/es/README.md | 183 ++++++------- translations/es/Roadmap.md | 53 ++++ translations/fr/.co-op-translator.json | 12 +- translations/fr/AGENTS.md | 312 +++++++++++----------- translations/fr/README.md | 206 +++++++------- translations/fr/Roadmap.md | 53 ++++ 13 files changed, 950 insertions(+), 763 deletions(-) create mode 100644 translations/de/Roadmap.md create mode 100644 translations/es/Roadmap.md create mode 100644 translations/fr/Roadmap.md diff --git a/README.md b/README.md index a83a8de0a..13183a257 100644 --- a/README.md +++ b/README.md @@ -215,7 +215,7 @@ Our team produces other courses! Check out: ### LangChain [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) - +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://github.com/microsoft/langchain-for-beginners?WT.mc_id=m365-94501-dwahlin) --- ### Azure / Edge / MCP / Agents diff --git a/translations/de/.co-op-translator.json b/translations/de/.co-op-translator.json index 9f4fc7e58..69d779724 100644 --- a/translations/de/.co-op-translator.json +++ b/translations/de/.co-op-translator.json @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2025-10-03T11:13:31+00:00", + "translation_date": "2026-02-06T15:46:17+00:00", "source_file": "AGENTS.md", "language_code": "de" }, @@ -516,11 +516,17 @@ "language_code": "de" }, "README.md": { - "original_hash": "490c83786552d7fab6390991517bef09", - "translation_date": "2026-01-29T17:32:39+00:00", + "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", + "translation_date": "2026-02-06T15:42:19+00:00", "source_file": "README.md", "language_code": "de" }, + "Roadmap.md": { + "original_hash": "28bf6185fd7f27b62ddc210514366192", + "translation_date": "2026-02-06T15:42:59+00:00", + "source_file": "Roadmap.md", + "language_code": "de" + }, "SECURITY.md": { "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "translation_date": "2025-08-24T11:56:51+00:00", diff --git a/translations/de/AGENTS.md b/translations/de/AGENTS.md index 066888c70..de9b07739 100644 --- a/translations/de/AGENTS.md +++ b/translations/de/AGENTS.md @@ -2,53 +2,53 @@ ## Projektübersicht -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 -- **Praktische Projekte**: Terrarium, Schreibspiel, Browser-Erweiterung, Weltraumspiel, Banking-App, Code-Editor und KI-Chat-Assistent -- **Interaktive Quizze**: 48 Quizze mit jeweils 3 Fragen (Vor-/Nach-Lektionen-Bewertungen) -- **Mehrsprachige Unterstützung**: Automatische Übersetzungen in über 50 Sprachen via GitHub Actions +- **Bildungsinhalte**: 24 strukturierte Lektionen, organisiert in projektbasierten Modulen +- **Praktische Projekte**: Terrarium, Tipp-Spiel, Browser-Erweiterung, Weltraumspiel, Banking-App, Code-Editor und KI-Chat-Assistent +- **Interaktive Quizze**: 48 Quizze mit jeweils 3 Fragen (Vor- und Nach-Lektionsbewertungen) +- **Mehrsprachige Unterstützung**: Automatisierte Übersetzungen für 50+ Sprachen über GitHub Actions - **Technologien**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (für KI-Projekte) ### Architektur -- Bildungsrepository mit lektionenbasierter Struktur -- Jeder Lektionenordner enthält README, Codebeispiele und Lösungen +- Bildungsrepository mit lektionbasierter Struktur +- Jeder Lektionen-Ordner enthält README, Codebeispiele und Lösungen - Eigenständige Projekte in separaten Verzeichnissen (quiz-app, verschiedene Lektionenprojekte) - Übersetzungssystem mit GitHub Actions (co-op-translator) -- Dokumentation wird über Docsify bereitgestellt und ist als PDF verfügbar +- Dokumentation bereitgestellt via Docsify und als PDF verfügbar ## Setup-Befehle -Dieses Repository dient hauptsächlich dem Konsum von Bildungsinhalten. Für die Arbeit mit spezifischen Projekten: +Dieses Repository dient primär dem Konsumieren von Bildungsinhalten. Für das Arbeiten mit spezifischen Projekten: -### Hauptrepository-Setup +### Haupt-Repository Setup ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Quiz-App-Setup (Vue 3 + Vite) +### Quiz App Setup (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Start development server -npm run build # Build for production -npm run lint # Run ESLint +npm run dev # Entwicklungsserver starten +npm run build # Für die Produktion bauen +npm run lint # ESLint ausführen ``` -### Bankprojekt-API (Node.js + Express) +### Bank-Projekt API (Node.js + Express) ```bash cd 7-bank-project/api npm install -npm start # Start API server -npm run lint # Run ESLint -npm run format # Format with Prettier +npm start # API-Server starten +npm run lint # ESLint ausführen +npm run format # Mit Prettier formatieren ``` ### Browser-Erweiterungsprojekte @@ -56,168 +56,168 @@ npm run format # Format with Prettier ```bash cd 5-browser-extension/solution npm install -# Follow browser-specific extension loading instructions +# Befolgen Sie die browserspezifischen Anweisungen zum Laden der Erweiterung ``` -### Weltraumspiel-Projekte +### Space Game Projekte ```bash cd 6-space-game/solution npm install -# Open index.html in browser or use Live Server +# Öffnen Sie index.html im Browser oder verwenden Sie Live Server ``` -### Chat-Projekt (Python-Backend) +### Chat-Projekt (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai -# Set GITHUB_TOKEN environment variable +# Setze die Umgebungsvariable GITHUB_TOKEN python api.py ``` -## Entwicklungsworkflow +## Entwicklungs-Workflow ### Für Inhaltsbeitragende -1. **Forken Sie das Repository** in Ihrem GitHub-Konto -2. **Klonen Sie Ihren Fork** lokal -3. **Erstellen Sie einen neuen Branch** für Ihre Änderungen -4. Nehmen Sie Änderungen an den Lektioneninhalten oder Codebeispielen vor -5. Testen Sie alle Codeänderungen in den relevanten Projektverzeichnissen -6. Reichen Sie Pull-Requests gemäß den Beitragsrichtlinien ein +1. **Repository forken** in dein GitHub-Konto +2. **Fork lokal klonen** +3. **Neuen Branch** für Änderungen erstellen +4. Änderungen an Lektionstexten oder Codebeispielen vornehmen +5. Codeänderungen in relevanten Projektordnern testen +6. Pull Requests gemäß den Beitragsrichtlinien einreichen ### Für Lernende -1. Forken oder klonen Sie das Repository -2. Navigieren Sie nacheinander durch die Lektionenverzeichnisse -3. Lesen Sie die README-Dateien jeder Lektion -4. Machen Sie die Vor-Lektionen-Quizze unter https://ff-quizzes.netlify.app/web/ -5. Arbeiten Sie die Codebeispiele in den Lektionenordnern durch -6. Bearbeiten Sie Aufgaben und Herausforderungen -7. Machen Sie die Nach-Lektionen-Quizze +1. Repository forken oder klonen +2. Lektionen-Ordner nacheinander durchgehen +3. README-Dateien jeder Lektion lesen +4. Pre-Lesson Quizze auf https://ff-quizzes.netlify.app/web/ absolvieren +5. Codebeispiele in Lektionen bearbeiten +6. Aufgaben und Herausforderungen abschließen +7. Post-Lektion Quizze durchführen ### Live-Entwicklung -- **Dokumentation**: Führen Sie `docsify serve` im Root-Verzeichnis aus (Port 3000) -- **Quiz-App**: Führen Sie `npm run dev` im quiz-app-Verzeichnis aus -- **Projekte**: Verwenden Sie die Live Server-Erweiterung von VS Code für HTML-Projekte -- **API-Projekte**: Führen Sie `npm start` in den jeweiligen API-Verzeichnissen aus +- **Dokumentation**: `docsify serve` im Root-Verzeichnis ausführen (Port 3000) +- **Quiz-App**: `npm run dev` im quiz-app-Verzeichnis ausführen +- **Projekte**: VS Code Live Server Extension für HTML-Projekte nutzen +- **API-Projekte**: `npm start` in jeweiligen API-Ordnern ausführen ## Testanweisungen -### Quiz-App-Test +### Quiz App Testen ```bash cd quiz-app -npm run lint # Check for code style issues -npm run build # Verify build succeeds +npm run lint # Überprüfen Sie auf Stilprobleme im Code +npm run build # Überprüfen Sie, ob der Build erfolgreich ist ``` -### Bank-API-Test +### Bank API Testen ```bash cd 7-bank-project/api -npm run lint # Check for code style issues -node server.js # Verify server starts without errors +npm run lint # Überprüfe auf Code-Stilprobleme +node server.js # Überprüfen, ob der Server ohne Fehler startet ``` ### Allgemeiner Testansatz - Dies ist ein Bildungsrepository ohne umfassende automatisierte Tests -- Manuelles Testen konzentriert sich auf: +- Manueller Test fokussiert auf: - Codebeispiele laufen fehlerfrei - - Links in der Dokumentation funktionieren korrekt - - Projekt-Builds werden erfolgreich abgeschlossen - - Beispiele folgen Best Practices + - Links in Dokumentation funktionieren korrekt + - Projekt-Builds laufen erfolgreich durch + - Beispiele folgen Best-Practices -### Vorabprüfungen +### Vor-Einreichungs-Checks -- Führen Sie `npm run lint` in Verzeichnissen mit package.json aus -- Überprüfen Sie, ob Markdown-Links gültig sind -- Testen Sie Codebeispiele im Browser oder mit Node.js -- Stellen Sie sicher, dass Übersetzungen die richtige Struktur beibehalten +- `npm run lint` in Verzeichnissen mit package.json ausführen +- Markdown-Links auf Gültigkeit prüfen +- Codebeispiele im Browser oder Node.js testen +- Übersetzungen auf korrekte Struktur prüfen -## Richtlinien für Code-Stil +## Code-Stil-Richtlinien ### JavaScript -- Verwenden Sie moderne ES6+ Syntax -- Folgen Sie den standardmäßigen ESLint-Konfigurationen in den Projekten -- Verwenden Sie aussagekräftige Variablen- und Funktionsnamen für Bildungszwecke -- Fügen Sie Kommentare hinzu, die Konzepte für Lernende erklären -- Formatieren Sie mit Prettier, wo konfiguriert +- Moderne ES6+ Syntax verwenden +- Standard ESLint-Konfigurationen in Projekten einhalten +- Sinnvolle Variablen- und Funktionsnamen für Bildungszwecke nutzen +- Kommentare zur Erklärung von Konzepten hinzufügen +- Formatierung mit Prettier, wo konfiguriert ### HTML/CSS -- Semantische HTML5-Elemente -- Prinzipien des responsiven Designs +- Semantische HTML5-Elemente verwenden +- Responsive Design-Prinzipien beachten - Klare Klassennamen-Konventionen -- Kommentare, die CSS-Techniken für Lernende erklären +- Kommentare zur Erklärung von CSS-Techniken für Lernende ### Python -- PEP 8 Stilrichtlinien -- Klare, bildungsorientierte Codebeispiele -- Typ-Hinweise, wo hilfreich für das Lernen +- PEP 8 Stilrichtlinien einhalten +- Klare, erklärende Codebeispiele +- Type-Hints wo sinnvoll für Lernzwecke ### Markdown-Dokumentation - Klare Überschriftenhierarchie -- Codeblöcke mit Sprachspezifikation -- Links zu zusätzlichen Ressourcen +- Codeblöcke mit Sprachangabe +- Links zu weiterführenden Ressourcen - Screenshots und Bilder in `images/` Verzeichnissen -- Alt-Text für Bilder für Barrierefreiheit +- Alt-Text für Bilder zur Barrierefreiheit ### Dateiorganisation -- Lektionen nummeriert in Reihenfolge (1-getting-started-lessons, 2-js-basics, etc.) +- Lektionen sequenziell nummeriert (1-getting-started-lessons, 2-js-basics, etc.) - Jedes Projekt hat `solution/` und oft `start/` oder `your-work/` Verzeichnisse -- Bilder werden in lektionenspezifischen `images/` Ordnern gespeichert +- Bilder in lektionenspezifischen `images/` Ordnern gespeichert - Übersetzungen in `translations/{language-code}/` Struktur ## Build und Deployment -### Quiz-App-Deployment (Azure Static Web Apps) +### Quiz App Deployment (Azure Static Web Apps) -Die quiz-app ist für die Bereitstellung auf Azure Static Web Apps konfiguriert: +Die quiz-app ist für das Deployment auf Azure Static Web Apps konfiguriert: ```bash cd quiz-app -npm run build # Creates dist/ folder -# Deploys via GitHub Actions workflow on push to main +npm run build # Erstellt den Ordner dist/ +# Führt Deployment über GitHub Actions Workflow bei Push auf main durch ``` Azure Static Web Apps Konfiguration: - **App-Standort**: `/quiz-app` -- **Ausgabe-Standort**: `dist` +- **Ausgabestandort**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Dokumentations-PDF-Erstellung +### Dokumentation PDF-Erstellung ```bash -npm install # Install docsify-to-pdf -npm run convert # Generate PDF from docs +npm install # Installiere docsify-to-pdf +npm run convert # Generiere PDF aus Docs ``` -### Docsify-Dokumentation +### Docsify Dokumentation ```bash -npm install -g docsify-cli # Install Docsify globally -docsify serve # Serve on localhost:3000 +npm install -g docsify-cli # Docsify global installieren +docsify serve # Lokalhost:3000 bedienen ``` -### Projekt-spezifische Builds +### Projektspezifische Builds -Jedes Projektverzeichnis kann seinen eigenen Build-Prozess haben: -- Vue-Projekte: `npm run build` erstellt Produktions-Bundles -- Statische Projekte: Kein Build-Schritt, Dateien direkt bereitstellen +Jedes Projektverzeichnis kann einen eigenen Build-Prozess haben: +- Vue-Projekte: `npm run build` erzeugt Produktions-Bundles +- Statische Projekte: Kein Build-Schritt, Dateien werden direkt bereitgestellt -## Richtlinien für Pull-Requests +## Pull-Request-Richtlinien -### Titel-Format +### Titelformat -Verwenden Sie klare, beschreibende Titel, die den Bereich der Änderung angeben: +Klare, beschreibende Titel verwenden, die den Änderungsbereich angeben: - `[Quiz-app] Neues Quiz für Lektion X hinzufügen` - `[Lesson-3] Tippfehler im Terrarium-Projekt beheben` - `[Translation] Spanische Übersetzung für Lektion 5 hinzufügen` @@ -228,55 +228,55 @@ Verwenden Sie klare, beschreibende Titel, die den Bereich der Änderung angeben: Vor dem Einreichen eines PR: 1. **Codequalität**: - - Führen Sie `npm run lint` in den betroffenen Projektverzeichnissen aus - - Beheben Sie alle Linting-Fehler und -Warnungen + - `npm run lint` in betroffenen Projektordnern ausführen + - Alle Linting-Fehler und -Warnungen beheben -2. **Build-Verifizierung**: - - Führen Sie `npm run build` aus, falls zutreffend - - Stellen Sie sicher, dass keine Build-Fehler auftreten +2. **Build-Verifikation**: + - `npm run build` ausführen, falls zutreffend + - Keine Build-Fehler zulassen -3. **Link-Validierung**: - - Testen Sie alle Markdown-Links - - Überprüfen Sie, ob Bildreferenzen funktionieren +3. **Linkprüfung**: + - Alle Markdown-Links testen + - Funktionalität der Bildreferenzen prüfen 4. **Inhaltsprüfung**: - - Korrekturlesen auf Rechtschreibung und Grammatik - - Sicherstellen, dass Codebeispiele korrekt und lehrreich sind - - Überprüfen, ob Übersetzungen die ursprüngliche Bedeutung beibehalten + - Rechtschreibung und Grammatik prüfen + - Codebeispiele auf Korrektheit und pädagogischen Wert kontrollieren + - Übersetzungen auf Bedeutungstreue überprüfen ### Beitragsanforderungen -- Zustimmung zur Microsoft CLA (automatische Prüfung beim ersten PR) -- Befolgen Sie den [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- Siehe [CONTRIBUTING.md](./CONTRIBUTING.md) für detaillierte Richtlinien -- Verweisen Sie auf Issue-Nummern in der PR-Beschreibung, falls zutreffend +- Microsoft CLA zustimmen (automatische Prüfung im ersten PR) +- Microsoft Open Source Code of Conduct einhalten: https://opensource.microsoft.com/codeofconduct/ +- Details in [CONTRIBUTING.md](./CONTRIBUTING.md) nachlesen +- Issue-Nummern wenn möglich im PR-Beschreibung referenzieren -### Überprüfungsprozess +### Review-Prozess -- PRs werden von Maintainer und der Community überprüft -- Bildungsverständlichkeit hat Priorität +- PRs werden von Maintainers und Community überprüft +- Pädagogische Klarheit hat Priorität - Codebeispiele sollten aktuellen Best Practices folgen -- Übersetzungen werden auf Genauigkeit und kulturelle Angemessenheit geprüft +- Übersetzungen auf Genauigkeit und kulturelle Angemessenheit geprüft ## Übersetzungssystem -### Automatische Übersetzung +### Automatisierte Übersetzung -- Verwendet GitHub Actions mit co-op-translator Workflow -- Übersetzt automatisch in über 50 Sprachen +- Nutzt GitHub Actions mit co-op-translator Workflow +- Übersetzt automatisch in 50+ Sprachen - Quelldateien in Hauptverzeichnissen - Übersetzte Dateien in `translations/{language-code}/` Verzeichnissen -### Manuelle Verbesserungen an Übersetzungen hinzufügen +### Manuelle Verbesserungen hinzufügen -1. Datei im `translations/{language-code}/` Verzeichnis finden -2. Verbesserungen vornehmen, während die Struktur erhalten bleibt +1. Datei in `translations/{language-code}/` finden +2. Verbesserungen vornehmen, Struktur erhalten 3. Sicherstellen, dass Codebeispiele weiterhin funktionieren -4. Lokalisierte Quiz-Inhalte testen +4. Lokalisierte Quizinhalte testen ### Übersetzungs-Metadaten -Übersetzte Dateien enthalten einen Metadaten-Header: +Übersetzte Dateien enthalten Metadaten-Header: ```markdown **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. \ No newline at end of file +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. + \ No newline at end of file diff --git a/translations/de/README.md b/translations/de/README.md index ab3b4f2d6..a6358fac4 100644 --- a/translations/de/README.md +++ b/translations/de/README.md @@ -2,7 +2,7 @@ [![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) @@ -10,208 +10,207 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Webentwicklung für Einsteiger - Ein Curriculum +# Webentwicklung für Anfänger – Ein Lehrplan -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 Discord Community bei +Treten Sie der Azure AI Foundry Discord-Community bei [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Befolgen Sie diese Schritte, um mit diesen Ressourcen zu starten: -1. **Forken Sie das Repository**: Klicken Sie auf [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Repository klonen**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**Treten Sie dem Azure AI Foundry Discord bei und treffen Sie Experten und andere Entwickler**](https://discord.com/invite/ByRwuEEgH4) ### 🌐 Mehrsprachige Unterstützung -#### Unterstützt durch GitHub Action (Automatisch & Immer auf dem neuesten Stand) +#### Unterstützt durch GitHub Action (Automatisiert & Immer Aktuell) -[Arabisch](../ar/README.md) | [Bengalisch](../bn/README.md) | [Bulgarisch](../bg/README.md) | [Birmanisch (Myanmar)](../my/README.md) | [Chinesisch (vereinfacht)](../zh-CN/README.md) | [Chinesisch (traditionell, Hongkong)](../zh-HK/README.md) | [Chinesisch (traditionell, Macau)](../zh-MO/README.md) | [Chinesisch (traditionell, Taiwan)](../zh-TW/README.md) | [Kroatisch](../hr/README.md) | [Tschechisch](../cs/README.md) | [Dänisch](../da/README.md) | [Niederländisch](../nl/README.md) | [Estnisch](../et/README.md) | [Finnisch](../fi/README.md) | [Französisch](../fr/README.md) | [Deutsch](./README.md) | [Griechisch](../el/README.md) | [Hebräisch](../he/README.md) | [Hindi](../hi/README.md) | [Ungarisch](../hu/README.md) | [Indonesisch](../id/README.md) | [Italienisch](../it/README.md) | [Japanisch](../ja/README.md) | [Kannada](../kn/README.md) | [Koreanisch](../ko/README.md) | [Litauisch](../lt/README.md) | [Malaiisch](../ms/README.md) | [Malajalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalesisch](../ne/README.md) | [Nigerianisches Pidgin](../pcm/README.md) | [Norwegisch](../no/README.md) | [Persisch (Farsi)](../fa/README.md) | [Polnisch](../pl/README.md) | [Portugiesisch (Brasilien)](../pt-BR/README.md) | [Portugiesisch (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumänisch](../ro/README.md) | [Russisch](../ru/README.md) | [Serbisch (Kyrillisch)](../sr/README.md) | [Slowakisch](../sk/README.md) | [Slowenisch](../sl/README.md) | [Spanisch](../es/README.md) | [Suaheli](../sw/README.md) | [Schwedisch](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thailändisch](../th/README.md) | [Türkisch](../tr/README.md) | [Ukrainisch](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamesisch](../vi/README.md) +[Arabisch](../ar/README.md) | [Bengalisch](../bn/README.md) | [Bulgarisch](../bg/README.md) | [Birmanisch (Myanmar)](../my/README.md) | [Chinesisch (vereinfacht)](../zh-CN/README.md) | [Chinesisch (traditionell, Hongkong)](../zh-HK/README.md) | [Chinesisch (traditionell, Macau)](../zh-MO/README.md) | [Chinesisch (traditionell, Taiwan)](../zh-TW/README.md) | [Kroatisch](../hr/README.md) | [Tschechisch](../cs/README.md) | [Dänisch](../da/README.md) | [Niederländisch](../nl/README.md) | [Estnisch](../et/README.md) | [Finnisch](../fi/README.md) | [Französisch](../fr/README.md) | [Deutsch](./README.md) | [Griechisch](../el/README.md) | [Hebräisch](../he/README.md) | [Hindi](../hi/README.md) | [Ungarisch](../hu/README.md) | [Indonesisch](../id/README.md) | [Italienisch](../it/README.md) | [Japanisch](../ja/README.md) | [Kannada](../kn/README.md) | [Koreanisch](../ko/README.md) | [Litauisch](../lt/README.md) | [Malaiisch](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepalesisch](../ne/README.md) | [Nigerianisches Pidgin](../pcm/README.md) | [Norwegisch](../no/README.md) | [Persisch (Farsi)](../fa/README.md) | [Polnisch](../pl/README.md) | [Portugiesisch (Brasilien)](../pt-BR/README.md) | [Portugiesisch (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumänisch](../ro/README.md) | [Russisch](../ru/README.md) | [Serbisch (Kyrillisch)](../sr/README.md) | [Slowakisch](../sk/README.md) | [Slowenisch](../sl/README.md) | [Spanisch](../es/README.md) | [Swahili](../sw/README.md) | [Schwedisch](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thailändisch](../th/README.md) | [Türkisch](../tr/README.md) | [Ukrainisch](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamesisch](../vi/README.md) -> **Möchten Sie lokal klonen?** +> **Lieber lokal klonen?** -> 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: > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > 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. -**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)** -[![In Visual Studio Code öffnen](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=In%20Visual%20Studio%20Code%20öffnen&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](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! -![Hintergrund](../../translated_images/de/background.148a8d43afde5730.webp) +![Background](../../translated_images/de/background.148a8d43afde5730.webp) -- Lektionen von den Grundlagen bis RAG. -- Interagieren Sie mit historischen Charakteren mittels GenAI und unserer Begleit-App. -- Spannende und unterhaltsame Erzählung, Sie reisen durch die Zeit! +- Lektionen, die alles von den Grundlagen bis zu RAG abdecken. +- Interagiere mit historischen Charakteren mittels GenAI und unserer Begleit-App. +- Spaßige und fesselnde Erzählweise, du wirst durch die Zeit reisen! -![Charakter](../../translated_images/de/character.5c0dd8e067ffd693.webp) +![character](../../translated_images/de/character.5c0dd8e067ffd693.webp) -Jede Lektion enthält eine Aufgabe zum Abschließen, eine Wissensüberprüfung und eine Herausforderung, die Sie beim Lernen der Themen unterstützt wie: -- Prompting und Prompt Engineering +Jede Lektion 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. +2. **Repository klonen**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Ausführen des Curriculums in einem Codespace +#### Betrieb des Lehrplans in einem Codespace -Klicken Sie in Ihrer erstellten Kopie dieses Repositories auf die Schaltfläche **Code** und wählen Sie **Open with Codespaces**. Dies erstellt einen neuen Codespace, in dem Sie arbeiten können. +In 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. ![Codespace](../../translated_images/de/createcodespace.0238bbf4d7a8d955.webp) -#### 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 `` 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 `` durch die URL ersetzen, die Sie gerade kopiert haben: ```bash git clone ``` -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 - Wissenskontrollen - eine Herausforderung - ergänzende Lektüre - Aufgabe -- [Nachbereitungsquiz](https://ff-quizzes.netlify.app/web/) +- [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. ## 🗃️ Lektionen -| | Projektname | Vermittelte Konzepte | Lernziele | Verknüpfte Lektion | Autor | -| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 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 | +| | Projektname | Vermittelte Konzepte | Lernziele | Verlinkte Lektion | Autor | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 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) | Kollisions­erkennung | 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: ### LangChain [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) - +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](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: [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) -## Hilfe bekommen +## Hilfe erhalten -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. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Wenn du Produktfeedback oder Fehler beim Erstellen hast, besuche: +Wenn du Feedback zum Produkt hast oder Fehler beim Erstellen auftreten, besuche: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Lizenz -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. --- **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. \ No newline at end of file diff --git a/translations/de/Roadmap.md b/translations/de/Roadmap.md new file mode 100644 index 000000000..375b1d178 --- /dev/null +++ b/translations/de/Roadmap.md @@ -0,0 +1,53 @@ +# 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!** + +--- + + +**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. + \ No newline at end of file diff --git a/translations/es/.co-op-translator.json b/translations/es/.co-op-translator.json index d477e465d..9c1d48e61 100644 --- a/translations/es/.co-op-translator.json +++ b/translations/es/.co-op-translator.json @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2025-10-03T11:12:55+00:00", + "translation_date": "2026-02-06T15:45:13+00:00", "source_file": "AGENTS.md", "language_code": "es" }, @@ -516,11 +516,17 @@ "language_code": "es" }, "README.md": { - "original_hash": "490c83786552d7fab6390991517bef09", - "translation_date": "2026-01-29T17:30:55+00:00", + "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", + "translation_date": "2026-02-06T15:40:15+00:00", "source_file": "README.md", "language_code": "es" }, + "Roadmap.md": { + "original_hash": "28bf6185fd7f27b62ddc210514366192", + "translation_date": "2026-02-06T15:42:46+00:00", + "source_file": "Roadmap.md", + "language_code": "es" + }, "SECURITY.md": { "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "translation_date": "2025-08-24T11:56:41+00:00", diff --git a/translations/es/AGENTS.md b/translations/es/AGENTS.md index 023fbcdb7..f6cacec9f 100644 --- a/translations/es/AGENTS.md +++ b/translations/es/AGENTS.md @@ -1,15 +1,15 @@ # AGENTS.md -## Resumen del Proyecto +## Descripción del Proyecto -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 - **Tecnologías**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (para proyectos de IA) ### Arquitectura @@ -17,28 +17,28 @@ Este es un repositorio de currículo educativo diseñado para enseñar los funda - Repositorio educativo con estructura basada en lecciones - Cada carpeta de lección contiene README, ejemplos de código y soluciones - Proyectos independientes en directorios separados (quiz-app, varios proyectos de lecciones) -- Sistema de traducción utilizando GitHub Actions (co-op-translator) -- Documentación servida mediante Docsify y disponible en formato PDF +- Sistema de traducción usando GitHub Actions (co-op-translator) +- Documentación servida vía Docsify y disponible como PDF ## Comandos de Configuración -Este repositorio está diseñado principalmente para el consumo de contenido educativo. Para trabajar con proyectos específicos: +Este repositorio es principalmente para el consumo de contenido educativo. Para trabajar con proyectos específicos: -### Configuración del Repositorio Principal +### Configuración Principal del Repositorio ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Configuración de la Aplicación de Cuestionarios (Vue 3 + Vite) +### Configuración de Quiz App (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Start development server -npm run build # Build for production -npm run lint # Run ESLint +npm run dev # Iniciar el servidor de desarrollo +npm run build # Construir para producción +npm run lint # Ejecutar ESLint ``` ### API del Proyecto Bancario (Node.js + Express) @@ -46,9 +46,9 @@ npm run lint # Run ESLint ```bash cd 7-bank-project/api npm install -npm start # Start API server -npm run lint # Run ESLint -npm run format # Format with Prettier +npm start # Iniciar servidor API +npm run lint # Ejecutar ESLint +npm run format # Formatear con Prettier ``` ### Proyectos de Extensión de Navegador @@ -56,7 +56,7 @@ npm run format # Format with Prettier ```bash cd 5-browser-extension/solution npm install -# Follow browser-specific extension loading instructions +# Siga las instrucciones específicas del navegador para cargar extensiones ``` ### Proyectos del Juego Espacial @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# Open index.html in browser or use Live Server +# Abrir index.html en el navegador o usar Live Server ``` ### Proyecto de Chat (Backend en Python) @@ -72,96 +72,96 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# Set GITHUB_TOKEN environment variable +# Establecer la variable de entorno GITHUB_TOKEN python api.py ``` -## Flujo de Trabajo de Desarrollo +## Flujo de Trabajo para Desarrollo ### Para Contribuidores de Contenido -1. **Haz un fork del repositorio** en tu cuenta de GitHub +1. **Haz un fork del repositorio** a tu cuenta de GitHub 2. **Clona tu fork** localmente 3. **Crea una nueva rama** para tus cambios 4. Realiza cambios en el contenido de las lecciones o ejemplos de código -5. Prueba los cambios de código en los directorios de proyectos relevantes +5. Prueba cualquier cambio de código en los directorios de proyectos relevantes 6. Envía pull requests siguiendo las pautas de contribución ### Para Estudiantes -1. Haz un fork o clona el repositorio -2. Navega por los directorios de las lecciones en orden +1. Haz fork o clona el repositorio +2. Navega por los directorios de lecciones secuencialmente 3. Lee los archivos README de cada lección -4. Completa los cuestionarios previos a la lección en https://ff-quizzes.netlify.app/web/ -5. Trabaja con los ejemplos de código en las carpetas de las lecciones -6. Completa las tareas y desafíos -7. Realiza los cuestionarios posteriores a la lección +4. Completa los cuestionarios pre-lección en https://ff-quizzes.netlify.app/web/ +5. Trabaja con los ejemplos de código dentro de las carpetas de lecciones +6. Completa tareas y desafíos +7. Realiza los cuestionarios post-lección ### Desarrollo en Vivo - **Documentación**: Ejecuta `docsify serve` en la raíz (puerto 3000) -- **Aplicación de Cuestionarios**: Ejecuta `npm run dev` en el directorio quiz-app +- **Quiz App**: Ejecuta `npm run dev` en el directorio quiz-app - **Proyectos**: Usa la extensión Live Server de VS Code para proyectos HTML - **Proyectos API**: Ejecuta `npm start` en los directorios API correspondientes ## Instrucciones de Pruebas -### Pruebas de la Aplicación de Cuestionarios +### Pruebas para Quiz App ```bash cd quiz-app -npm run lint # Check for code style issues -npm run build # Verify build succeeds +npm run lint # Verificar problemas de estilo de código +npm run build # Verificar que la compilación sea exitosa ``` -### Pruebas de la API Bancaria +### Pruebas para Bank API ```bash cd 7-bank-project/api -npm run lint # Check for code style issues -node server.js # Verify server starts without errors +npm run lint # Comprobar problemas de estilo de código +node server.js # Verificar que el servidor se inicie sin errores ``` ### Enfoque General de Pruebas -- Este es un repositorio educativo sin pruebas automatizadas completas -- Las pruebas manuales se centran en: - - Ejecución de ejemplos de código sin errores - - Funcionamiento correcto de los enlaces en la documentación - - Construcción exitosa de los proyectos - - Cumplimiento de las mejores prácticas en los ejemplos +- Este es un repositorio educativo sin pruebas automatizadas exhaustivas +- Las pruebas manuales se enfocan en: + - Que los ejemplos de código se ejecuten sin errores + - Que los enlaces en la documentación funcionen correctamente + - Que la construcción de proyectos finalice exitosamente + - Que los ejemplos sigan buenas prácticas -### Verificaciones Antes de Enviar +### Verificaciones Previas a la Presentación -- Ejecuta `npm run lint` en los directorios con package.json +- Ejecuta `npm run lint` en directorios con package.json - Verifica que los enlaces en markdown sean válidos -- Prueba los ejemplos de código en el navegador o Node.js -- Asegúrate de que las traducciones mantengan la estructura adecuada +- Prueba los ejemplos de código en navegador o Node.js +- Revisa que las traducciones mantengan la estructura correcta -## Pautas de Estilo de Código +## Guías de Estilo de Código ### JavaScript - Usa sintaxis moderna ES6+ -- Sigue las configuraciones estándar de ESLint proporcionadas en los proyectos -- Usa nombres de variables y funciones significativos para mayor claridad educativa +- Sigue la configuración estándar de ESLint provista en los proyectos +- Usa nombres significativos para variables y funciones para claridad educativa - Agrega comentarios explicando conceptos para los estudiantes - Formatea usando Prettier donde esté configurado ### HTML/CSS -- Elementos semánticos de HTML5 +- Elementos semánticos HTML5 - Principios de diseño responsivo -- Convenciones claras para nombrar clases -- Comentarios explicando técnicas de CSS para los estudiantes +- Convenciones claras para nombres de clases +- Comentarios que expliquen técnicas CSS para los estudiantes ### Python -- Directrices de estilo PEP 8 +- Guías de estilo PEP 8 - Ejemplos de código claros y educativos - Indicaciones de tipo donde sean útiles para el aprendizaje -### Documentación en Markdown +### Documentación Markdown - Jerarquía clara de encabezados - Bloques de código con especificación de lenguaje @@ -172,54 +172,54 @@ node server.js # Verify server starts without errors ### Organización de Archivos - Lecciones numeradas secuencialmente (1-getting-started-lessons, 2-js-basics, etc.) -- Cada proyecto tiene directorios `solution/` y, a menudo, `start/` o `your-work/` -- Imágenes almacenadas en carpetas `images/` específicas de cada lección -- Traducciones en la estructura `translations/{language-code}/` +- Cada proyecto tiene directorios `solution/` y a menudo `start/` o `your-work/` +- Imágenes almacenadas en carpetas `images/` específicas por lección +- Traducciones en estructura `translations/{código-idioma}/` ## Construcción y Despliegue -### Despliegue de la Aplicación de Cuestionarios (Azure Static Web Apps) +### Despliegue de Quiz App (Azure Static Web Apps) -La aplicación quiz-app está configurada para el despliegue en Azure Static Web Apps: +El quiz-app está configurado para despliegue en Azure Static Web Apps: ```bash cd quiz-app -npm run build # Creates dist/ folder -# Deploys via GitHub Actions workflow on push to main +npm run build # Crea la carpeta dist/ +# Despliega mediante un flujo de trabajo de GitHub Actions al hacer push en main ``` Configuración de Azure Static Web Apps: -- **Ubicación de la aplicación**: `/quiz-app` +- **Ubicación de la app**: `/quiz-app` - **Ubicación de salida**: `dist` -- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **Flujo de trabajo**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Generación de Documentación en PDF +### Generación de PDF de Documentación ```bash -npm install # Install docsify-to-pdf -npm run convert # Generate PDF from docs +npm install # Instalar docsify-to-pdf +npm run convert # Generar PDF desde docs ``` -### Documentación con Docsify +### Documentación Docsify ```bash -npm install -g docsify-cli # Install Docsify globally -docsify serve # Serve on localhost:3000 +npm install -g docsify-cli # Instalar Docsify globalmente +docsify serve # Servir en localhost:3000 ``` ### Construcciones Específicas de Proyectos Cada directorio de proyecto puede tener su propio proceso de construcción: -- Proyectos Vue: `npm run build` crea paquetes de producción -- Proyectos estáticos: Sin paso de construcción, sirve los archivos directamente +- Proyectos Vue: `npm run build` crea los bundles de producción +- Proyectos estáticos: No requieren paso de construcción, servir archivos directamente -## Pautas para Pull Requests +## Guías para Pull Requests ### Formato del Título Usa títulos claros y descriptivos que indiquen el área de cambio: - `[Quiz-app] Añadir nuevo cuestionario para la lección X` -- `[Lesson-3] Corregir error tipográfico en el proyecto terrario` +- `[Lesson-3] Corregir error tipográfico en proyecto terrarium` - `[Translation] Añadir traducción al español para la lección 5` - `[Docs] Actualizar instrucciones de configuración` @@ -227,13 +227,13 @@ Usa títulos claros y descriptivos que indiquen el área de cambio: Antes de enviar un PR: -1. **Calidad del Código**: - - Ejecuta `npm run lint` en los directorios de proyectos afectados +1. **Calidad de Código**: + - Ejecuta `npm run lint` en los directorios del proyecto afectado - Corrige todos los errores y advertencias de linting 2. **Verificación de Construcción**: - Ejecuta `npm run build` si aplica - - Asegúrate de que no haya errores de construcción + - Asegúrate de que no haya errores en la construcción 3. **Validación de Enlaces**: - Prueba todos los enlaces en markdown @@ -241,42 +241,42 @@ Antes de enviar un PR: 4. **Revisión de Contenido**: - Revisa ortografía y gramática - - Asegúrate de que los ejemplos de código sean correctos y educativos + - Asegura que los ejemplos de código sean correctos y educativos - Verifica que las traducciones mantengan el significado original ### Requisitos de Contribución -- Aceptar el Microsoft CLA (verificación automática en el primer PR) +- Aceptar el CLA de Microsoft (verificación automática en el primer PR) - Seguir el [Código de Conducta de Código Abierto de Microsoft](https://opensource.microsoft.com/codeofconduct/) -- Consulta [CONTRIBUTING.md](./CONTRIBUTING.md) para pautas detalladas -- Referencia números de issues en la descripción del PR si aplica +- Ver [CONTRIBUTING.md](./CONTRIBUTING.md) para pautas detalladas +- Referenciar números de issues en la descripción del PR si aplica ### Proceso de Revisión -- Los PRs son revisados por mantenedores y la comunidad +- PRs revisados por mantenedores y comunidad - Se prioriza la claridad educativa - Los ejemplos de código deben seguir las mejores prácticas actuales -- Las traducciones son revisadas para precisión y adecuación cultural +- Las traducciones se revisan para precisión y adecuación cultural ## Sistema de Traducción ### Traducción Automática -- Utiliza GitHub Actions con el workflow co-op-translator +- Usa GitHub Actions con el flujo de trabajo co-op-translator - Traduce automáticamente a más de 50 idiomas - Archivos fuente en directorios principales -- Archivos traducidos en `translations/{language-code}/` +- Archivos traducidos en `translations/{código-idioma}/` -### Añadir Mejoras Manuales a Traducciones +### Añadir Mejoras Manuales de Traducción -1. Localiza el archivo en `translations/{language-code}/` -2. Realiza mejoras manteniendo la estructura -3. Asegúrate de que los ejemplos de código sigan siendo funcionales +1. Ubica el archivo en `translations/{código-idioma}/` +2. Haz mejoras preservando la estructura +3. Asegura que los ejemplos de código continúen funcionando 4. Prueba cualquier contenido de cuestionarios localizado ### Metadatos de Traducción -Los archivos traducidos incluyen un encabezado de metadatos: +Los archivos traducidos incluyen encabezado de metadatos: ```markdown **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. \ No newline at end of file +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. + \ No newline at end of file diff --git a/translations/es/README.md b/translations/es/README.md index e67fd7869..48f82b8f0 100644 --- a/translations/es/README.md +++ b/translations/es/README.md @@ -2,7 +2,7 @@ [![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) [![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) [![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) @@ -12,207 +12,208 @@ # 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 +Únete a la Comunidad Azure AI Foundry en Discord [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) Sigue estos pasos para comenzar a usar estos recursos: -1. **Haz un Fork del Repositorio**: Haz clic en [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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) -[Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](./README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) +[Árabe](../ar/README.md) | [Bengalí](../bn/README.md) | [Búlgaro](../bg/README.md) | [Birmano (Myanmar)](../my/README.md) | [Chino (Simplificado)](../zh-CN/README.md) | [Chino (Tradicional, Hong Kong)](../zh-HK/README.md) | [Chino (Tradicional, Macao)](../zh-MO/README.md) | [Chino (Tradicional, Taiwán)](../zh-TW/README.md) | [Croata](../hr/README.md) | [Checo](../cs/README.md) | [Danés](../da/README.md) | [Neerlandés](../nl/README.md) | [Estonio](../et/README.md) | [Finlandés](../fi/README.md) | [Francés](../fr/README.md) | [Alemán](../de/README.md) | [Griego](../el/README.md) | [Hebreo](../he/README.md) | [Hindi](../hi/README.md) | [Húngaro](../hu/README.md) | [Indonesio](../id/README.md) | [Italiano](../it/README.md) | [Japonés](../ja/README.md) | [Kannada](../kn/README.md) | [Coreano](../ko/README.md) | [Lituano](../lt/README.md) | [Malayo](../ms/README.md) | [Malayalam](../ml/README.md) | [Maratí](../mr/README.md) | [Nepalí](../ne/README.md) | [Pidgin Nigeriano](../pcm/README.md) | [Noruego](../no/README.md) | [Persa (Farsi)](../fa/README.md) | [Polaco](../pl/README.md) | [Portugués (Brasil)](../pt-BR/README.md) | [Portugués (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Rumano](../ro/README.md) | [Ruso](../ru/README.md) | [Serbio (Cirílico)](../sr/README.md) | [Eslovaco](../sk/README.md) | [Esloveno](../sl/README.md) | [Español](./README.md) | [Swahili](../sw/README.md) | [Sueco](../sv/README.md) | [Tagalo (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Tailandés](../th/README.md) | [Turco](../tr/README.md) | [Ucraniano](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamita](../vi/README.md) > **¿Prefieres clonar localmente?** -> 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: > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > 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. -**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)** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Abrir en Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](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. ![Background](../../translated_images/es/background.148a8d43afde5730.webp) - Lecciones que cubren desde lo básico hasta RAG. -- Interactúa con personajes históricos usando GenAI y nuestra app compañera. +- Interactúa con personajes históricos usando GenAI y nuestra app complementaria. - Narrativa divertida y atractiva, ¡viajarás en el tiempo! ![character](../../translated_images/es/character.5c0dd8e067ffd693.webp) -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. ![Codespace](../../translated_images/es/createcodespace.0238bbf4d7a8d955.webp) #### 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 `` 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 `` con la URL que acabas de copiar: ```bash git clone ``` -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/) +- lectura complementaria +- asignación +- [cuestionario post-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: ### LangChain [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) - +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](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. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Si tienes comentarios sobre el producto o errores mientras construyes, visita: +Si tienes comentarios sobre el producto o errores al construir, visita: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Licencia -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. --- -**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. \ No newline at end of file diff --git a/translations/es/Roadmap.md b/translations/es/Roadmap.md new file mode 100644 index 000000000..86aa87957 --- /dev/null +++ b/translations/es/Roadmap.md @@ -0,0 +1,53 @@ +# 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!** + +--- + + +**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. + \ No newline at end of file diff --git a/translations/fr/.co-op-translator.json b/translations/fr/.co-op-translator.json index 89e60bc47..b0ec429ad 100644 --- a/translations/fr/.co-op-translator.json +++ b/translations/fr/.co-op-translator.json @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2025-10-03T11:12:18+00:00", + "translation_date": "2026-02-06T15:44:02+00:00", "source_file": "AGENTS.md", "language_code": "fr" }, @@ -516,11 +516,17 @@ "language_code": "fr" }, "README.md": { - "original_hash": "490c83786552d7fab6390991517bef09", - "translation_date": "2026-01-29T17:27:29+00:00", + "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", + "translation_date": "2026-02-06T15:38:07+00:00", "source_file": "README.md", "language_code": "fr" }, + "Roadmap.md": { + "original_hash": "28bf6185fd7f27b62ddc210514366192", + "translation_date": "2026-02-06T15:42:35+00:00", + "source_file": "Roadmap.md", + "language_code": "fr" + }, "SECURITY.md": { "original_hash": "4ecc3bf2e27983d4c780be6f26ee6228", "translation_date": "2025-08-23T22:21:47+00:00", diff --git a/translations/fr/AGENTS.md b/translations/fr/AGENTS.md index f75bff8a6..b38de708a 100644 --- a/translations/fr/AGENTS.md +++ b/translations/fr/AGENTS.md @@ -2,43 +2,43 @@ ## Aperçu du projet -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 -- **Technologies** : HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (pour les projets IA) +- **Projets pratiques** : Terrarium, Jeu de frappe, Extension de navigateur, Jeu spatial, Application bancaire, Éditeur de code et Assistant de chat AI +- **Quiz interactifs** : 48 quiz avec 3 questions chacun (évaluations pré/post-leçon) +- **Support multilingue** : Traductions automatiques en 50+ langues via GitHub Actions +- **Technologies** : HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (pour les projets AI) ### Architecture -- Dépôt éducatif avec une structure basée sur les leçons -- Chaque dossier de leçon contient un README, des exemples de code et des solutions -- Projets autonomes dans des répertoires séparés (quiz-app, divers projets de leçons) +- Référentiel éducatif structuré par leçons +- Chaque dossier de leçon contient README, exemples de code et solutions +- Projets autonomes dans des répertoires distincts (quiz-app, divers projets de leçons) - Système de traduction utilisant GitHub Actions (co-op-translator) - Documentation servie via Docsify et disponible en PDF ## Commandes d'installation -Ce dépôt est principalement destiné à la consommation de contenu éducatif. Pour travailler sur des projets spécifiques : +Ce référentiel est principalement destiné à la consommation de contenu éducatif. Pour travailler avec des projets spécifiques : -### Installation du dépôt principal +### Installation principale du référentiel ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Installation de l'application Quiz (Vue 3 + Vite) +### Installation de l'app Quiz (Vue 3 + Vite) ```bash cd quiz-app npm install -npm run dev # Start development server -npm run build # Build for production -npm run lint # Run ESLint +npm run dev # Démarrer le serveur de développement +npm run build # Construire pour la production +npm run lint # Exécuter ESLint ``` ### API du projet bancaire (Node.js + Express) @@ -46,17 +46,17 @@ npm run lint # Run ESLint ```bash cd 7-bank-project/api npm install -npm start # Start API server -npm run lint # Run ESLint -npm run format # Format with Prettier +npm start # Démarrer le serveur API +npm run lint # Exécuter ESLint +npm run format # Formater avec Prettier ``` -### Projets d'extension de navigateur +### Projets d’extension de navigateur ```bash cd 5-browser-extension/solution npm install -# Follow browser-specific extension loading instructions +# Suivre les instructions spécifiques au navigateur pour le chargement des extensions ``` ### Projets de jeu spatial @@ -64,7 +64,7 @@ npm install ```bash cd 6-space-game/solution npm install -# Open index.html in browser or use Live Server +# Ouvrez index.html dans le navigateur ou utilisez Live Server ``` ### Projet de chat (Backend Python) @@ -72,205 +72,205 @@ npm install ```bash cd 9-chat-project/solution/backend/python pip install openai -# Set GITHUB_TOKEN environment variable +# Définir la variable d'environnement GITHUB_TOKEN python api.py ``` -## Flux de travail de développement +## Workflow de développement ### Pour les contributeurs de contenu -1. **Forkez le dépôt** sur votre compte GitHub +1. **Forkez le référentiel** dans votre compte GitHub 2. **Clonez votre fork** localement 3. **Créez une nouvelle branche** pour vos modifications -4. Apportez des modifications au contenu des leçons ou aux exemples de code -5. Testez les modifications de code dans les répertoires de projets pertinents +4. Modifiez le contenu des leçons ou les exemples de code +5. Testez toute modification de code dans les répertoires des projets concernés 6. Soumettez des pull requests en suivant les directives de contribution ### Pour les apprenants -1. Forkez ou clonez le dépôt -2. Naviguez dans les répertoires des leçons de manière séquentielle +1. Forkez ou clonez le référentiel +2. Naviguez séquentiellement dans les dossiers de leçons 3. Lisez les fichiers README de chaque leçon -4. Complétez les quiz avant la leçon sur https://ff-quizzes.netlify.app/web/ +4. Complétez les quiz pré-leçon sur https://ff-quizzes.netlify.app/web/ 5. Travaillez sur les exemples de code dans les dossiers des leçons -6. Réalisez les devoirs et les défis -7. Passez les quiz après la leçon +6. Complétez les devoirs et défis +7. Passez les quiz post-leçon ### Développement en direct -- **Documentation** : Exécutez `docsify serve` à la racine (port 3000) -- **Application Quiz** : Exécutez `npm run dev` dans le répertoire quiz-app -- **Projets** : Utilisez l'extension Live Server de VS Code pour les projets HTML -- **Projets API** : Exécutez `npm start` dans les répertoires API respectifs +- **Documentation** : Lancez `docsify serve` à la racine (port 3000) +- **Quiz App** : Lancez `npm run dev` dans le répertoire quiz-app +- **Projets** : Utilisez l’extension Live Server de VS Code pour les projets HTML +- **Projets API** : Lancez `npm start` dans les répertoires API concernés ## Instructions de test -### Test de l'application Quiz +### Tests de l'app Quiz ```bash cd quiz-app -npm run lint # Check for code style issues -npm run build # Verify build succeeds +npm run lint # Vérifier les problèmes de style de code +npm run build # Vérifier que la compilation réussit ``` -### Test de l'API bancaire +### Tests de l'API bancaire ```bash cd 7-bank-project/api -npm run lint # Check for code style issues -node server.js # Verify server starts without errors +npm run lint # Vérifier les problèmes de style de code +node server.js # Vérifier que le serveur démarre sans erreurs ``` ### Approche générale de test -- Ce dépôt éducatif ne contient pas de tests automatisés complets +- Il s'agit d'un référentiel éducatif sans tests automatisés complets - Les tests manuels se concentrent sur : - - L'exécution des exemples de code sans erreurs - - La vérification des liens dans la documentation - - La réussite des builds des projets - - Le respect des bonnes pratiques dans les exemples + - L'exécution sans erreur des exemples de code + - Le bon fonctionnement des liens dans la documentation + - La réussite des compilations des projets + - La conformité des exemples aux bonnes pratiques ### Vérifications avant soumission -- Exécutez `npm run lint` dans les répertoires contenant un package.json -- Vérifiez que les liens Markdown sont valides -- Testez les exemples de code dans un navigateur ou avec Node.js -- Assurez-vous que les traductions conservent une structure correcte +- Lancez `npm run lint` dans les répertoires contenant un package.json +- Vérifiez que les liens markdown sont valides +- Testez les exemples de code dans un navigateur ou Node.js +- Assurez-vous que les traductions maintiennent la structure correcte -## Directives de style de code +## Guide de style de code ### JavaScript - Utilisez la syntaxe moderne ES6+ -- Suivez les configurations standard ESLint fournies dans les projets -- Utilisez des noms de variables et de fonctions significatifs pour une clarté éducative +- Suivez les configurations ESLint standard fournies dans les projets +- Utilisez des noms de variables et fonctions significatifs pour la clarté pédagogique - Ajoutez des commentaires expliquant les concepts pour les apprenants -- Formatez avec Prettier là où configuré +- Formatez avec Prettier lorsque configuré ### HTML/CSS - Éléments HTML5 sémantiques - Principes de design responsive -- Conventions claires de nommage des classes +- Conventions claires de nommage de classes - Commentaires expliquant les techniques CSS pour les apprenants ### Python - Directives de style PEP 8 - Exemples de code clairs et éducatifs -- Indications de type utiles pour l'apprentissage +- Indications de type utiles à l’apprentissage ### Documentation Markdown - Hiérarchie claire des titres - Blocs de code avec spécification de langage - Liens vers des ressources supplémentaires -- Captures d'écran et images dans les répertoires `images/` -- Texte alternatif pour les images pour l'accessibilité +- Captures d’écran et images dans les dossiers `images/` +- Texte alternatif pour les images pour l’accessibilité ### Organisation des fichiers - Leçons numérotées séquentiellement (1-getting-started-lessons, 2-js-basics, etc.) -- Chaque projet contient des répertoires `solution/` et souvent `start/` ou `your-work/` -- Images stockées dans des dossiers spécifiques aux leçons `images/` +- Chaque projet possède les dossiers `solution/` et souvent `start/` ou `your-work/` +- Images stockées dans les dossiers `images/` spécifiques à chaque leçon - Traductions dans la structure `translations/{language-code}/` -## Construction et déploiement +## Compilation et déploiement -### Déploiement de l'application Quiz (Azure Static Web Apps) +### Déploiement de l'app Quiz (Azure Static Web Apps) -L'application quiz-app est configurée pour un déploiement sur Azure Static Web Apps : +L'application quiz-app est configurée pour le déploiement sur Azure Static Web Apps : ```bash cd quiz-app -npm run build # Creates dist/ folder -# Deploys via GitHub Actions workflow on push to main +npm run build # Crée le dossier dist/ +# Déploie via le workflow GitHub Actions lors d'un push sur main ``` Configuration Azure Static Web Apps : -- **Emplacement de l'application** : `/quiz-app` +- **Emplacement de l’app** : `/quiz-app` - **Emplacement de sortie** : `dist` - **Workflow** : `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Génération de PDF pour la documentation +### Génération de PDF de la documentation ```bash -npm install # Install docsify-to-pdf -npm run convert # Generate PDF from docs +npm install # Installer docsify-to-pdf +npm run convert # Générer un PDF à partir de docs ``` ### Documentation Docsify ```bash -npm install -g docsify-cli # Install Docsify globally -docsify serve # Serve on localhost:3000 +npm install -g docsify-cli # Installer Docsify globalement +docsify serve # Servir sur localhost:3000 ``` -### Constructions spécifiques aux projets +### Compilations spécifiques aux projets -Chaque répertoire de projet peut avoir son propre processus de construction : -- Projets Vue : `npm run build` crée des bundles de production -- Projets statiques : Pas de processus de construction, servez les fichiers directement +Chaque répertoire de projet peut avoir son propre processus de build : +- Projets Vue : `npm run build` crée les bundles de production +- Projets statiques : Pas d'étape de build, fichiers servis directement ## Directives pour les pull requests -### Format du titre +### Format des titres -Utilisez des titres clairs et descriptifs indiquant la zone de modification : -- `[Quiz-app] Ajout d'un nouveau quiz pour la leçon X` -- `[Lesson-3] Correction d'une faute de frappe dans le projet terrarium` -- `[Translation] Ajout de la traduction espagnole pour la leçon 5` -- `[Docs] Mise à jour des instructions d'installation` +Utilisez des titres clairs et descriptifs indiquant le domaine de changement : +- `[Quiz-app] Ajouter un nouveau quiz pour la leçon X` +- `[Lesson-3] Correction de faute dans le projet terrarium` +- `[Translation] Ajouter la traduction espagnole pour la leçon 5` +- `[Docs] Mise à jour des instructions d’installation` -### Vérifications requises +### Contrôles requis Avant de soumettre une PR : 1. **Qualité du code** : - - Exécutez `npm run lint` dans les répertoires de projet concernés - - Corrigez toutes les erreurs et avertissements de linting + - Lancez `npm run lint` dans les répertoires de projets concernés + - Corrigez toutes les erreurs et avertissements de lint -2. **Vérification de la construction** : - - Exécutez `npm run build` si applicable - - Assurez-vous qu'il n'y a pas d'erreurs de construction +2. **Vérification du build** : + - Lancez `npm run build` si applicable + - Assurez-vous qu’aucune erreur de build n’apparaît 3. **Validation des liens** : - - Testez tous les liens Markdown + - Testez tous les liens markdown - Vérifiez que les références aux images fonctionnent 4. **Revue du contenu** : - - Relisez pour vérifier l'orthographe et la grammaire - - Assurez-vous que les exemples de code sont corrects et éducatifs + - Relisez pour orthographe et grammaire + - Assurez-vous que les exemples de code sont corrects et pédagogiques - Vérifiez que les traductions conservent le sens original ### Exigences de contribution -- Acceptez le CLA de Microsoft (vérification automatisée lors de la première PR) -- Suivez le [Code de conduite Open Source de Microsoft](https://opensource.microsoft.com/codeofconduct/) -- Consultez [CONTRIBUTING.md](./CONTRIBUTING.md) pour des directives détaillées -- Référencez les numéros de problème dans la description de la PR si applicable +- Acceptation de la CLA Microsoft (vérification automatique lors de la première PR) +- Respect du [Code de conduite open source Microsoft](https://opensource.microsoft.com/codeofconduct/) +- Voir [CONTRIBUTING.md](./CONTRIBUTING.md) pour les directives détaillées +- Mentionnez les numéros de tickets dans la description des PR si applicable ### Processus de revue -- Les PR sont examinées par les mainteneurs et la communauté -- La clarté éducative est priorisée +- PRs examinées par les mainteneurs et la communauté +- Priorité à la clarté pédagogique - Les exemples de code doivent suivre les meilleures pratiques actuelles -- Les traductions sont examinées pour leur exactitude et leur pertinence culturelle +- Les traductions sont revues pour précision et adaptation culturelle ## Système de traduction ### Traduction automatisée -- Utilise GitHub Actions avec le workflow co-op-translator -- Traduit automatiquement dans plus de 50 langues -- Fichiers source dans les répertoires principaux -- Fichiers traduits dans les répertoires `translations/{language-code}/` +- Utilise GitHub Actions avec workflow co-op-translator +- Traduction automatique en 50+ langues +- Fichiers sources dans les répertoires principaux +- Fichiers traduits dans `translations/{language-code}/` -### Ajout d'améliorations manuelles aux traductions +### Ajout d’améliorations manuelles 1. Localisez le fichier dans `translations/{language-code}/` -2. Apportez des améliorations tout en préservant la structure +2. Apportez des améliorations en préservant la structure 3. Assurez-vous que les exemples de code restent fonctionnels 4. Testez tout contenu de quiz localisé @@ -289,68 +289,68 @@ CO_OP_TRANSLATOR_METADATA: --> ``` -## Débogage et dépannage +## Débogage et résolution de problèmes ### Problèmes courants -**L'application Quiz ne démarre pas** : -- Vérifiez la version de Node.js (v14+ recommandé) -- Supprimez `node_modules` et `package-lock.json`, puis exécutez `npm install` à nouveau +**L'application quiz ne démarre pas** : +- Vérifiez la version Node.js (v14+ recommandée) +- Supprimez `node_modules` et `package-lock.json`, exécutez `npm install` à nouveau - Vérifiez les conflits de port (par défaut : Vite utilise le port 5173) **Le serveur API ne démarre pas** : -- Vérifiez que la version de Node.js répond aux exigences minimales (node >=10) -- Vérifiez si le port est déjà utilisé +- Vérifiez que la version de Node.js est suffisante (node >=10) +- Contrôlez si le port est déjà utilisé - Assurez-vous que toutes les dépendances sont installées avec `npm install` -**L'extension de navigateur ne se charge pas** : -- Vérifiez que le fichier manifest.json est correctement formaté -- Consultez la console du navigateur pour les erreurs -- Suivez les instructions spécifiques au navigateur pour l'installation de l'extension +**L’extension de navigateur ne charge pas** : +- Vérifiez que manifest.json est bien formaté +- Contrôlez la console du navigateur pour les erreurs +- Suivez les instructions spécifiques au navigateur pour l'installation des extensions -**Problèmes avec le projet de chat Python** : +**Problèmes du projet chat Python** : - Assurez-vous que le package OpenAI est installé : `pip install openai` -- Vérifiez que la variable d'environnement GITHUB_TOKEN est définie -- Vérifiez les permissions d'accès aux modèles GitHub +- Vérifiez que la variable d’environnement GITHUB_TOKEN est définie +- Contrôlez les permissions d’accès aux GitHub Models -**Docsify ne sert pas les docs** : +**Docsify ne sert pas la documentation** : - Installez docsify-cli globalement : `npm install -g docsify-cli` -- Exécutez depuis le répertoire racine du dépôt +- Lancez depuis le répertoire racine du référentiel - Vérifiez que `docs/_sidebar.md` existe -### Conseils pour l'environnement de développement +### Conseils pour l’environnement de développement -- Utilisez VS Code avec l'extension Live Server pour les projets HTML +- Utilisez VS Code avec l’extension Live Server pour les projets HTML - Installez les extensions ESLint et Prettier pour un formatage cohérent -- Utilisez les outils de développement du navigateur pour déboguer JavaScript -- Pour les projets Vue, installez l'extension Vue DevTools pour navigateur +- Utilisez les DevTools du navigateur pour le débogage JavaScript +- Pour les projets Vue, installez l’extension Vue DevTools dans le navigateur ### Considérations de performance -- Le grand nombre de fichiers traduits (50+ langues) signifie que les clones complets sont volumineux -- Utilisez un clone superficiel si vous travaillez uniquement sur le contenu : `git clone --depth 1` -- Excluez les traductions des recherches lorsque vous travaillez sur le contenu en anglais -- Les processus de construction peuvent être lents lors de la première exécution (npm install, Vite build) +- Le grand nombre de fichiers traduits (50+ langues) rend les clones complets volumineux +- Utilisez un clonage superficiel si vous ne travaillez que sur le contenu : `git clone --depth 1` +- Excluez les traductions des recherches lorsque vous travaillez sur le contenu anglais +- Les processus de build peuvent être lents au premier lancement (npm install, build Vite) ## Considérations de sécurité -### Variables d'environnement +### Variables d’environnement -- Les clés API ne doivent jamais être ajoutées au dépôt +- Les clés API ne doivent jamais être commitées dans le référentiel - Utilisez des fichiers `.env` (déjà dans `.gitignore`) -- Documentez les variables d'environnement requises dans les README des projets +- Documentez les variables d’environnement requises dans les README des projets ### Projets Python - Utilisez des environnements virtuels : `python -m venv venv` -- Maintenez les dépendances à jour +- Gardez les dépendances à jour - Les tokens GitHub doivent avoir les permissions minimales requises -### Accès aux modèles GitHub +### Accès aux GitHub Models -- Des tokens d'accès personnel (PAT) sont nécessaires pour les modèles GitHub -- Les tokens doivent être stockés comme variables d'environnement -- Ne jamais ajouter de tokens ou de credentials au dépôt +- Tokens d’accès personnel (PAT) requis pour GitHub Models +- Les tokens doivent être stockés en variables d’environnement +- Ne jamais commiter les tokens ou identifiants ## Notes supplémentaires @@ -358,49 +358,51 @@ CO_OP_TRANSLATOR_METADATA: - Débutants complets en développement web - Étudiants et autodidactes -- Enseignants utilisant le programme en classe -- Le contenu est conçu pour l'accessibilité et une montée en compétences progressive +- Enseignants utilisant le programme en salle de classe +- Contenu conçu pour l’accessibilité et le développement progressif des compétences ### Philosophie éducative -- Approche d'apprentissage basée sur les projets +- Approche d’apprentissage par projets - Vérifications fréquentes des connaissances (quiz) - Exercices de codage pratiques -- Exemples d'application dans le monde réel -- Focus sur les fondamentaux avant les frameworks +- Exemples d’applications réelles +- Accent sur les fondamentaux avant les frameworks -### Maintenance du dépôt +### Maintenance du référentiel -- Communauté active d'apprenants et de contributeurs +- Communauté active d’apprenants et de contributeurs - Mises à jour régulières des dépendances et du contenu -- Les problèmes et discussions sont surveillés par les mainteneurs -- Les mises à jour des traductions sont automatisées via GitHub Actions +- Suivi des issues et discussions par les mainteneurs +- Mises à jour de traduction automatisées via GitHub Actions ### Ressources associées - [Modules Microsoft Learn](https://docs.microsoft.com/learn/) - [Ressources Student Hub](https://docs.microsoft.com/learn/student-hub/) - [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. \ No newline at end of file + +**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. + \ No newline at end of file diff --git a/translations/fr/README.md b/translations/fr/README.md index 413b20de5..d6b7290ed 100644 --- a/translations/fr/README.md +++ b/translations/fr/README.md @@ -1,61 +1,61 @@ [![Licence GitHub](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) [![Contributeurs GitHub](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) -[![Issues GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) -[![Pull requests GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) -[![PRs Bienvenues](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) +[![Problèmes GitHub](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![Demandes de tirage GitHub](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![Observateurs GitHub](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) -[![Fourches GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![Forks GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [![Étoiles GitHub](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Développement web pour débutants - Un programme +# Développement Web pour Débutants - Un programme -Apprenez les fondamentaux du développement web grâce à notre cours complet de 12 semaines dispensé par les Microsoft Cloud Advocates. Chacune des 24 leçons explore JavaScript, CSS, et HTML à travers des projets pratiques comme des terrariums, des extensions de navigateur et des jeux spatiaux. Participez à des quiz, discussions, et exercices pratiques. Améliorez vos compétences et optimisez votre rétention des connaissances grâce à notre pédagogie efficace basée sur des projets. Commencez votre parcours de codage aujourd’hui ! +Apprenez les fondamentaux du développement web avec notre cours complet de 12 semaines 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 [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) Suivez ces étapes pour commencer à utiliser ces ressources : -1. **Faites un fork du dépôt** : Cliquez sur [![Fourches GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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 [![Forks GitHub](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](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) -[Arabe](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgare](../bg/README.md) | [Birman (Myanmar)](../my/README.md) | [Chinois (Simplifié)](../zh-CN/README.md) | [Chinois (Traditionnel, Hong Kong)](../zh-HK/README.md) | [Chinois (Traditionnel, Macao)](../zh-MO/README.md) | [Chinois (Traditionnel, Taïwan)](../zh-TW/README.md) | [Croate](../hr/README.md) | [Tchèque](../cs/README.md) | [Danois](../da/README.md) | [Néerlandais](../nl/README.md) | [Estonien](../et/README.md) | [Finnois](../fi/README.md) | [Français](./README.md) | [Allemand](../de/README.md) | [Grec](../el/README.md) | [Hébreu](../he/README.md) | [Hindi](../hi/README.md) | [Hongrois](../hu/README.md) | [Indonésien](../id/README.md) | [Italien](../it/README.md) | [Japonais](../ja/README.md) | [Kannada](../kn/README.md) | [Coréen](../ko/README.md) | [Lituanien](../lt/README.md) | [Malais](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Népalais](../ne/README.md) | [Pidgin nigérian](../pcm/README.md) | [Norvégien](../no/README.md) | [Persan (Farsi)](../fa/README.md) | [Polonais](../pl/README.md) | [Portugais (Brésil)](../pt-BR/README.md) | [Portugais (Portugal)](../pt-PT/README.md) | [Pendjabi (Gurmukhi)](../pa/README.md) | [Roumain](../ro/README.md) | [Russe](../ru/README.md) | [Serbe (Cyrillique)](../sr/README.md) | [Slovaque](../sk/README.md) | [Slovène](../sl/README.md) | [Espagnol](../es/README.md) | [Swahili](../sw/README.md) | [Suédois](../sv/README.md) | [Tagalog (Philippin)](../tl/README.md) | [Tamoul](../ta/README.md) | [Télougou](../te/README.md) | [Thaï](../th/README.md) | [Turc](../tr/README.md) | [Ukrainien](../uk/README.md) | [Ourdou](../ur/README.md) | [Vietnamien](../vi/README.md) +[Arabe](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgare](../bg/README.md) | [Birman (Myanmar)](../my/README.md) | [Chinois (Simplifié)](../zh-CN/README.md) | [Chinois (Traditionnel, Hong Kong)](../zh-HK/README.md) | [Chinois (Traditionnel, Macao)](../zh-MO/README.md) | [Chinois (Traditionnel, Taïwan)](../zh-TW/README.md) | [Croate](../hr/README.md) | [Tchèque](../cs/README.md) | [Danois](../da/README.md) | [Néerlandais](../nl/README.md) | [Estonien](../et/README.md) | [Finnois](../fi/README.md) | [Français](./README.md) | [Allemand](../de/README.md) | [Grec](../el/README.md) | [Hébreu](../he/README.md) | [Hindi](../hi/README.md) | [Hongrois](../hu/README.md) | [Indonésien](../id/README.md) | [Italien](../it/README.md) | [Japonais](../ja/README.md) | [Kannada](../kn/README.md) | [Coréen](../ko/README.md) | [Lituanien](../lt/README.md) | [Malais](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Népalais](../ne/README.md) | [Pidgin nigérian](../pcm/README.md) | [Norvégien](../no/README.md) | [Persan (Farsi)](../fa/README.md) | [Polonais](../pl/README.md) | [Portugais (Brésil)](../pt-BR/README.md) | [Portugais (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Roumain](../ro/README.md) | [Russe](../ru/README.md) | [Serbe (Cyrillique)](../sr/README.md) | [Slovaque](../sk/README.md) | [Slovène](../sl/README.md) | [Espagnol](../es/README.md) | [Swahili](../sw/README.md) | [Suédois](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamoul](../ta/README.md) | [Télougou](../te/README.md) | [Thaï](../th/README.md) | [Turc](../tr/README.md) | [Ukrainien](../uk/README.md) | [Ourdou](../ur/README.md) | [Vietnamien](../vi/README.md) -> **Vous préférez cloner localement ?** +> **Préférez-vous cloner localement ?** -> 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 : > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > 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. -**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)** -[![Ouvrir dans Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Ouvrir%20dans%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Ouvrir dans Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](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 ! -![Arrière-plan](../../translated_images/fr/background.148a8d43afde5730.webp) +![Fond](../../translated_images/fr/background.148a8d43afde5730.webp) - Leçons couvrant tout, des bases au RAG. -- Interagissez avec des personnages historiques grâce à l’IA générative et notre application compagnon. -- Une narration amusante et captivante, vous voyagez dans le temps ! +- Interagissez avec des personnages historiques utilisant GenAI et notre application compagnon. +- Narration ludique et engageante, vous voyagez dans le temps ! ![personnage](../../translated_images/fr/character.5c0dd8e067ffd693.webp) -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. ![Codespace](../../translated_images/fr/createcodespace.0238bbf4d7a8d955.webp) #### 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 `` 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 : ### LangChain [![LangChain4j for Beginners](https://img.shields.io/badge/LangChain4j%20for%20Beginners-22C55E?style=for-the-badge&&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchain4j-for-beginners) [![LangChain.js for Beginners](https://img.shields.io/badge/LangChain.js%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](https://aka.ms/langchainjs-for-beginners?WT.mc_id=m365-94501-dwahlin) - +[![LangChain for Beginners](https://img.shields.io/badge/LangChain%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=0553D6)](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 [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-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 [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](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. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Si vous avez des retours produit ou des erreurs lors de la construction, visitez : +Si vous avez des retours sur le produit ou des erreurs lors de la création, visitez : [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Licence -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. --- **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. \ No newline at end of file diff --git a/translations/fr/Roadmap.md b/translations/fr/Roadmap.md new file mode 100644 index 000000000..8bd42288e --- /dev/null +++ b/translations/fr/Roadmap.md @@ -0,0 +1,53 @@ +# 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 !** + +--- + + +**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. + \ No newline at end of file