Web-Dev-For-Beginners/translations/de

Webentwicklung für Einsteiger - Ein Curriculum

Lernen Sie die Grundlagen der Webentwicklung mit unserem 12-wöchigen umfassenden Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen taucht in JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browsererweiterungen und Weltraumspiele ein. Nehmen Sie an Quizzen, Diskussionen und praktischen Aufgaben teil. Verbessern Sie Ihre Fähigkeiten und optimieren Sie Ihre Wissensspeicherung mit unserer effektiven projektbasierten Pädagogik. Starten Sie noch heute Ihre Programmierreise!

Treten Sie der Azure AI Foundry Discord Community bei

Befolgen Sie diese Schritte, um mit diesen Ressourcen zu starten:

1. Forken Sie das Repository: Klicken Sie auf
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 (Automatisch & Immer auf dem neuesten Stand)

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 | Malajalam | 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öchten Sie lokal 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 für den Abschluss des Kurses benötigen, mit einem viel schnelleren Download.

Wenn Sie weitere Übersetzungen wünschen, sind unterstützte Sprachen hier aufgelistet

🧑‍🎓 Sind Sie ein Student?

Besuchen Sie die Student Hub-Seite, auf der Sie Einstiegsressourcen, Studentensets und sogar Möglichkeiten finden, einen kostenlosen Zertifikatsgutschein zu erhalten. Dies ist die Seite, die Sie als Lesezeichen setzen und von Zeit zu Zeit überprüfen sollten, da wir monatlich Inhalte austauschen.

📣 Ankündigung - Neue GitHub Copilot Agent Mode Herausforderungen zu meistern!

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

📣 Ankündigung - Neues Projekt mit Generativer KI bauen

Neues AI Assistant-Projekt gerade hinzugefügt, sehen Sie sich das Projekt an.

📣 Ankündigung - Neues Curriculum zu Generativer KI für JavaScript wurde gerade veröffentlicht

Verpassen Sie nicht unser neues Curriculum für Generative KI!

Besuchen Sie https://aka.ms/genai-js-course für den Einstieg!

• Lektionen von den Grundlagen bis RAG.
• Interagieren Sie mit historischen Charakteren mittels GenAI und unserer Begleit-App.
• Spannende und unterhaltsame Erzählung, Sie reisen durch die Zeit!

Jede Lektion enthält eine Aufgabe zum Abschließen, eine Wissensüberprüfung und eine Herausforderung, die Sie beim Lernen der Themen unterstützt wie:

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

Besuchen Sie https://aka.ms/genai-js-course für den Start!

🌱 Erste Schritte

Lehrer, wir haben einige Vorschläge zur Nutzung dieses Curriculums eingefügt. Wir würden uns über Ihr Feedback in unserem Diskussionsforum freuen!

Lernende, beginnen Sie mit jeder Lektion mit einem Quiz vor der Vorlesung und lesen Sie dann das Vorlesungsmaterial, bearbeiten Sie die verschiedenen Aktivitäten und überprüfen Sie Ihr Verständnis mit dem Quiz nach der Vorlesung.

Um Ihr Lernerlebnis zu verbessern, vernetzen Sie sich mit Ihren Mitlernenden, um die Projekte zusammen zu bearbeiten! Diskussionen sind in unserem Diskussionsforum erwünscht, wo unser Moderatorenteam Ihre Fragen beantwortet.

Zur Erweiterung Ihrer Bildung empfehlen wir auch, Microsoft Learn für zusätzliche Lernmaterialien zu erkunden.

📋 Richten Sie Ihre Arbeitsumgebung ein

Dieses Curriculum hat eine sofort einsatzbereite Entwicklungsumgebung! Sie können wählen, ob Sie das Curriculum in einem Codespace (eine browserbasierte Umgebung ohne Installation) oder lokal auf Ihrem Computer mit einem Texteditor wie Visual Studio Code ausführen möchten.

Erstellen Sie Ihr Repository

Um Ihre Arbeit einfach zu speichern, empfehlen wir, 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 Curriculums erstellt.

Folgen Sie diesen Schritten:

1. Forken Sie das Repository: Klicken Sie oben rechts auf der Seite auf den „Fork“-Button.
2. Klonen Sie das Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Ausführen des Curriculums in einem Codespace

Klicken Sie in Ihrer erstellten Kopie dieses Repositories auf die Schaltfläche Code und wählen Sie Open with Codespaces. Dies erstellt einen neuen Codespace, in dem Sie arbeiten können.

Lokales Ausführen des Curriculums auf Ihrem Computer

Um das Curriculum lokal auf Ihrem Computer auszuführen, benötigen Sie einen Texteditor, einen Browser und ein Kommandozeilentool. Unsere erste Lektion, Einführung in Programmiersprachen und Werkzeuge, führt Sie durch verschiedene Optionen für diese Tools, damit Sie das passendste auswählen können.

Wir empfehlen die Verwendung von Visual Studio Code als Editor, der außerdem ein eingebautes Terminal enthält. Visual Studio Code können Sie hier herunterladen.

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

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

   git clone <your-repository-url>
   

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

Empfohlene Visual Studio Code Erweiterungen:

• Live Server – zum Vorschauen von HTML-Seiten innerhalb von Visual Studio Code
• Copilot – um dir beim schnelleren Schreiben von Code zu helfen

📂 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 Aufbau des Projekts
• Wissenskontrollen
• eine Herausforderung
• ergänzende Lektüre
• Aufgabe
• Nachbereitungsquiz

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 in Azure bereitgestellt werden; folge der Anleitung im Ordner quiz-app.

🗃️ Lektionen

	Projektname	Vermittelte Konzepte	Lernziele	Verknüpfte Lektion	Autor
01	Erste Schritte	Einführung in Programmierung und Arbeitswerkzeuge	Lerne die grundlegenden Grundlagen der meisten Programmiersprachen und über die Software, die professionelle Entwickler unterstützt	Einführung in Programmiersprachen und Arbeitswerkzeuge	Jasmine
02	Erste Schritte	Grundlagen von GitHub, einschließlich Teamarbeit	Wie man GitHub im Projekt verwendet und wie man mit anderen an einem Codebasis zusammenarbeitet	Einführung in GitHub	Floor
03	Erste Schritte	Barrierefreiheit	Lerne 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 Logikablauf einer Anwendung zu steuern	Funktionen und Methoden	Jasmine und Christopher
06	JS Grundlagen	Entscheidungen treffen mit JS	Lerne, wie man Bedingungen im Code mit Entscheidungsstrukturen erstellt	Entscheidungen treffen	Jasmine
07	JS Grundlagen	Arrays und Schleifen	Arbeite mit Daten unter Verwendung von Arrays und Schleifen in JavaScript	Arrays und Schleifen	Jasmine
08	Terrarium	HTML in der Praxis	Baue das HTML für ein Online-Terrarium, mit Fokus auf Layout-Erstellung	Einführung in HTML	Jen
09	Terrarium	CSS in der Praxis	Baue das CSS, um das Online-Terrarium zu stylen, konzentriere dich auf die Grundlagen von CSS einschließlich der responsiven Gestaltung der Seite	Einführung in CSS	Jen
10	Terrarium	JavaScript Closures, DOM-Manipulation	Baue das JavaScript, das Terrarium als Drag-and-Drop-Oberfläche funktionsfähig macht, mit Fokus auf Closures und DOM-Manipulation	JavaScript Closures, DOM-Manipulation	Jen
11	Tipp-Spiel	Ein Tipp-Spiel bauen	Lerne, wie Tastaturereignisse die Logik deiner JavaScript-App steuern	Ereignisgesteuerte Programmierung	Christopher
12	Green Browser Extension	Zusammenarbeit mit Browsern	Lerne, wie Browser funktionieren, deren Geschichte und wie man die ersten Elemente einer Browser-Erweiterung erstellt	Über Browser	Jen
13	Green Browser Extension	Formular erstellen, API aufrufen und Variablen im lokalen Speicher speichern	Baue die JavaScript-Elemente deiner Browser-Erweiterung, um eine API aufzurufen und verwendete Variablen im lokalen Speicher zu speichern	APIs, Formulare und lokaler Speicher	Jen
14	Green Browser Extension	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	Weltraumspiel	Fortgeschrittene Spieleentwicklung mit JavaScript	Lerne Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster kennen, um dich auf den Bau eines Spiels vorzubereiten	Einführung in die fortgeschrittene Spieleentwicklung	Chris
16	Weltraumspiel	Zeichnen auf der Leinwand	Lerne die Canvas-API kennen, die zum Zeichnen auf dem Bildschirm verwendet wird	Zeichnen auf Canvas	Chris
17	Weltraumspiel	Elemente auf dem Bildschirm bewegen	Entdecke, wie Elemente Bewegung mit kartesischen Koordinaten und der Canvas-API bekommen	Elemente bewegen	Chris
18	Weltraumspiel	Kollisionserkennung	Sorge dafür, dass Elemente miteinander kollidieren und aufeinander reagieren, verwende Tastendrücke und eine Abklingfunktion	Kollisionserkennung	Chris
19	Weltraumspiel	Punkte zählen	Führe mathematische Berechnungen basierend auf dem Spielstatus und der Leistung durch	Punkte zählen	Chris
20	Weltraumspiel	Beenden und Neustarten des Spiels	Lerne das Beenden und Neustarten des Spiels, einschließlich Bereinigung von Ressourcen und Zurücksetzen von Variablenwerten	Bedingung für das Ende	Chris
21	Banking App	HTML-Vorlagen und Routen in einer Webanwendung	Lerne, wie man das Gerüst einer mehrseitigen Website-Architektur mit Routing und HTML-Vorlagen erstellt	HTML-Vorlagen und Routen	Yohan
22	Banking App	Ein Login- und Registrierungsformular erstellen	Lerne das Erstellen von Formularen und Validierungsroutinen	Formulare	Yohan
23	Banking App	Methoden des Abrufens und Nutzens von Daten	Wie Daten in deine App hinein- und herausfließen, wie man sie abruft, speichert und entsorgt	Daten	Yohan
24	Banking App	Konzepte des Zustandsmanagements	Lerne, wie deine App den Zustand beibehält und wie man ihn programmatisch verwaltet	Zustandsmanagement	Yohan
25	Browser/VScode Code	Arbeiten mit VScode	Lerne, wie man einen Code-Editor benutzt	Benutzung des VScode Code Editors	Chris
26	KI-Assistenten	Arbeiten mit KI	Lerne, wie du deinen eigenen KI-Assistenten baust	KI-Assistent-Projekt	Chris

🏫 Pädagogik

Unser Lehrplan ist auf zwei wichtige pädagogische Prinzipien ausgerichtet:

• 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 Lernenden haben die Möglichkeit, praktische Erfahrungen durch den Bau eines Tipp-Spiels, eines virtuellen Terrariums, einer umweltfreundlichen Browser-Erweiterung, eines Weltraumspiel-Klons im Stil von Space Invaders und einer Banking-App für Unternehmen zu sammeln. Am Ende der Reihe besitzen die Lernenden ein solides Verständnis der Webentwicklung.

🎓 Die ersten Lektionen dieses Lehrplans kannst du als Lernpfad auf Microsoft Learn absolvieren!

Indem sichergestellt wird, dass die Inhalte mit Projekten verknüpft sind, wird der Prozess für die Lernenden interessanter 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", einige der Autoren haben zu diesem Curriculum beigetragen.

Zudem sorgt ein Quiz mit niedrigem Schwierigkeitsgrad vor einer Stunde dafür, dass der Lernende sich gezielt auf ein Thema einstellt, während ein zweites Quiz nach der Stunde das Behalten weiter unterstützt. Dieser Lehrplan wurde flexibel und unterhaltsam gestaltet und kann komplett oder in Teilen durchlaufen werden. Die Projekte beginnen klein und werden bis zum Ende des 12-Wochen-Zyklus zunehmend komplexer.

Obwohl wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten als Webentwickler vor der Nutzung eines Frameworks zu konzentrieren, wäre ein guter nächster Schritt zur Abrundung dieses Lehrplans das Lernen über Node.js durch eine weitere Videosammlung: "Beginner Series to: Node.js".

Besuche unsere Verhaltensregeln und Beiträgerrichtlinien. Wir freuen uns über dein konstruktives Feedback!

🧭 Offline-Zugriff

Du kannst diese Dokumentation offline nutzen, indem du Docsify verwendest. Forke dieses Repo, installiere Docsify auf deinem lokalen Rechner und gib dann im Hauptordner dieses Repos den Befehl docsify serve ein. Die Website wird auf Port 3000 auf deinem lokalen Host bereitgestellt: localhost:3000.

📘 PDF

Ein PDF aller Lektionen ist hier verfügbar.

🎒 Weitere Kurse

Unser Team erstellt weitere Kurse! Schau dir an:

LangChain

---

Azure / Edge / MCP / Agents

---

Generative AI Series

---

Core Learning

---

Copilot Series

Hilfe bekommen

Wenn du stecken bleibst 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. 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 ist als verbindliche Quelle anzusehen. 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.