Web-Dev-For-Beginners/translations/de

Webentwicklung für Anfänger – Ein Lehrplan

Lerne die Grundlagen der Webentwicklung mit unserem umfassenden 12-Wochen-Kurs von Microsoft Cloud Advocates. Jede der 24 Lektionen behandelt JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele. Nimm an Quizfragen, Diskussionen und praktischen Aufgaben teil. Verbessere deine Fähigkeiten und optimiere dein Wissen mit unserer effektiven projektbasierten Pädagogik. Starte noch heute deine Programmierreise!

🧑‍🎓 Bist du ein Student?

Besuche die Student Hub Seite, wo du Ressourcen für Anfänger, Studentenpakete und sogar Möglichkeiten findest, einen kostenlosen Zertifikatsgutschein zu erhalten. Diese Seite solltest du dir merken und regelmäßig besuchen, da wir den Inhalt monatlich aktualisieren.

📣 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 Charakteren mithilfe von GenAI und unserer Begleit-App.
• Spannende und unterhaltsame Erzählung – du wirst durch die Zeit reisen!

Jede Lektion enthält eine Aufgabe, eine Wissensüberprüfung und eine Herausforderung, um Themen wie folgende zu lernen:

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

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

🌱 Erste Schritte

Lehrer, wir haben einige Vorschläge hinzugefügt, wie Sie diesen Lehrplan nutzen können. Wir freuen uns über Ihr Feedback in unserem Diskussionsforum!

Lernende, für jede Lektion beginnt mit einem Quiz vor der Vorlesung und arbeitet sich durch das Lesen des Vorlesungsmaterials, das Abschließen der verschiedenen Aktivitäten und überprüft euer Verständnis mit dem Quiz nach der Vorlesung.

Um das Lernerlebnis zu verbessern, vernetzt euch mit euren Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind in unserem Diskussionsforum erwünscht, wo unser Team von Moderatoren eure Fragen beantworten wird.

Um eure Ausbildung weiterzuführen, empfehlen wir dringend, Microsoft Learn für zusätzliche Lernmaterialien zu erkunden.

📋 Einrichten deiner Umgebung

Dieser Lehrplan hat eine einsatzbereite Entwicklungsumgebung! Zu Beginn kannst du wählen, ob du den Lehrplan in einem Codespace (eine browserbasierte Umgebung, keine Installationen erforderlich) oder lokal auf deinem Computer mit einem Texteditor wie Visual Studio Code ausführen möchtest.

Erstelle dein Repository

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

Folge diesen Schritten:

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

Ausführen des Lehrplans in einem Codespace

In deiner Kopie dieses Repositorys, die du erstellt hast, klicke auf die Schaltfläche Code und wähle Open with Codespaces. Dadurch wird ein neuer Codespace erstellt, 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 Befehlszeilentool. Unsere erste Lektion, Einführung in Programmiersprachen und Werkzeuge, führt dich durch verschiedene Optionen für jedes dieser Werkzeuge, damit du auswählen kannst, was am besten für dich funktioniert.

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

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

   

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

   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 zu sehen
• Copilot – um schneller Code zu schreiben

📂 Jede Lektion enthält:

• optionale Sketchnote
• optionales ergänzendes Video
• Quiz zur Vorbereitung auf die 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

Eine Anmerkung zu den Quizfragen: Alle Quizfragen befinden sich im Ordner Quiz-app, insgesamt 48 Quizfragen mit jeweils drei Fragen. Sie sind in den Lektionen verlinkt. Die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden; folge den Anweisungen im quiz-app-Ordner. Sie werden nach und nach lokalisiert.

🗃️ Lektionen

	Projektname	Vermittelte Konzepte	Lernziele	Verlinkte Lektion	Autor
01	Erste Schritte	Einführung in Programmiersprachen und Werkzeuge	Lerne die grundlegenden Prinzipien der meisten Programmiersprachen und über Software, die professionelle Entwickler nutzen	Einführung in Programmiersprachen und Werkzeuge	Jasmine
02	Erste Schritte	Grundlagen von GitHub, einschließlich Teamarbeit	Wie man GitHub in einem Projekt verwendet und mit anderen an einem Code-Bestand zusammenarbeitet	Einführung in GitHub	Floor
03	Erste Schritte	Barrierefreiheit	Lerne 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	Lerne, wie Funktionen und Methoden die Logik einer Anwendung steuern können	Funktionen und Methoden	Jasmine und Christopher
06	JS-Grundlagen	Entscheidungen mit JS treffen	Lerne, wie man Bedingungen im Code mit Entscheidungsfindungsmethoden erstellt	Entscheidungen treffen	Jasmine
07	JS-Grundlagen	Arrays und Schleifen	Arbeite mit Daten mithilfe von Arrays und Schleifen in JavaScript	Arrays und Schleifen	Jasmine
08	Terrarium	HTML in der Praxis	Erstelle das HTML, um ein Online-Terrarium zu bauen, mit Fokus auf Layoutgestaltung	Einführung in HTML	Jen
09	Terrarium	CSS in der Praxis	Erstelle das CSS, um das Online-Terrarium zu gestalten, mit Fokus auf die Grundlagen von CSS, einschließlich responsivem Design	Einführung in CSS	Jen
10	Terrarium	JavaScript Closures, DOM-Manipulation	Erstelle das JavaScript, um das Terrarium als Drag-and-Drop-Oberfläche funktionsfähig zu machen, mit Fokus auf Closures und DOM-Manipulation	JavaScript Closures, DOM-Manipulation	Jen
11	Tipp-Spiel	Erstelle ein Tipp-Spiel	Lerne, wie man Tastaturereignisse nutzt, um die Logik einer JavaScript-App zu steuern	Ereignisgesteuerte Programmierung	Christopher
12	Green Browser Extension	Arbeiten mit Browsern	Erfahren Sie, wie Browser funktionieren, ihre Geschichte und wie Sie die ersten Elemente einer Browsererweiterung erstellen können	Über Browser	Jen
13	Green Browser Extension	Formular erstellen, API aufrufen und Variablen im lokalen Speicher speichern	Erstellen Sie die JavaScript-Elemente Ihrer Browsererweiterung, um eine API mit Variablen aus dem lokalen Speicher aufzurufen	APIs, Formulare und lokaler Speicher	Jen
14	Green Browser Extension	Hintergrundprozesse im Browser, Web-Performance	Nutzen 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	Space Game	Fortgeschrittene Spieleentwicklung mit JavaScript	Lernen Sie Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster kennen, um ein Spiel vorzubereiten	Einführung in fortgeschrittene Spieleentwicklung	Chris
16	Space Game	Zeichnen auf Canvas	Lernen Sie die Canvas-API kennen, die verwendet wird, um Elemente auf einem Bildschirm zu zeichnen	Zeichnen auf Canvas	Chris
17	Space Game	Elemente auf dem Bildschirm bewegen	Entdecken Sie, wie Elemente mithilfe kartesischer Koordinaten und der Canvas-API Bewegung erhalten können	Elemente bewegen	Chris
18	Space Game	Kollisionserkennung	Lassen Sie Elemente kollidieren und aufeinander reagieren, indem Sie Tastenanschläge verwenden, und fügen Sie eine Abkühlfunktion hinzu, um die Spielleistung sicherzustellen	Kollisionserkennung	Chris
19	Space Game	Punktestand führen	Führen Sie mathematische Berechnungen basierend auf dem Spielstatus und der Leistung durch	Punktestand führen	Chris
20	Space Game	Spiel beenden und neu starten	Lernen Sie, wie Sie das Spiel beenden und neu starten, einschließlich der Bereinigung von Ressourcen und dem Zurücksetzen von Variablenwerten	Endbedingung	Chris
21	Banking App	HTML-Vorlagen und Routen in einer Web-App	Lernen Sie, wie Sie das Grundgerüst der Architektur einer mehrseitigen Website mithilfe von Routing und HTML-Vorlagen erstellen	HTML-Vorlagen und Routen	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	Erfahren Sie, wie Daten in Ihre App fließen, wie sie abgerufen, gespeichert und verworfen werden	Daten	Yohan
24	Banking App	Konzepte des Zustandsmanagements	Lernen Sie, wie Ihre App den Zustand beibehält und wie Sie ihn programmatisch verwalten können	Zustandsmanagement	Yohan

🏫 Pädagogik

Unser Lehrplan basiert auf zwei zentralen pädagogischen Prinzipien:

• projektbasiertes Lernen
• regelmäßige Quizze

Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Tools und Techniken, die von heutigen Webentwicklern verwendet werden. Die Studierenden haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Schreibspiel, ein virtuelles Terrarium, eine umweltfreundliche Browsererweiterung, ein Space-Invader-ähnliches Spiel und eine Banking-App für Unternehmen entwickeln. Am Ende der Serie haben die Studierenden ein solides Verständnis für Webentwicklung erlangt.

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

Indem sichergestellt wird, dass die Inhalte projektbezogen sind, wird der Lernprozess für die Studierenden ansprechender gestaltet und das Behalten der Konzepte verbessert. Wir haben auch mehrere Einführungslektionen zu den JavaScript-Grundlagen geschrieben, die mit einem Video aus der Sammlung "Beginners Series to: JavaScript" kombiniert sind, von denen einige Autoren zu diesem Lehrplan beigetragen haben.

Darüber hinaus setzt ein niedrigschwelliges Quiz vor dem Unterricht den Fokus der Studierenden auf das Lernen eines Themas, während ein zweites Quiz nach dem Unterricht das Behalten weiter fördert. Dieser Lehrplan wurde so gestaltet, dass er flexibel und unterhaltsam ist und ganz oder teilweise absolviert werden kann. Die Projekte beginnen klein und werden im Laufe des 12-wöchigen Zyklus immer komplexer.

Obwohl wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten zu konzentrieren, die ein Webentwickler vor der Verwendung eines Frameworks benötigt, wäre ein guter nächster Schritt nach Abschluss dieses Lehrplans das Erlernen von Node.js über eine weitere Videosammlung: "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 geben Sie dann im Stammverzeichnis dieses Repos docsify serve ein. Die Website wird auf Port 3000 auf Ihrem localhost bereitgestellt: localhost:3000.

📘 PDF

Eine PDF-Version aller Lektionen finden Sie hier.

🎒 Weitere Kurse

Unser Team erstellt weitere Kurse! Schauen Sie sich an:

• Generative KI für Anfänger
• Generative KI für Anfänger .NET
• Generative KI mit JavaScript
• Generative KI mit Java
• KI für Anfänger
• Datenwissenschaft für Anfänger
• Maschinelles Lernen für Anfänger
• Cybersicherheit für Anfänger
• Webentwicklung für Anfänger
• IoT für Anfänger
• XR-Entwicklung für Anfänger
• GitHub Copilot für Agentic Use meistern
• GitHub Copilot für C#/.NET-Entwickler meistern
• Wählen Sie Ihr eigenes Copilot-Abenteuer

Lizenz

Dieses Repository ist unter der MIT-Lizenz lizenziert. Weitere Informationen finden Sie in der LICENSE-Datei.

Haftungsausschluss:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, weisen wir darauf hin, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.