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 praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele in JavaScript, CSS und HTML ein. Engagiere dich mit Quizzen, Diskussionen und praktischen Aufgaben. Verbessere deine Fähigkeiten und optimiere dein Wissensspeicherung mit unserer effektiven projektbasierten Pädagogik. Beginne 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: Klicke
2. Klone das Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Tritt der Azure AI Foundry Discord bei und triff Experten sowie 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 | Khmer | Koreanisch | Litauisch | Malaiisch | Malayalam | Marathisch | 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

Bevorzugst du das lokale Klonen?

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

Dies gibt dir alles, was du brauchst, um den Kurs mit einem viel schnelleren Download abzuschließen.

Wenn du zusätzliche Übersetzungen möchtest, findest du unterstützte Sprachen hier

🧑‍🎓 Bist du Student?

Besuche die Student Hub-Seite, wo du Anfängerressourcen, Studentenkits und sogar Möglichkeiten findest, einen kostenlosen Zertifikatsgutschein zu erhalten. Dies ist die Seite, die du bookmarken solltest und von Zeit zu Zeit überprüfst, da der Inhalt monatlich aktualisiert wird.

📣 Ankündigung – Neue Herausforderungen im GitHub Copilot Agent-Modus 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-Modus abschließen kannst. Falls du den Agent-Modus noch nicht benutzt hast: Er kann nicht nur Text generieren, sondern auch Dateien erstellen und bearbeiten, Befehle ausführen und mehr.

📣 Ankündigung – Neues Projekt zum Erstellen mit generativer KI

Neues AI Assistant-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 Lehrplan zur generativen KI!

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

• Lektionen, die alles von den Grundlagen bis zu RAG abdecken.
• Interagiere mit historischen Persönlichkeiten mit GenAI und unserer Begleit-App.
• Spaßige und spannende Erzählung, du wirst durch die Zeit reisen!

Jede Lektion enthält eine Aufgabe, eine Wissensüberprüfung und eine Herausforderung, die dir beim Lernen von Themen wie:

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

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

🌱 Erste Schritte

Lehrer, wir haben einige Vorschläge aufgenommen, wie dieser Lehrplan verwendet werden kann. Wir freuen uns auf dein Feedback in unserem Diskussionsforum!

Lernende, beginne jede Lektion mit einem Pre-Lecture-Quiz, arbeite dich durch die Vorlesungsmaterialien, erledige die verschiedenen Aktivitäten und überprüfe dein 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 in unserem Diskussionsforum erwünscht, wo unser Moderatoren-Team deine Fragen beantwortet.

Zur Vertiefung empfehlen wir dir, Microsoft Learn für zusätzliche Lernmaterialien zu erkunden.

📋 Einrichtung deiner Entwicklungsumgebung

Dieser Lehrplan bietet eine sofort einsatzbereite Entwicklungsumgebung! Du kannst das Curriculum in einem Codespace (einer browserbasierten, installationsfreien Umgebung) oder lokal auf deinem Rechner mit einem Texteditor wie Visual Studio Code ausführen.

Erstelle dein eigenes Repository

Damit du deine Arbeit einfach speichern kannst, wird empfohlen, eine eigene Kopie dieses Repositorys zu erstellen. Klicke dazu auf die Schaltfläche Use this template oben auf der Seite. Dadurch wird ein neues Repository in deinem GitHub-Konto mit einer Kopie des Lehrplans erstellt.

Folge diesen Schritten:

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

Ausführen des Lehrplans in einem Codespace

Klicke in deiner kopierten Version dieses Repositorys auf die Schaltfläche Code und wähle Open with Codespaces. Dadurch wird ein neuer Codespace für dich erstellt, in dem du arbeiten kannst.

Lokal auf deinem Computer ausführen

Um diesen Lehrplan lokal auf deinem Computer auszuführen, benötigst du einen Texteditor, einen Browser und ein Kommandozeilentool. Unsere erste Lektion, Einführung in Programmiersprachen und Tools, führt dich durch verschiedene Optionen für jedes dieser Werkzeuge, damit du das Beste für dich auswählen kannst.

Wir empfehlen die Verwendung von Visual Studio Code als Editor, das auch ein integriertes Terminal bietet. Du kannst Visual Studio Code hier herunterladen.

1. Klonen Sie Ihr Repository auf Ihren Computer. Sie können dies tun, indem Sie auf die Schaltfläche Code klicken und die URL kopieren:

   CodeSpace

   Öffnen Sie dann das Terminal innerhalb von Visual Studio Code und führen Sie den folgenden Befehl aus, wobei Sie <your-repository-url> durch die gerade kopierte URL ersetzen:

   git clone <your-repository-url>
   

2. Öffnen Sie den Ordner in Visual Studio Code. Sie können dies tun, indem Sie Datei > Ordner öffnen klicken und den gerade geklonten Ordner auswählen.

Empfohlene Erweiterungen für Visual Studio Code:

• Live Server - zum Vorschau von HTML-Seiten innerhalb von Visual Studio Code
• Copilot - um Ihnen zu helfen, Code schneller zu schreiben

📂 Jede Lektion beinhaltet:

• optionale 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
• Wissenschecks
• eine Herausforderung
• ergänzende Lektüre
• Aufgabe
• Quiz nach der Lektion

Ein Hinweis 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 den Anweisungen im Ordner quiz-app.

🗃️ Lektionen

	Projektname	Vermittelte Konzepte	Lernziele	Verknüpfte Lektion	Autor
01	Einstieg	Einführung in Programmierung und Werkzeuge der Branche	Lernen Sie die Grundlagen der meisten Programmiersprachen und Software kennen, die professionelle Entwickler bei ihrer Arbeit unterstützt	Einführung in Programmiersprachen und Werkzeuge der Branche	Jasmine
02	Einstieg	Grundlagen von GitHub, inklusive Teamarbeit	Wie man GitHub im eigenen Projekt verwendet, wie man mit anderen an einer Codebasis zusammenarbeitet	Einführung in GitHub	Floor
03	Einstieg	Zugänglichkeit	Lernen Sie die Grundlagen der Barrierefreiheit im Web	Grundlagen der Zugänglichkeit	Christopher
04	JS Grundlagen	JavaScript-Datentypen	Die Grundlagen von JavaScript-Datentypen	Datentypen	Jasmine
05	JS Grundlagen	Funktionen und Methoden	Lernen Sie Funktionen und Methoden kennen, um den Anwendungslogikfluss zu steuern	Funktionen und Methoden	Jasmine und Christopher
06	JS Grundlagen	Entscheidungen treffen mit JS	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 zu bauen, mit Fokus auf das Layout	Einführung in HTML	Jen
09	Terrarium	CSS in der Praxis	Erstellen Sie das CSS, um das Online-Terrarium zu stylen, mit Fokus auf grundlegendes CSS einschließlich responsivem Design	Einführung in CSS	Jen
10	Terrarium	JavaScript Closures, DOM-Manipulation	Erstellen Sie das JavaScript, um das Terrarium als Drag & Drop-Schnittstelle funktionsfähig zu machen, mit Fokus auf Closures und DOM-Manipulation	JavaScript Closures, DOM-Manipulation	Jen
11	Tipp-Spiel	Erstellen eines Tipp-Spiels	Lernen Sie, wie Sie Tastaturereignisse verwenden, um die Logik Ihrer JavaScript-App zu steuern	Ereignisgesteuerte Programmierung	Christopher
12	Grünes Browser-Addon	Arbeiten mit Browsern	Lernen Sie, wie Browser funktionieren, deren Geschichte und wie Sie die ersten Elemente eines Browser-Addons vorbereiten	Über Browser	Jen
13	Grünes Browser-Addon	Formularerstellung, API-Aufrufe und lokale Speicherung von Variablen	Erstellen Sie die JavaScript-Elemente Ihres Browser-Addons, um eine API über in localStorage gespeicherte Variablen aufzurufen	APIs, Formulare und lokale Speicherung	Jen
14	Grünes Browser-Addon	Hintergrundprozesse im Browser, Web-Performance	Verwenden Sie die Hintergrundprozesse des Browsers zur Verwaltung des Erweiterungssymbols; lernen Sie Web-Performance und Optimierungen kennen	Hintergrundaufgaben und Performance	Jen
15	Weltraumspiel	Fortgeschrittene Spieleentwicklung mit JavaScript	Lernen Sie Vererbung anhand von Klassen und Komposition sowie das Pub/Sub-Muster kennen, als Vorbereitung auf die Spieleentwicklung	Einführung in die fortgeschrittene Spieleentwicklung	Chris
16	Weltraumspiel	Zeichnen auf der Leinwand	Lernen Sie die Canvas-API kennen, die zum Zeichnen von Elementen auf einem Bildschirm verwendet wird	Zeichnen auf der Leinwand	Chris
17	Weltraumspiel	Bewegungen von Elementen auf dem Bildschirm	Entdecken Sie, wie Elemente durch kartesische Koordinaten und die Canvas-API Bewegung erhalten	Bewegung von Elementen	Chris
18	Weltraumspiel	Kollisions-Erkennung	Lassen Sie Elemente kollidieren und aufeinander reagieren, verwenden Sie Tastendrücke und eine Cooldown-Funktion, um die Performance des Spiels sicherzustellen	Kollisionserkennung	Chris
19	Weltraumspiel	Punktestand führen	Führen Sie mathematische Berechnungen basierend auf dem Spielstatus und der Performance durch	Punktestand führen	Chris
20	Weltraumspiel	Spiel beenden und neu starten	Lernen Sie, wie man ein Spiel beendet und neu startet, einschließlich Aufräumen von Assets und Zurücksetzen von Variablen	Die Endbedingung	Chris
21	Banking App	HTML-Vorlagen und Routen in einer Web-App	Lernen Sie, wie das Grundgerüst einer mehrseitigen Website mit Routing und HTML-Vorlagen erstellt wird	HTML-Vorlagen und Routing	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 Verwenden von Daten	Wie Daten in die App hinein- und herausfließen, wie sie abgerufen, gespeichert und entsorgt werden	Daten	Yohan
24	Banking App	Konzepte des Zustandsmanagements	Lernen Sie, wie Ihre App den Zustand beibehält und diesen programmatisch verwaltet	Zustandsmanagement	Yohan
25	Browser/VScode Code	Arbeiten mit VScode	Lernen Sie, wie man einen Code-Editor benutzt	VScode Code Editor verwenden	Chris
26	KI-Assistenten	Arbeiten mit KI	Lernen Sie, wie Sie Ihren eigenen KI-Assistenten bauen	KI-Assistenten-Projekt	Chris

🏫 Pädagogik

Unser Lehrplan basiert auf zwei wichtigen 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 verwenden. Die Lernenden haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Tipp-Spiel, ein virtuelles Terrarium, eine umweltfreundliche Browsererweiterung, ein Weltraum-Invasoren-Spiel und eine Banking-App für Unternehmen erstellen. Am Ende der Reihe verfügen die Lernenden über ein solides Verständnis der Webentwicklung.

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

Durch die Ausrichtung der Inhalte an Projekten wird der Prozess für die Lernenden ansprechender gestaltet und das Behalten der Konzepte verbessert. Wir haben auch mehrere Einstiegslektionen zu den Grundlagen von JavaScript geschrieben, um Konzepte vorzustellen, begleitet von einem Video aus der "Beginners Series to: JavaScript" Video-Tutorial-Sammlung, zu dessen Autoren einige zum Lehrplan beigetragen haben.

Zudem setzt ein niedrigschwelliges Quiz vor der Lektion die Lernabsicht der Teilnehmer und ein zweites Quiz nach der Lektion sorgt für vertiefte Behaltensleistung. Dieser Lehrplan wurde so gestaltet, dass er flexibel und unterhaltsam ist und ganz oder teilweise absolviert werden kann. Die Projekte beginnen klein und werden bis zum Ende des 12-Wochen-Zyklus zunehmend komplexer.

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

Besuchen Sie unsere Verhaltensrichtlinien 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 Stammverzeichnis dieses Repos docsify serve ein. Die Website wird lokal auf Port 3000 bereitgestellt: localhost:3000.

📘 PDF

Ein PDF aller Lektionen kann hier gefunden werden.

🎒 Andere Kurse

Unser Team produziert weitere Kurse! Schau dir an:

LangChain

Azure / Edge / MCP / Agents

---

Generative AI Serie

---

Kernlernen

---

Copilot Serie

Hilfe erhalten

Wenn du feststeckst oder Fragen zum Erstellen von KI-Apps hast. Tritt mit anderen Lernenden und erfahrenen Entwicklern in Diskussionen über MCP ein. 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 mithilfe des KI-Übersetzungsdienstes 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 Ursprungssprache ist als maßgebliche Quelle zu betrachten. 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.