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 taucht tief in JavaScript, CSS und HTML ein durch praxisnahe Projekte wie Terrarien, Browsererweiterungen und Weltraumspiele. Nehmen Sie teil an Quizzen, Diskussionen und praktischen Aufgaben. Verbessern Sie Ihre Fähigkeiten und optimieren Sie Ihre Wissensaufnahme mit unserer effektiven, projektbasierten Didaktik. Starten Sie noch heute Ihre Programmierreise!

Treten Sie der Azure AI Foundry Discord Community bei

Folgen Sie diesen Schritten, um diese Ressourcen zu nutzen:

1. Forken Sie das Repository: Klicken Sie
2. Klonen Sie das Repository: 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

Bevorzugen Sie das lokale 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:

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 zum Abschluss des Kurses benötigen, mit einem viel schnelleren Download.

Wenn Sie möchten, dass zusätzliche Übersetzungssprachen unterstützt werden, sind diese hier aufgelistet

🧑‍🎓 Sind Sie Student?

Besuchen Sie die Student Hub-Seite, auf der Sie Anfängerressourcen, Studentenkits und sogar Möglichkeiten finden, einen kostenlosen Zertifikat-Gutschein zu erhalten. Dies ist die Seite, die Sie als Lesezeichen speichern und von Zeit zu Zeit überprüfen sollten, da wir monatlich Inhalte austauschen.

📣 Ankündigung - Neue GitHub Copilot Agent Modus Herausforderungen zum Abschließen!

Neue Herausforderung hinzugefügt, suchen Sie nach "GitHub Copilot Agent Challenge 🚀" in den meisten Kapiteln. Das ist eine neue Herausforderung, die Sie mit GitHub Copilot und dem Agent Modus abschließen können. Wenn Sie den Agent-Modus noch nicht verwendet haben, kann dieser nicht nur Text generieren, sondern auch Dateien erstellen und bearbeiten, Befehle ausführen und mehr.

📣 Ankündigung - Neues Projekt zum Bauen mit Generativer KI

Neues AI-Assistent-Projekt gerade hinzugefügt, schauen Sie es sich an Projekt

📣 Ankündigung - Neuer Lehrplan über Generative KI für JavaScript wurde gerade veröffentlicht

Verpassen Sie nicht unseren neuen Lehrplan zur Generativen KI!

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

• Lektionen, die alles von den Grundlagen bis zu RAG abdecken.
• Interagieren Sie mit historischen Figuren mittels GenAI und unserer Begleit-App.
• Eine unterhaltsame und fesselnde Erzählung, Sie werden durch die Zeit reisen!

Jede Lektion enthält eine Aufgabe zur Fertigstellung, eine Wissensüberprüfung und eine Herausforderung, um Sie beim Erlernen von Themen wie:

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

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

🌱 Loslegen

Lehrkräfte, wir haben einige Vorschläge für den Einsatz dieses Lehrplans hinzugefügt. Wir freuen uns über Ihr Feedback in unserem Diskussionsforum!

Lernende, beginnen Sie jede Lektion mit einem Quiz vor der Vorlesung und arbeiten Sie dann die Vorlesungsmaterialien durch, erledigen Sie die verschiedenen Aktivitäten und überprüfen Sie Ihr Verständnis mit dem Quiz nach der Vorlesung.

Zur Verbesserung Ihres Lernerlebnisses verbinden Sie sich mit Ihren Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen werden in unserem Diskussionsforum gefördert, wo unser Moderatorenteam Ihre Fragen beantwortet.

Um Ihre Ausbildung weiter voranzutreiben, empfehlen wir dringend, Microsoft Learn für zusätzliche Lernmaterialien zu erkunden.

📋 Einrichtung Ihrer Umgebung

Dieser Lehrplan verfügt über eine sofort einsatzbereite Entwicklungsumgebung! Sobald Sie starten, können Sie den Lehrplan in einem Codespace (eine browserbasierte Umgebung ohne notwendige Installationen) oder lokal auf Ihrem Computer mit einem Texteditor wie Visual Studio Code ausführen.

Erstellen Sie Ihr Repository

Damit Sie Ihre Arbeit leicht speichern können, wird empfohlen, 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 Lehrplans erstellt.

Folgen Sie diesen Schritten:

1. Forken Sie das Repository: Klicken Sie auf die Schaltfläche "Fork" oben rechts auf dieser Seite.
2. Klonen Sie das Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Ausführen des Lehrplans in einem Codespace

In Ihrer erstellten Kopie dieses Repositories klicken Sie auf die Schaltfläche Code und wählen Open with Codespaces. Dadurch wird für Sie ein neuer Codespace erstellt, in dem Sie arbeiten können.

Ausführen des Lehrplans lokal auf Ihrem Computer

Um diesen Lehrplan lokal auf Ihrem Computer auszuführen, benötigen Sie einen Texteditor, einen Browser und ein Befehlszeilenwerkzeug. Unsere erste Lektion, Einführung in Programmiersprachen und Werkzeuge der Branche, führt Sie durch verschiedene Optionen für jedes dieser Werkzeuge, damit Sie das auswählen können, was am besten zu Ihnen passt.

Unsere Empfehlung ist, Visual Studio Code als Editor zu verwenden, das auch ein eingebautes Terminal besitzt. Sie können Visual Studio Code hier herunterladen.

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

   CodeSpace Öffnen Sie dann innerhalb von Visual Studio Code das Terminal und führen Sie 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. 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 anzusehen
• Copilot – um Ihnen zu helfen, schneller Code zu schreiben

📂 Jede Lektion beinhaltet:

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

Eine Anmerkung 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 in 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 grundlegenden Grundlagen der meisten Programmiersprachen und über Software, die professionelle Entwickler unterstützt	Einführung in Programmierungssprachen und Werkzeuge	Jasmine
02	Einstieg	Grundlagen von GitHub, inklusive Teamarbeit	Wie man GitHub im Projekt benutzt, wie man mit anderen an einem Code zusammenarbeitet	Einführung in GitHub	Floor
03	Einstieg	Barrierefreiheit	Lernen Sie die Grundlagen der Barrierefreiheit im Web	Barrierefreiheitsgrundlagen	Christopher
04	JS Basics	JavaScript Datentypen	Die Grundlagen der JavaScript-Datentypen	Datentypen	Jasmine
05	JS Basics	Funktionen und Methoden	Lernen Sie über Funktionen und Methoden, um den Ablauf einer Anwendung zu steuern	Funktionen und Methoden	Jasmine und Christopher
06	JS Basics	Entscheidungen treffen mit JS	Lernen Sie, wie man Bedingungen im Code mit Entscheidungsstrukturen erstellt	Entscheidungen treffen	Jasmine
07	JS Basics	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 für ein Online-Terrarium, konzentrieren Sie sich auf das Layout	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 Gestaltung	Einführung in CSS	Jen
10	Terrarium	JavaScript Closures, DOM-Manipulation	Schreiben Sie das JavaScript, um das Terrarium als Drag-&-Drop-Oberfläche nutzbar zu machen, mit Fokus auf Closures und DOM-Manipulation	JavaScript Closures, DOM-Manipulation	Jen
11	Tippspiel	Erstellen eines Tipp-Spiels	Lernen Sie, wie Sie Tastatureingaben verwenden, um die Logik Ihrer JavaScript-App zu steuern	Ereignisgesteuerte Programmierung	Christopher
12	Grüne Browsererweiterung	Arbeiten mit Browsern	Lernen Sie, wie Browser funktionieren, deren Geschichte und wie man die ersten Elemente einer Browsererweiterung erstellt	Über Browser	Jen
13	Grüne Browsererweiterung	Formulare erstellen, API aufrufen und Variablen im lokalen Speicher sichern	Erstellen Sie die JavaScript-Elemente Ihrer Browsererweiterung, um eine API aufzurufen und Variablen im lokalen Speicher zu nutzen	APIs, Formulare und lokaler Speicher	Jen
14	Grüne Browsererweiterung	Hintergrundprozesse im Browser, Web-Performance	Verwenden Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; erfahren Sie mehr über Web-Performance und Optimierungen	Hintergrundaufgaben und Performance	Jen
15	Weltraum-Spiel	Fortgeschrittene Spieleentwicklung mit JavaScript	Lernen Sie über Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster, als Vorbereitung zum Erstellen eines Spiels	Einführung in fortgeschrittene Spieleentwicklung	Chris
16	Weltraum-Spiel	Zeichnen auf dem Canvas	Lernen Sie die Canvas-API kennen, die verwendet wird, um Elemente auf einem Bildschirm zu zeichnen	Zeichnen auf Canvas	Chris
17	Weltraum-Spiel	Bewegung von Elementen auf dem Bildschirm	Entdecken Sie, wie Elemente mit kartesischen Koordinaten und der Canvas-API Bewegung erhalten	Bewegung von Elementen	Chris
18	Weltraum-Spiel	Kollisionserkennung	Lassen Sie Elemente kollidieren und aufeinander reagieren, verwenden Sie Tastendrücke und eine Abkühlfunktion, um die Spielperformance zu sichern	Kollisionserkennung	Chris
19	Weltraum-Spiel	Punkte zählen	Führen Sie mathematische Berechnungen basierend auf dem Spielstatus und der Performance durch	Punkte zählen	Chris
20	Weltraum-Spiel	Spiel beenden und neu starten	Lernen Sie, wie man das Spiel beendet und neu startet, inklusive 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 Sie das Gerüst der Architektur einer mehrseitigen Webseite mit Routing und HTML-Vorlagen erstellen	HTML-Vorlagen und Routen	Yohan
22	Banking App	Erstellen von Login- und Registrierungsformularen	Lernen Sie, wie man Formulare erstellt und Validierungsroutinen handhabt	Formulare	Yohan
23	Banking App	Methoden zum Abrufen und Verwenden von Daten	Wie Daten in Ihre App gelangen, wie man sie abruft, speichert und entsorgt	Daten	Yohan
24	Banking App	Konzepte des State-Managements	Lernen Sie, wie Ihre App den Zustand behält und wie Sie ihn programmgesteuert verwalten	State Management	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-Assistent Projekt	Chris

🏫 Pädagogik

Unser Lehrplan wurde mit zwei zentralen pädagogischen Prinzipien entworfen:

• 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 Teilnehmer haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Tipp-Spiel, ein virtuelles Terrarium, eine umweltfreundliche Browser-Erweiterung, ein Weltraum-Invader-Spiel und eine Banking-App für Unternehmen erstellen. Am Ende der Reihe haben die Teilnehmer ein solides Verständnis für Webentwicklung.

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

Indem sichergestellt wird, dass die Inhalte mit Projekten übereinstimmen, wird der Prozess für Lernende ansprechender gestaltet 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", von deren Autoren einige zu diesem Lehrplan beigetragen haben.

Zusätzlich setzt ein Quiz mit geringem Risiko vor einer Klasse die Absicht des Lernenden, ein Thema zu lernen, während ein zweites Quiz nach dem Unterricht die weitere Behaltensleistung sicherstellt. Dieser Lehrplan wurde flexibel und unterhaltsam gestaltet und kann komplett oder teilweise verwendet werden. Die Projekte beginnen klein und werden bis zum Ende des 12-wöchigen Zyklus zunehmend komplexer.

Während wir bewusst vermieden haben, JavaScript-Frameworks einzuführen, um uns auf grundlegende Fähigkeiten als Webentwickler vor der Einführung eines Frameworks zu konzentrieren, wäre ein guter nächster Schritt nach Abschluss dieses Lehrplans das Lernen über Node.js mit einer weiteren Video-Tutorial-Reihe: "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 tippen Sie im Stammordner dieses Repos docsify serve. Die Webseite wird auf Port 3000 Ihres lokalen Hosts bereitgestellt: localhost:3000.

📘 PDF

Ein PDF aller Lektionen finden Sie hier.

🎒 Andere Kurse

Unser Team produziert auch andere Kurse! Schau dir an:

LangChain

Azure / Edge / MCP / Agents

---

Generative KI-Serie

---

Grundlegendes Lernen

---

Copilot-Serie

Hilfe erhalten

Wenn du feststeckst oder Fragen zum Erstellen von KI-Anwendungen hast, schließe dich Mitlernenden 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 Entwickeln hast, besuche:

Lizenz

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

---

Haftungsausschluss:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir auf Genauigkeit achten, können automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten. 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 aus der Verwendung dieser Übersetzung entstehen.