Web-Dev-For-Beginners/translations/de

Webentwicklung für Anfänger – Ein Lehrplan

Lerne die Grundlagen der Webentwicklung mit unserem 12-wöchigen umfassenden Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen taucht durch praxisnahe Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele in JavaScript, CSS und HTML ein. Mache mit bei Quizzen, Diskussionen und praktischen Aufgaben. Verbessere deine Fähigkeiten und optimiere deine Wissensspeicherung mit unserer effektiven projektbasierten Pädagogik. Starte noch heute deine Programmierreise!

Tritt der Azure AI Foundry Discord Community bei

Folge diesen Schritten, um mit diesen Ressourcen zu starten:

1. Forke das Repository: Klick auf
2. Klone das Repository: 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

Möchtest du lieber lokal klonen?

Dieses Repository enthält über 50 Sprachübersetzungen, was die Downloadgröße erheblich erhöht. Um ohne Übersetzungen zu klonen, verwende 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'

Damit erhältst du alles, was du für den Kurs brauchst, mit einem viel schnelleren Download.

Wenn du zusätzliche Übersetzungssprachen möchtest, sind diese hier aufgelistet

🧑‍🎓 Bist du ein Student?

Besuche die Studenten-Hub-Seite, wo du Anfänger-Ressourcen, Studentenpakete und sogar Möglichkeiten findest, einen kostenlosen Zertifikats-Gutschein zu erhalten. Dies ist die Seite, die du bookmarken und von Zeit zu Zeit überprüfen möchtest, 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 Herausforderung für dich, die du mit GitHub Copilot und dem Agent-Mode absolvieren kannst. Falls du Agent-Mode noch nicht verwendet hast: Er kann nicht nur Text generieren, sondern 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 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 Figuren mithilfe von GenAI und unserer Begleit-App.
• Spannende und unterhaltsame Erzählung, du wirst durch die Zeit reisen!

Jede Lektion beinhaltet eine Aufgabe, einen Wissenstest und eine Herausforderung, die dich beim Lernen von Themen wie:

• Prompting und Prompt-Engineering
• Text- und Bild-App-Generierung
• Such-Apps

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

🌱 Erste Schritte

Lehrkräfte, wir haben einige Vorschläge wie dieser Lehrplan genutzt werden kann. Wir freuen uns über euer Feedback in unserem Diskussionsforum!

Lernende, für jede Lektion, beginne mit einem Vorab-Quiz und arbeite dich dann durch die Vorlesungsunterlagen, schließe die verschiedenen Aktivitäten ab und überprüfe dein Verständnis mit dem Nach-Quiz.

Zur Verbesserung deiner Lernerfahrung verbinde dich mit deinen Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind erwünscht in unserem Diskussionsforum, wo unser Moderatorenteam deine Fragen beantwortet.

Um deine Ausbildung zu vertiefen, empfehlen wir ausdrücklich die Erkundung von Microsoft Learn für zusätzliche Lernmaterialien.

📋 Einrichtung deiner Umgebung

Dieser Lehrplan enthält eine Entwicklungsumgebung, die sofort einsatzbereit ist! Wenn du startest, kannst du wählen, den Lehrplan in einem Codespace (eine browserbasierte Umgebung ohne Installation) oder lokal auf deinem Computer mit einem Texteditor wie Visual Studio Code auszuführen.

Erstelle dein Repository

Damit du deine Arbeit einfach speichern kannst, empfehlen wir dir, eine eigene Kopie dieses Repositories zu erstellen. Dies kannst du tun, indem du auf der Seite oben auf die Schaltfläche Use this template klickst. Dies erzeugt ein neues Repository in deinem GitHub-Konto mit einer Kopie des Lehrplans.

Folge diesen Schritten:

1. Forke das Repository: Klicke auf die Schaltfläche „Fork“ oben rechts auf dieser Seite.
2. Klone das Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Ausführen des Lehrplans in einem Codespace

In deiner erstellten Kopie dieses Repositories, klicke auf die Code-Schaltfläche und wähle Open with Codespaces. Dies erstellt einen neuen Codespace für dich.

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 jedes dieser Werkzeuge, damit du das auswählen kannst, was für dich am besten funktioniert.

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

1. Klone dein Repository auf deinen Computer. Dies kannst du tun, indem du auf die Code-Schaltfläche klickst 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 zu helfen, schneller Code zu schreiben

📂 Jede Lektion enthält:

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

Eine Anmerkung zu den Quizzen: Alle Quizze befinden sich im Ordner Quiz-app, insgesamt 48 Quizze mit jeweils drei Fragen. Sie sind hier verfügbar; die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folgen Sie bitte den Anweisungen im quiz-app-Ordner.

🗃️ Lektionen

	Projektname	Vermittelte Konzepte	Lernziele	Verknüpfte Lektion	Autor
01	Einstieg	Einführung in Programmierung und Werkzeuge	Lernen Sie die grundlegenden Grundlagen der meisten Programmiersprachen und die Software, die professionellen Entwicklern hilft, ihre Arbeit zu tun	Einführung in Programmiersprachen und Werkzeuge	Jasmine
02	Einstieg	Grundlagen von GitHub, einschließlich Teamarbeit	Wie man GitHub in Ihrem Projekt nutzt und wie man mit anderen an einem Codebasis zusammenarbeitet	Einführung in GitHub	Floor
03	Einstieg	Barrierefreiheit	Lernen Sie die Grundlagen der Barrierefreiheit im Web	Grundlagen der Barrierefreiheit	Christopher
04	JS-Grundlagen	JavaScript Datentypen	Die Grundlagen der JavaScript Datentypen	Datentypen	Jasmine
05	JS-Grundlagen	Funktionen und Methoden	Lernen Sie Funktionen und Methoden kennen, um den Logikfluss einer Anwendung zu verwalten	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 mithilfe von Arrays und Schleifen in JavaScript	Arrays und Schleifen	Jasmine
08	Terrarium	HTML in der Praxis	Erstellen Sie das HTML für ein Online-Terrarium mit Fokus auf Layout-Erstellung	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 die Responsive Gestaltung	Einführung in CSS	Jen
10	Terrarium	JavaScript Closures, DOM-Manipulation	Erstellen Sie das JavaScript, um das Terrarium als Drag-and-Drop-Schnittstelle funktionsfähig zu machen, mit Fokus auf Closures und DOM-Manipulation	JavaScript Closures, DOM-Manipulation	Jen
11	Typing Game	Bau eines Tipp-Spiels	Lernen Sie die Verwendung von Tastaturereignissen zum Steuern der Logik Ihrer JavaScript-App	Ereignisgesteuerte Programmierung	Christopher
12	Green Browser Extension	Arbeiten mit Browsern	Lernen Sie, wie Browser funktionieren, deren Geschichte und wie Sie die ersten Elemente einer Browser-Erweiterung anlegen	Über Browser	Jen
13	Green Browser Extension	Formulare erstellen, API aufrufen und Variablen im lokalen Speicher speichern	Erstellen Sie die JavaScript-Elemente Ihrer Browser-Erweiterung, um eine API aufzurufen, wobei Variablen im lokalen Speicher genutzt werden	APIs, Formulare und Lokaler Speicher	Jen
14	Green Browser Extension	Hintergrundprozesse im Browser, Webperformance	Nutzen Sie die Hintergrundprozesse des Browsers zur Verwaltung des Symbols der Erweiterung; lernen Sie Webperformance und Optimierungen kennen	Hintergrundaufgaben und Performance	Jen
15	Space Game	Fortgeschrittene Spieleentwicklung mit JavaScript	Lernen Sie Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster kennen, als Vorbereitung zum Bau eines Spiels	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 dem Bildschirm verwendet wird	Zeichnen auf Canvas	Chris
17	Space Game	Bewegung von Elementen auf dem Bildschirm	Entdecken Sie, wie Elemente Bewegung mithilfe von kartesischen Koordinaten und der Canvas-API erhalten	Bewegung von Elementen	Chris
18	Space Game	Kollisionsabfrage	Lassen Sie Elemente kollidieren und aufeinander reagieren, nutzen Sie Tastendrücke und stellen Sie eine Abklingfunktion für die Performance des Spiels bereit	Kollisionsabfrage	Chris
19	Space Game	Punkteverwaltung	Führen Sie Berechnungen basierend auf dem Status und der Performance 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 Bereinigung von Ressourcen und Zurücksetzen von Variablenwerten	Bedingung zum Beenden	Chris
21	Banking App	HTML-Vorlagen und Routen in einer Web-App	Lernen Sie, wie Sie das Gerüst einer mehrseitigen Website-Architektur mittels Routing und HTML-Vorlagen erstellen	HTML-Vorlagen und Routen	Yohan
22	Banking App	Login- und Registrierungsformular erstellen	Lernen Sie, wie Formulare aufgebaut und Validierungsroutinen gehandhabt werden	Formulare	Yohan
23	Banking App	Methoden zum Abrufen und Verwenden 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 Zustandsmanagements	Lernen Sie, wie Ihre App Zustand behält und wie man diesen programmatisch verwaltet	Zustandsmanagement	Yohan
25	Browser/VScode Code	Arbeiten mit VScode	Lernen, wie man einen Code-Editor verwendet	Visual Studio Code Editor verwenden	Chris
26	AI Assistants	Arbeiten mit KI	Lernen, wie man einen eigenen KI-Assistenten baut	KI-Assistenten-Projekt	Chris

🏫 Pädagogik

Unser Curriculum basiert auf zwei wichtigen pädagogischen Grundsätzen:

• projektbasiertes Lernen
• häufige Quizze

Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Werkzeuge und Techniken, die von heutigen Webentwicklern genutzt werden. Die Studierenden haben die Möglichkeit, durch den Bau eines Tipp-Spiels, eines virtuellen Terrariums, einer umweltfreundlichen Browser-Erweiterung, eines Weltraum-Invasion-Spiels und einer Banking-App für Unternehmen praktische Erfahrungen zu sammeln. Am Ende der Reihe haben die Studierenden ein solides Verständnis der Webentwicklung erworben.

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

Indem sichergestellt wird, dass die Inhalte zu Projekten passen, wird der Prozess für Studierende attraktiver und die Behaltensleistung der Konzepte verbessert. Wir haben auch mehrere Einstiegskapitel zu JavaScript-Grundlagen geschrieben, um Konzepte einzuführen, ergänzt durch ein Video aus der "Beginners Series to: JavaScript" Video-Tutorial-Sammlung, von deren Autoren einige zum Curriculum beigetragen haben.

Außerdem hilft ein Quiz mit geringem Druck vor dem Unterricht, die Lernabsicht der Studierenden zu setzen, während ein zweites Quiz nach dem Unterricht die weitere Behaltung sichert. Dieses Curriculum wurde so gestaltet, dass es flexibel und unterhaltsam ist und vollständig oder teilweise absolviert werden kann. Die Projekte beginnen klein und werden bis zum Ende des 12-Wochen-Zyklus immer komplexer.

Während wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fertigkeiten als Webentwickler vor der Nutzung eines Frameworks zu konzentrieren, wäre ein guter nächster Schritt nach Abschluss dieses Curriculums das Lernen über Node.js mittels einer weiteren Videosammlung: "Beginner Series to: Node.js".

Besuchen Sie unsere Verhaltensregeln und Beitragsrichtlinien. Wir freuen uns auf 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 im Hauptordner dieses Repos docsify serve ein. Die Webseite 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 KI Serie

---

Grundlagen Lernen

---

Copilot Serie

Hilfe erhalten

Wenn du nicht weiterkommst 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 Produktfeedback oder Fehler beim Erstellen hast, besuche:

Lizenz

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

---

Haftungsausschluss: Dieses Dokument wurde mittels des KI-Übersetzungsdienstes Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, kann es bei automatischen Übersetzungen zu Fehlern oder Ungenauigkeiten kommen. Das Originaldokument in seiner Ursprungssprache ist als maßgebliche Quelle anzusehen. 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.