Web-Dev-For-Beginners/translations/de

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 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

Folgen Sie diesen Schritten, um mit diesen Ressourcen zu starten:

1. Repository forken: Klicken Sie auf
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

🌐 Mehrsprachige Unterstützung

Unterstützt durch GitHub Action (Automatisiert & Immer Aktuell)

Arabisch | Bengalisch | Bulgarisch | Birmanisch (Myanmar) | Chinesisch (vereinfacht) | Chinesisch (traditionell, Hongkong) | Chinesisch (traditionell, Macau) | Chinesisch (traditionell, Taiwan) | Kroatisch | Tschechisch | Dänisch | Niederländisch | Estnisch | Finnisch | Französisch | Deutsch | Griechisch | Hebräisch | Hindi | Ungarisch | Indonesisch | Italienisch | Japanisch | Kannada | Koreanisch | Litauisch | Malaiisch | Malayalam | Marathi | Nepalesisch | Nigerianisches Pidgin | Norwegisch | Persisch (Farsi) | Polnisch | Portugiesisch (Brasilien) | Portugiesisch (Portugal) | Punjabi (Gurmukhi) | Rumänisch | Russisch | Serbisch (Kyrillisch) | Slowakisch | Slowenisch | Spanisch | Swahili | Schwedisch | Tagalog (Filipino) | Tamil | Telugu | Thailändisch | Türkisch | Ukrainisch | Urdu | Vietnamesisch

Lieber lokal klonen?

Dieses Repository enthält über 50 Sprachübersetzungen, was die Download-Größe erheblich erhöht. Um ohne Übersetzungen zu klonen, nutzen Sie sparse checkout:

git 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'

So erhalten Sie alles, was Sie benötigen, um den Kurs mit einem viel schnelleren Download abzuschließen.

Wenn Sie weitere Übersetzungssprachen wünschen, finden Sie die unterstützten Sprachen hier

🧑‍🎓 Bist du Student?

Besuche die Student Hub Seite, 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 zum Abschließen!

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

Neues AI-Assistenten-Projekt hinzugefügt, schau es dir an Projekt

📣 Ankündigung – Neuer Lehrplan zu Generativer KI für JavaScript wurde gerade veröffentlicht

Verpasse nicht unseren neuen Lehrplan zur Generativen KI!

Besuche https://aka.ms/genai-js-course, um zu starten!

• 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!

Jede Lektion beinhaltet eine Aufgabe, einen Wissenscheck und eine Challenge, die dich in Themen wie:

• Prompting und Prompt-Engineering
• Text- und Bild-App-Generierung
• Suchanwendungen
  anleiten.

Besuche https://aka.ms/genai-js-course, um zu starten!

🌱 Erste Schritte

Lehrkräfte, wir haben einige Vorschläge aufgenommen, wie Sie diesen Lehrplan verwenden können. Wir freuen uns auf Ihr Feedback in unserem Diskussionsforum!

Lernende 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 dein Lernerlebnis zu verbessern, verbinde dich mit deinen Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind erwünscht in unserem Diskussionsforum, wo unser Moderatorenteam für deine Fragen zur Verfügung steht.

Für deine weitere Bildung empfehlen wir dringend, Microsoft Learn zu erkunden, um zusätzliches Lernmaterial zu finden.

📋 Einrichtung deiner Umgebung

Dieser Lehrplan verfügt über eine sofort einsatzfertige Entwicklungsumgebung! Zu Beginn kannst du wählen, ob du den Lehrplan in einem Codespace (einer browserbasierten Umgebung ohne Installation) oder lokal auf deinem Computer mit einem Texteditor wie Visual Studio Code ausführen möchtest.

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.

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

Betrieb des Lehrplans in einem Codespace

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.

Betrieb des Lehrplans lokal auf deinem Computer

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, führt dich durch verschiedene Optionen für diese Tools, damit du das auswählen kannst, was am besten für dich passt.

Unsere Empfehlung ist es, Visual Studio Code als Editor zu verwenden, der auch ein integriertes Terminal besitzt. Du kannst Visual Studio Code hier herunterladen.

1. Klone dein Repository auf deinen Computer. Das kannst du tun, indem du den Code-Button anklickst und die URL kopierst:

   CodeSpace Dann öffnen Sie das Terminal innerhalb von Visual Studio Code und führen Sie den folgenden Befehl aus, wobei Sie <your-repository-url> durch die URL ersetzen, die Sie gerade kopiert haben:

   git clone <your-repository-url>
   

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 - um HTML-Seiten innerhalb von Visual Studio Code vorzuschauen
• Copilot - um Ihnen beim schnelleren Schreiben von Code zu helfen

📂 Jede Lektion beinhaltet:

• optionale Sketchnote
• optionales ergänzendes Video
• Aufwärm-Quiz vor der Lektion
• schriftliche Lektion
• bei projektbasierten Lektionen Schritt-für-Schritt-Anleitungen zum Aufbau des Projekts
• Wissenskontrollen
• eine Herausforderung
• ergänzende Lektüre
• Aufgabe
• Quiz nach der Lektion

Eine Anmerkung zu den Quizzen: Alle Quizze befinden sich im Quiz-app-Ordner, insgesamt 48 Quizze mit je drei Fragen. Sie sind hier 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	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	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	Floor
03	Einstieg	Barrierefreiheit	Lernen Sie die Grundlagen der Web-Barrierefreiheit	Grundlagen Barrierefreiheit	Christopher
04	JS-Grundlagen	JavaScript Datentypen	Die Grundlagen von JavaScript-Datentypen	Datentypen	Jasmine
05	JS-Grundlagen	Funktionen und Methoden	Lernen Sie Funktionen und Methoden zur Steuerung des Anwendungslogikflusses	Funktionen und Methoden	Jasmine und Christopher
06	JS-Grundlagen	Entscheidungen mit JS treffen	Lernen Sie, wie Sie Bedingungen in Ihrem Code mit Entscheidungsstrukturen erstellen	Entscheidungen treffen	Jasmine
07	JS-Grundlagen	Arrays und Schleifen	Arbeiten Sie mit Daten unter Verwendung von Arrays und Schleifen in JavaScript	Arrays und Schleifen	Jasmine
08	Terrarium	HTML in der Praxis	Erstellen Sie das HTML, um ein Online-Terrarium anzulegen, mit Fokus auf den Aufbau eines Layouts	Einführung in HTML	Jen
09	Terrarium	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	Jen
10	Terrarium	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	Jen
11	Typing Game	Aufbau eines Tipp-Spiels	Lernen Sie, wie Sie Tastatureignisse verwenden, um die Logik Ihrer JavaScript-App zu steuern	Ereignisgesteuerte Programmierung	Christopher
12	Green Browser Extension	Arbeiten mit Browsern	Lernen Sie, wie Browser funktionieren, ihre Geschichte und wie Sie die ersten Elemente einer Browsererweiterung gestalten	Über Browser	Jen
13	Green Browser Extension	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	Jen
14	Green Browser Extension	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	Jen
15	Space Game	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	Chris
16	Space Game	Zeichnen auf Canvas	Lernen Sie die Canvas-API kennen, die zum Zeichnen von Elementen auf einem Bildschirm verwendet wird	Zeichnen auf Canvas	Chris
17	Space Game	Bewegen von Elementen auf dem Bildschirm	Entdecken Sie, wie Elemente mit kartesischen Koordinaten und der Canvas-API Bewegung erhalten	Bewegen von Elementen	Chris
18	Space Game	Kollisions­erkennung	Lassen Sie Elemente kollidieren und aufeinander reagieren, basierend auf Tastatureingaben, und fügen Sie eine Cooldown-Funktion hinzu	Kollisionserkennung	Chris
19	Space Game	Punkteverwaltung	Führen Sie mathematische Berechnungen basierend auf dem Status und der Leistung des Spiels durch	Punkteverwaltung	Chris
20	Space Game	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	Chris
21	Banking App	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	Yohan
22	Banking App	Login- und Registrierungsformular erstellen	Lernen Sie, wie man Formulare erstellt und Validierungsroutinen handhabt	Formulare	Yohan
23	Banking App	Methoden zum Abrufen und Verwalten von Daten	Wie Daten in Ihre App hinein- und herausfließen, wie man sie abruft, speichert und entsorgt	Daten	Yohan
24	Banking App	Konzepte des State Managements	Lernen Sie, wie Ihre App den Zustand beibehält und diesen programmatisch verwaltet	State Management	Yohan
25	Browser/VScode-Code	Arbeiten mit VScode	Lernen Sie, wie man einen Code-Editor benutzt	Verwendung des VScode Code Editors	Chris
26	AI Assistants	Arbeiten mit KI	Lernen Sie, wie Sie Ihren eigenen KI-Assistenten erstellen	KI-Assistent-Projekt	Chris

🏫 Pädagogik

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 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.

🎓 Sie können die ersten Lektionen dieses Curriculums als Lernpfad bei Microsoft Learn absolvieren!

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“, deren Autoren teilweise zum Curriculum beigetragen haben.

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.

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“.

Besuchen Sie unsere Verhaltensregeln und Beitragsrichtlinien. Wir freuen uns über Ihr konstruktives Feedback!

🧭 Offline-Zugriff

Sie können diese Dokumentation offline mit Docsify ausführen. Forken Sie dieses Repository, installieren Sie Docsify 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 finden Sie hier.

🎒 Weitere Kurse

Unser Team produziert weitere Kurse! Schau dir an:

LangChain

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

Hilfe erhalten

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.

Wenn du Feedback zum Produkt hast oder Fehler beim Erstellen auftreten, besuche:

Lizenz

Dieses Repository ist unter der MIT-Lizenz lizenziert. Weitere Informationen findest du in der LICENSE Datei.

---

Haftungsausschluss:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst 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.