Web-Dev-For-Beginners/translations/de

Webentwicklung für Anfänger - Ein Lehrplan

Lerne die Grundlagen der Webentwicklung mit unserem umfassenden 12-wöchigen Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen vertieft JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele. Engagiere dich mit Quizzen, Diskussionen und praktischen Aufgaben. Verbessere deine Fähigkeiten und optimiere dein Wissensspeicher mit unserer effektiven projektbasierten Didaktik. Starte noch heute deine Programmierreise!

Tritt der Azure AI Foundry Discord Community bei

Folge diesen Schritten, um die Ressourcen zu nutzen:

1. Repository forken: Klicke
2. Repository klonen: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Tritt dem Azure AI Foundry Discord bei und triff Experten und andere Entwickler

🌐 Mehrsprachige Unterstützung

Unterstützt über 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 | Suaheli | 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, verwende Sparse Checkout:

Bash / macOS / Linux:

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'

CMD (Windows):

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 erhältst du alles, um den Kurs zu absolvieren – und der Download geht viel schneller.

Wenn du weitere Übersetzungen wünschst, findest du die unterstützten Sprachen hier

🧑‍🎓 Bist du Student?

Besuche die Student Hub-Seite, wo du Anfängerressourcen, Studentenpakete und sogar Möglichkeiten findest, einen kostenlosen Zertifikatsgutschein zu erhalten. Diese Seite solltest du als Lesezeichen speichern und regelmäßig besuchen, da wir monatlich Inhalte austauschen.

📣 Ankündigung – Neue GitHub Copilot Agent Mode Herausforderungen zum Abschließen!

Neue Herausforderung hinzugefügt, suche nach "GitHub Copilot Agent Challenge 🚀" in den meisten Kapiteln. Das ist eine neue Challenge für dich, die du mit GitHub Copilot und dem Agent Mode abschließen kannst. Falls du den Agent Mode noch nicht benutzt hast: Er erzeugt nicht nur Text, sondern kann auch Dateien erstellen und bearbeiten, Befehle ausführen und mehr.

📣 Ankündigung – Neues Projekt mit Generativer KI

Neues KI-Assistent-Projekt gerade 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 Generative AI Lehrplan!

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

• Lektionen, die alles von den Grundlagen bis zu RAG abdecken.
• Interagiere mit historischen Figuren mit GenAI und unserer Begleit-App.
• Spaßige und fesselnde Erzählweise, du reist durch die Zeit!

Jede Lektion enthält eine Aufgabe, einen Wissenscheck und eine Challenge, die dich beim Lernen von Themen wie den folgenden leitet:

• Prompting und Prompt-Engineering
• Text- und Bildanwendungs-Generierung
• Suchanwendungen

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

🌱 Erste Schritte

Lehrkräfte, wir haben einige Vorschläge aufgenommen, wie ihr diesen Lehrplan nutzen könnt. Wir freuen uns über euer Feedback in unserem Diskussionsforum!

Lernende, beginne jede Lektion mit einem Pre-Lecture-Quiz, lese dann das Vorlesungsmaterial, bearbeite die verschiedenen Aktivitäten und überprüfe dein Verständnis mit dem Post-Lecture-Quiz.

Um dein Lernen zu verbessern, vernetze dich mit deinen Mitlernenden, um gemeinsam an Projekten zu arbeiten! Diskussionen sind in unserem Diskussionsforum erwünscht, wo unser Moderatorenteam deine Fragen beantwortet.

Für eine weiterführende Ausbildung empfehlen wir dringend, Microsoft Learn für zusätzliche Lernmaterialien zu erkunden.

📋 Einrichtung deiner Umgebung

Dieser Lehrplan verfügt über eine sofort einsatzbereite Entwicklungsumgebung! Du kannst zu Beginn wählen, ob du den Lehrplan in einem Codespace (eine browserbasierte, installfreie Umgebung) oder lokal auf deinem Computer mit einem Texteditor wie Visual Studio Code ausführen möchtest.

Erstelle dein eigenes Repository

Damit du deine Arbeit leicht speichern kannst, wird empfohlen, eine eigene Kopie dieses Repositorys zu erstellen. Dazu klicke auf den Button Use this template oben auf der Seite. Damit 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 rechts oben auf dieser Seite.
2. Repository klonen: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Ausführen des Lehrplans in einem Codespace

In deiner eigenen Kopie dieses Repositorys, klicke auf den Button Code und wähle Open with Codespaces. Dies erstellt einen neuen Codespace, in dem du arbeiten kannst.

Ausführen 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 Werkzeuge, sodass du wählen kannst, was am besten zu dir passt.

Wir empfehlen die Nutzung von Visual Studio Code als Editor, der auch ein integriertes Terminal bietet. Visual Studio Code kannst du hier herunterladen.

1. Klone dein Repository auf deinen Computer. Du kannst dies tun, indem du auf die Code-Schaltfläche klickst und die URL kopierst:

   CodeSpace

   Öffne dann Terminal innerhalb von Visual Studio Code und führe den folgenden Befehl aus, wobei du <your-repository-url> durch die gerade kopierte URL ersetzt:

   git clone <your-repository-url>
   

2. Öffne den Ordner in Visual Studio Code. Du kannst dies tun, indem du auf Datei > Ordner öffnen klickst und den gerade geklonten Ordner auswählst.

Empfohlene Visual Studio Code-Erweiterungen:

• Live Server - um HTML-Seiten direkt in Visual Studio Code vorzuschauen
• Copilot - um dir beim schnelleren Schreiben von Code zu helfen

📂 Jede Lektion beinhaltet:

• optionales Sketchnote
• optionales ergänzendes Video
• Aufwärmquiz vor der Lektion
• schriftliche Lektion
• für projektbasierte Lektionen Schritt-für-Schritt-Anleitungen zum Erstellen des Projekts
• Wissensüberprüfungen
• eine Herausforderung
• ergänzende Lektüre
• Aufgabe
• Quiz nach der Lektion

Ein Hinweis zu den Quizzen: Alle Quizze sind im Ordner Quiz-app enthalten, insgesamt 48 Quizze mit jeweils drei Fragen. Sie sind hier verfügbar. Die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folge den Anweisungen im Ordner quiz-app.

🗃️ Lektionen

	Projektname	Erlernte Konzepte	Lernziele	Verknüpfte Lektion	Autor
01	Erste Schritte	Einführung in Programmierung und Werkzeuge	Erlerne die grundlegenden Konzepte der meisten Programmiersprachen und Software, die professionelle Entwickler verwenden	Einführung in Programmiersprachen und Werkzeuge	Jasmine
02	Erste Schritte	Grundlagen von GitHub, inklusive Teamarbeit	Wie man GitHub im Projekt nutzt und mit anderen an einer Codebasis zusammenarbeitet	Einführung in GitHub	Floor
03	Erste Schritte	Barrierefreiheit	Erlerne die Grundlagen der Web-Barrierefreiheit	Grundlagen der Barrierefreiheit	Christopher
04	JS-Grundlagen	JavaScript-Datentypen	Die Grundlagen der JavaScript-Datentypen	Datentypen	Jasmine
05	JS-Grundlagen	Funktionen und Methoden	Lerne Funktionen und Methoden kennen, um den Ablauf einer Anwendung zu steuern	Funktionen und Methoden	Jasmine und Christopher
06	JS-Grundlagen	Entscheidungen in JS treffen	Lerne, wie man Bedingungen im Code mit Entscheidungsstrukturen erstellt	Entscheidungen treffen	Jasmine
07	JS-Grundlagen	Arrays und Schleifen	Arbeite mit Daten in JavaScript mithilfe von Arrays und Schleifen	Arrays und Schleifen	Jasmine
08	Terrarium	HTML in der Praxis	Erstelle das HTML, um ein Online-Terrarium zu bauen, mit Schwerpunkt auf Layout	Einführung in HTML	Jen
09	Terrarium	CSS in der Praxis	Erstelle das CSS, um das Online-Terrarium zu stylen, mit Fokus auf CSS-Grundlagen und responsives Design	Einführung in CSS	Jen
10	Terrarium	JavaScript Closures, DOM-Manipulation	Erstelle das JavaScript, damit das Terrarium als Drag/Drop-Oberfläche funktioniert, Fokus auf Closures und DOM-Manipulation	JavaScript Closures, DOM-Manipulation	Jen
11	Tipp-Spiel	Ein Tipp-Spiel bauen	Lerne, wie Tastaturereignisse zur Steuerung der Logik deiner JavaScript-App verwendet werden	Ereignisgesteuerte Programmierung	Christopher
12	Grüne Browsererweiterung	Arbeiten mit Browsern	Lerne, wie Browser funktionieren, ihre Geschichte und wie man erste Elemente einer Browsererweiterung erstellt	Über Browser	Jen
13	Grüne Browsererweiterung	Formular erstellen, API aufrufen und Variablen im lokalen Speicher ablegen	Erstelle JavaScript-Elemente deiner Browsererweiterung, um eine API unter Verwendung lokal gespeicherter Variablen zu nutzen	APIs, Formulare und lokaler Speicher	Jen
14	Grüne Browsererweiterung	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	Jen
15	Weltraum-Spiel	Fortgeschrittene Spieleentwicklung mit JavaScript	Lerne Vererbung mittels Klassen und Komposition sowie das Pub/Sub-Muster, als Vorbereitung für den Bau eines Spiels	Einführung in die fortgeschrittene Spieleentwicklung	Chris
16	Weltraum-Spiel	Zeichnen auf Canvas	Lerne die Canvas-API kennen, um Elemente auf einem Bildschirm zu zeichnen	Zeichnen auf Canvas	Chris
17	Weltraum-Spiel	Elemente auf dem Bildschirm bewegen	Entdecke, wie Elemente Bewegung mit kartesischen Koordinaten und der Canvas-API erhalten	Elemente bewegen	Chris
18	Weltraum-Spiel	Kollisions-Erkennung	Lasse Elemente kollidieren und aufeinander reagieren, nutze Tastendrucke und implementiere eine Abklingfunktion zur Leistungssteigerung	Kollisions-Erkennung	Chris
19	Weltraum-Spiel	Punkte zählen	Führe mathematische Berechnungen basierend auf Spielstatus und Leistung durch	Punkte zählen	Chris
20	Weltraum-Spiel	Spiel beenden und neu starten	Lerne, wie man das Spiel beendet und neu startet, inklusive Bereinigung von Ressourcen und Zurücksetzen von Variablen	Die Endbedingung	Chris
21	Bankanwendung	HTML-Templates und Routen in einer Web-App	Lerne, wie man das Gerüst einer mehrseitigen Webseite mithilfe von Routing und HTML-Templates erstellt	HTML-Templates und Routen	Yohan
22	Bankanwendung	Login- und Registrierungsformular erstellen	Lerne, wie man Formulare baut und Validierungsroutinen behandelt	Formulare	Yohan
23	Bankanwendung	Methoden zum Abrufen und Nutzen von Daten	Wie Daten in die App gelangen und wieder herausfließen, wie man sie abruft, speichert und entfernt	Daten	Yohan
24	Bankanwendung	Konzepte des State-Managements	Lerne, wie deine App Zustände behält und wie man diese programmatisch verwaltet	State-Management	Yohan
25	Browser/VScode Code	Arbeiten mit VScode	Lerne, wie du einen Code-Editor benutzt	Visual Studio Code Editor verwenden	Chris
26	KI-Assistenten	Arbeiten mit KI	Lerne, wie du deinen eigenen KI-Assistenten baust	KI-Assistenten-Projekt	Chris

🏫 Pädagogik

Unser Curriculum basiert auf zwei zentralen pädagogischen Prinzipien:

• 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 Studierenden haben die Gelegenheit, praktische Erfahrungen zu sammeln, indem sie ein Tipp-Spiel, ein virtuelles Terrarium, eine umweltfreundliche Browser-Erweiterung, ein Weltraum-Invader-artiges Spiel und eine Bankanwendung für Unternehmen bauen. Am Ende der Reihe verfügen die Studierenden über ein solides Verständnis der Webentwicklung.

🎓 Die ersten Lektionen dieses Curriculums kannst du auch als Learning Path auf Microsoft Learn absolvieren!

Indem sichergestellt wird, dass die Inhalte auf Projekte abgestimmt sind, wird der Prozess für die Lernenden spannender und die Behaltensrate der Konzepte verbessert. Wir haben auch mehrere Einstiegskapitel zu den Grundlagen von JavaScript geschrieben und mit Videos aus der Tutorial-Reihe "Beginners Series to: JavaScript" kombiniert – einige der Autoren haben zu diesem Curriculum beigetragen.

Darüber hinaus setzt ein niedrigschwelliges Quiz vor der Lektion die Lernabsicht der Studierenden, während ein weiteres Quiz danach die Behaltensrate sicherstellt. Das Curriculum wurde so konzipiert, dass es flexibel und unterhaltsam ist und sowohl vollständig als auch teilweise absolviert werden kann. Die Projekte starten klein und werden im Verlauf des 12-Wochen-Zyklus zunehmend komplexer.

Während wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten eines Webentwicklers vor der Anwendung eines Frameworks zu konzentrieren, wäre ein guter nächster Schritt nach Abschluss dieses Curriculums das Erlernen von Node.js anhand einer weiteren Videoserie: "Beginner Series to: Node.js".

Besuche unsere Verhaltensregeln und Beitragsrichtlinien. Wir freuen uns über dein konstruktives Feedback!

🧭 Offline-Zugriff

Du kannst diese Dokumentation offline mit Docsify verwenden. Forke dieses Repo, installiere Docsify auf deinem lokalen Rechner und gib dann im Stammordner dieses Repos docsify serve ein. Die Website wird auf Port 3000 auf deinem localhost ausgeführt: localhost:3000.

📘 PDF

Eine PDF mit allen Lektionen ist hier zu finden.

🎒 Andere Kurse

Unser Team produziert weitere Kurse! Schau dir an:

LangChain

Azure / Edge / MCP / Agenten

---

Generative KI-Serie

---

Kernlernen

---

Copilot-Serie

Hilfe erhalten

Wenn du festhängst oder Fragen zum Erstellen von KI-Anwendungen hast: Trete anderen Lernenden und erfahrenen Entwicklern in den Diskussionen über MCP bei. Es ist eine unterstützende Community, in der Fragen willkommen sind und Wissen frei geteilt wird.

Wenn du Produktfeedback hast oder beim Bauen auf Fehler stößt, besuche:

Lizenz

Dieses Repository ist unter der MIT-Lizenz lizenziert. Siehe die LICENSE Datei für weitere Informationen.

---

Haftungsausschluss:
Dieses Dokument wurde mithilfe des KI-Übersetzungsdienstes Co-op Translator übersetzt. Obwohl wir um Genauigkeit bemüht sind, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache gilt als maßgebliche Quelle. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die aus der Nutzung dieser Übersetzung entstehen.