29 KiB

Raw Blame History Unescape Escape

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 Quizzen, Diskussionen und praktischen Aufgaben teil. Verbessere deine Fähigkeiten und optimiere dein Wissen 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 beginnen:

Repository forken: Klicke
Repository klonen: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Tritt dem Azure AI Foundry Discord bei und tausche dich mit Experten und anderen Entwicklern aus

🌐 Mehrsprachige Unterstützung

Unterstützt durch GitHub Action (Automatisiert & Immer aktuell)

Falls du zusätzliche Übersetzungen wünschst, findest du unterstützte Sprachen hier

🧑‍🎓 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 wechseln.

📣 Ankündigung - Neues Projekt mit Generativer KI erstellen

Ein neues KI-Assistent-Projekt wurde gerade hinzugefügt, schau es dir hier an.

📣 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, ein Wissensquiz 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 euch durch das Vorlesungsmaterial, die verschiedenen Aktivitäten und überprüft euer Verständnis mit dem Quiz nach der Vorlesung.

Um eure Lernerfahrung zu verbessern, vernetzt euch mit euren Mitlernenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind in unserem Diskussionsforum willkommen, wo unser Moderatorenteam eure Fragen beantwortet.

Um eure Ausbildung zu vertiefen, 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 auf die Schaltfläche Use this template klickst. Dadurch wird ein neues Repository in deinem GitHub-Konto mit einer Kopie des Lehrplans erstellt.

Folge diesen Schritten:

Repository forken: Klicke auf die Schaltfläche "Fork" oben rechts auf dieser Seite.
Repository klonen: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Den Lehrplan in einem Codespace ausführen

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.

Den Lehrplan lokal auf deinem Computer ausführen

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 für dich am besten 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.

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

CodeSpace

Öffne dann Terminal innerhalb von Visual Studio Code und führe den folgenden Befehl aus, wobei du <your-repository-url> durch die gerade kopierte URL ersetzt:
```
git clone <your-repository-url>
```
Ö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 Quiz: Alle Quiz befinden sich im Ordner Quiz-app, insgesamt 48 Quiz 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	Verlinkte Lektion	Autor
01	Erste Schritte	Einführung in die Programmierung und Werkzeuge der Branche	Lernen Sie die grundlegenden Prinzipien der meisten Programmiersprachen und über Software, die professionelle Entwickler bei ihrer Arbeit unterstützt	Einführung in Programmiersprachen und Werkzeuge der Branche	Jasmine
02	Erste Schritte	Grundlagen von GitHub, einschließlich Teamarbeit	Wie man GitHub in einem Projekt verwendet und mit anderen an einer Codebasis zusammenarbeitet	Einführung in GitHub	Floor
03	Erste Schritte	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 steuern	Funktionen und Methoden	Jasmine und Christopher
06	JS Grundlagen	Entscheidungen mit JS treffen	Lernen Sie, wie Sie Bedingungen in Ihrem Code mit Entscheidungsfindungsmethoden 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, um ein Online-Terrarium zu bauen, mit Fokus auf Layoutgestaltung	Einführung in HTML	Jen
09	Terrarium	CSS in der Praxis	Erstellen Sie das CSS, um das Online-Terrarium zu gestalten, mit Fokus auf die Grundlagen von CSS, einschließlich der Responsivität	Einführung in CSS	Jen
10	Terrarium	JavaScript Closures, DOM-Manipulation	Erstellen Sie 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	Ein Tipp-Spiel erstellen	Lernen Sie, wie Sie Tastaturereignisse nutzen, um die Logik Ihrer JavaScript-App zu steuern	Ereignisgesteuerte Programmierung	Christopher
12	Grüne Browser-Erweiterung	Arbeiten mit Browsern	Lernen Sie, wie Browser funktionieren, ihre Geschichte und wie Sie die ersten Elemente einer Browser-Erweiterung erstellen	Über Browser	Jen
13	Grüne Browser-Erweiterung	Ein Formular erstellen, eine API aufrufen und Variablen im lokalen Speicher speichern	Erstellen Sie die JavaScript-Elemente Ihrer Browser-Erweiterung, um eine API mit Variablen im lokalen Speicher aufzurufen	APIs, Formulare und lokaler Speicher	Jen
14	Grüne Browser-Erweiterung	Hintergrundprozesse im Browser, Web-Performance	Nutzen Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; lernen Sie über Web-Performance und einige 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 auf die Spieleentwicklung	Einführung in fortgeschrittene Spieleentwicklung	Chris
16	Weltraum-Spiel	Zeichnen auf Canvas	Lernen Sie die Canvas-API kennen, die verwendet wird, um Elemente auf einem Bildschirm zu zeichnen	Zeichnen auf Canvas	Chris
17	Weltraum-Spiel	Elemente auf dem Bildschirm bewegen	Entdecken Sie, wie Elemente Bewegung erhalten können, indem kartesische Koordinaten und die Canvas-API verwendet werden	Elemente bewegen	Chris
18	Weltraum-Spiel	Kollisions-Erkennung	Lassen Sie Elemente miteinander kollidieren und aufeinander reagieren, indem Sie Tastendrücke verwenden, und bieten Sie eine Abkühlfunktion, um die Leistung des Spiels zu gewährleisten	Kollisions-Erkennung	Chris
19	Weltraum-Spiel	Punkte zählen	Führen Sie mathematische Berechnungen basierend auf dem Status und der Leistung des Spiels durch	Punkte zählen	Chris
20	Weltraum-Spiel	Spiel beenden und neu starten	Lernen Sie, wie Sie das Spiel beenden und neu starten, einschließlich der Bereinigung von Assets und der Zurücksetzung von Variablenwerten	Endbedingung	Chris
21	Banking-App	HTML-Vorlagen und Routen in einer Web-App	Lernen Sie, wie Sie das Gerüst der Architektur einer mehrseitigen Website mit Routing und HTML-Vorlagen erstellen	HTML-Vorlagen und Routen	Yohan
22	Banking-App	Ein Login- und Registrierungsformular erstellen	Lernen Sie, wie Sie Formulare erstellen und Validierungsroutinen handhaben	Formulare	Yohan
23	Banking-App	Methoden zum Abrufen und Verwenden von Daten	Wie Daten in Ihre App fließ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 wie Sie ihn programmatisch verwalten können	Zustandsmanagement	Yohan
25	Browser/VScode Code	Arbeiten mit VScode	Lernen Sie, wie Sie einen Code-Editor verwenden	VScode Code-Editor verwenden	Chris
26	KI-Assistenten	Arbeiten mit KI	Lernen Sie, wie Sie Ihren eigenen KI-Assistenten erstellen	KI-Assistenten-Projekt	Chris

🏫 Pädagogik

Unser Lehrplan basiert auf zwei zentralen pädagogischen Prinzipien:

projektbasiertes Lernen
regelmäßige Quiz

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

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

Indem sichergestellt wird, dass die Inhalte mit den Projekten übereinstimmen, wird der Lernprozess für die Studierenden ansprechender gestaltet und die Behaltensquote der Konzepte erhöht. Wir haben auch mehrere Einführungslektionen zu JavaScript-Grundlagen geschrieben, um Konzepte vorzustellen, begleitet von einem Video aus der Sammlung "Beginners Series to: JavaScript", deren Autoren teilweise zu diesem Lehrplan beigetragen haben.

Darüber hinaus setzt ein niedrigschwelliges Quiz vor einer Klasse die Absicht des Studierenden auf das Lernen eines Themas, während ein zweites Quiz nach der Klasse die Behaltensquote weiter erhöht. 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 zunehmend komplexer.

Während wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten zu konzentrieren, die als Webentwickler benötigt werden, bevor ein Framework übernommen wird, wäre ein guter nächster Schritt nach Abschluss dieses Lehrplans das Lernen über Node.js durch eine weitere Sammlung von Videos: "Beginner Series to: Node.js".

Besuchen Sie unsere Verhaltensregeln und Richtlinien für Beiträge. Wir freuen uns über Ihr konstruktives Feedback!

🧭 Offline-Zugriff

Sie können diese Dokumentation offline ausführen, indem Sie Docsify verwenden. Forken Sie dieses Repository, installieren Sie Docsify auf Ihrem lokalen Rechner und geben Sie dann im Stammordner dieses Repos docsify serve ein. Die Website wird auf Port 3000 auf Ihrem localhost bereitgestellt: localhost:3000.

📘 PDF

Ein PDF mit allen Lektionen finden Sie hier.

🎒 Weitere Kurse

Unser Team erstellt weitere Kurse! Schauen Sie sich an:

Hilfe erhalten

Falls du feststeckst oder Fragen zum Erstellen von KI-Anwendungen hast, tritt bei:

Falls du Produktfeedback geben möchtest oder Fehler beim Erstellen auftreten, 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, beachten Sie bitte, 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.

29 KiB Raw Blame History Unescape Escape