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 in JavaScript, CSS und HTML ein, durch praktische Projekte wie Terrarien, Browsererweiterungen und Weltraumspiele. Engagieren Sie sich mit Quizzen, Diskussionen und praktischen Aufgaben. Verbessern Sie Ihre Fähigkeiten und optimieren Sie Ihr Wissen mit unserer effektiven projektbasierten Pädagogik. Starten Sie noch heute Ihre Coding-Reise!

🧑‍🎓 Sind Sie Student?

Besuchen Sie die Student Hub Seite, wo Sie Anfängerressourcen, Studentenpakete und sogar Möglichkeiten finden, einen kostenlosen Zertifikatsgutschein zu erhalten. Dies ist die Seite, die Sie bookmarken und von Zeit zu Zeit besuchen sollten, da wir den Inhalt monatlich aktualisieren.

📣 Ankündigung - Neuer Lehrplan zu Generativer AI für JavaScript wurde gerade veröffentlicht

Verpassen Sie nicht unseren neuen Lehrplan zu Generativer AI!

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

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

Jede Lektion enthält eine Aufgabe zum Abschließen, eine Wissensüberprüfung und eine Herausforderung, die Sie durch Themen wie folgende führt:

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

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

🌱 Erste Schritte

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

Lernende, beginnen Sie jede Lektion mit einem Vorlesungs-Quiz und folgen Sie dann dem Lesen des Vortragsmaterials, dem Abschließen der verschiedenen Aktivitäten und überprüfen Sie Ihr Verständnis mit dem Nachlesungs-Quiz.

Um Ihr Lernerlebnis zu verbessern, vernetzen Sie sich mit Ihren Mitstudierenden, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind in unserem Diskussionsforum erwünscht, wo unser Team von Moderatoren Ihre Fragen beantworten wird.

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

📋 Einrichten Ihrer Umgebung

Dieser Lehrplan hat eine fertige Entwicklungsumgebung! Wenn Sie beginnen, können Sie wählen, ob Sie den Lehrplan in einem Codespace (eine browserbasierte Umgebung ohne Installationsbedarf) oder lokal auf Ihrem Computer mit einem Texteditor wie Visual Studio Code ausführen möchten.

Erstellen Sie Ihr Repository

Damit Sie Ihre Arbeit einfach speichern können, wird empfohlen, dass Sie eine eigene Kopie dieses Repositorys erstellen. Sie können dies tun, indem Sie auf den Button Use this template oben auf der Seite klicken. Dadurch wird ein neues Repository in Ihrem GitHub-Konto mit einer Kopie des Lehrplans erstellt.

Folgen Sie diesen Schritten:

Forken Sie das Repository: Klicken Sie auf den "Fork"-Button oben rechts auf dieser Seite.
Klonen Sie das Repository: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Ausführen des Lehrplans in einem Codespace

Klicken Sie in Ihrer Kopie dieses Repositorys, die Sie erstellt haben, auf den Code-Button und wählen Sie Open with Codespaces. Dadurch wird ein neuer Codespace für Sie 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 Befehlszeilentool. Unsere erste Lektion, Einführung in Programmiersprachen und Tools des Handels, führt Sie durch verschiedene Optionen für jedes dieser Tools, damit Sie auswählen können, was für Sie am besten funktioniert.

Unsere Empfehlung ist, Visual Studio Code als Editor zu verwenden, der auch ein integriertes Terminal hat. Sie können Visual Studio Code hier herunterladen.

Klonen Sie Ihr Repository auf Ihren Computer. Sie können dies tun, indem Sie auf den Code-Button klicken und die URL kopieren:

Ö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 URL ersetzen, die Sie gerade kopiert haben:
```
git clone <your-repository-url>
```
Öffnen Sie den Ordner in Visual Studio Code. Sie können dies tun, indem Sie auf Datei > Ordner öffnen klicken und den Ordner auswählen, den Sie gerade geklont haben.

Empfohlene Visual Studio Code-Erweiterungen:

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 Sketchnotes
optionale ergänzende Videos
Vor-Lektion-Aufwärmquiz
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
Nach-Lektion-Quiz

Hinweis zu Quizzen: Alle Quizze befinden sich im Quiz-App-Ordner, insgesamt 48 Quizze mit jeweils drei Fragen. Sie sind innerhalb der Lektionen verlinkt; die Quiz-App kann lokal ausgeführt oder auf Azure bereitgestellt werden. Folgen Sie den Anweisungen im quiz-app-Ordner. Sie werden schrittweise lokalisiert.

🗃️ Lektionen

	Projektname	Vermittelte Konzepte	Lernzieile	Verlinkte Lektion	Autor
01	Erste Schritte	Einführung in Programmierung und Werkzeuge des Handels	Lernen Sie die grundlegenden Prinzipien der meisten Programmiersprachen und Software kennen, die professionellen Entwicklern bei ihrer Arbeit hilft	Einführung in Programmiersprachen und Werkzeuge des Handels	Jasmine
02	Erste Schritte	Grundlagen von GitHub, einschließlich Teamarbeit	Wie Sie GitHub in Ihrem Projekt nutzen und mit anderen an einer Codebasis zusammenarbeiten	Einführung in GitHub	Floor
03	Erste Schritte	Barrierefreiheit	Lernen Sie 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	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	Erfahren Sie, wie Sie Bedingungen in Ihrem Code mit Entscheidungsmethoden 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 für ein Online-Terrarium mit Fokus auf den Layout-Aufbau	Einführung in HTML	Jen
09	Terrarium	CSS in der Praxis	Gestalten Sie das CSS für das Online-Terrarium mit Fokus auf die Grundlagen von CSS, einschließlich responsiver Gestaltung	Einführung in CSS	Jen
10	Terrarium	JavaScript-Closures, DOM-Manipulation	Erstellen Sie das JavaScript, um das Terrarium als Drag-and-Drop-Schnittstelle zu nutzen, mit Fokus auf Closures und DOM-Manipulation	JavaScript-Closures, DOM-Manipulation	Jen
11	Typing Game	Ein Tippspiel erstellen	Lernen Sie, wie Sie Tastaturereignisse nutzen, um die Logik Ihrer 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	Über Browser	Jen
13	Green Browser Extension	Formulare erstellen, APIs aufrufen und Variablen im Local Storage speichern	Erstellen Sie die JavaScript-Elemente Ihrer Browsererweiterung, um eine API mit im Local Storage gespeicherten Variablen aufzurufen	APIs, Formulare und Local Storage	Jen
14	Green Browser Extension	Hintergrundprozesse im Browser, Web-Performance	Nutzen Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; lernen Sie über Web-Performance und Optimierungen	Hintergrundaufgaben und Performance	Jen
15	Space Game	Fortgeschrittene Spieleentwicklung mit JavaScript	Lernen Sie über Vererbung mit Klassen und Komposition sowie das Pub/Sub-Muster, um ein Spiel vorzubereiten	Einführung in fortgeschrittene Spieleentwicklung	Chris
16	Space Game	Zeichnen auf Canvas	Lernen Sie die Canvas-API kennen, um Elemente auf einen 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	Elemente bewegen	Chris
18	Space Game	Kollisionserkennung	Lassen Sie Elemente kollidieren und aufeinander reagieren mithilfe von Tastendrücken und sorgen Sie mit einer Cooldown-Funktion für eine reibungslose Spielperformance	Kollisionserkennung	Chris
19	Space Game	Punktestand führen	Führen Sie mathematische Berechnungen basierend auf dem Spielstatus und der Performance 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 Assets und Zurücksetzen von Variablen	Die Endbedingung	Chris
21	Banking App	HTML-Vorlagen und Routen in einer Web-App	Erfahren Sie, wie Sie das Gerüst einer mehrseitigen Website mit Routing und HTML-Vorlagen erstellen	HTML-Vorlagen und Routen	Yohan
22	Banking App	Ein Login- und Registrierungsformular erstellen	Lernen Sie, Formulare zu erstellen und Validierungsroutinen zu handhaben	Formulare	Yohan
23	Banking App	Methoden zum Abrufen und Nutzen von Daten	Wie Daten in Ihre App fließen, wie Sie sie abrufen, speichern und verwerfen	Daten	Yohan
24	Banking App	Konzepte der Zustandsverwaltung	Erfahren Sie, wie Ihre App den Zustand behält und wie Sie ihn programmatisch verwalten	Zustandsverwaltung	Yohan

🏫 Pädagogik

Unser Curriculum basiert auf zwei zentralen pädagogischen Prinzipien:

projektbasiertes Lernen
häufige Quizze

Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Tools und Techniken, die heutige Webentwickler verwenden. Die Studierenden haben die Möglichkeit, praktische Erfahrungen durch den Aufbau eines Tippspiels, eines virtuellen Terrariums, einer umweltfreundlichen Browsererweiterung, eines Space-Invader-ähnlichen Spiels und einer Banking-App für Unternehmen zu sammeln. Am Ende der Reihe verfügen die Studierenden über ein solides Verständnis der Webentwicklung.

🎓 Sie können die ersten Lektionen dieses Curriculums als Learn Path auf Microsoft Learn absolvieren!

Durch die Ausrichtung der Inhalte an Projekten wird der Prozess für die Studierenden ansprechender und die Behaltensleistung der Konzepte gesteigert. Wir haben auch mehrere Einführungslektionen zu JavaScript-Grundlagen verfasst, um Konzepte einzuführen, ergänzt durch ein Video aus der Sammlung "Beginners Series to: JavaScript", deren Autoren teilweise zu diesem Curriculum beigetragen haben.

Darüber hinaus setzt ein Quiz mit geringem Druck vor einer Unterrichtseinheit die Lernabsicht der Studierenden für ein Thema, während ein zweites Quiz nach dem Unterricht die Behaltensleistung weiter fördert. Dieses Curriculum wurde so gestaltet, dass es flexibel und unterhaltsam ist und ganz oder teilweise absolviert werden kann. Die Projekte beginnen klein und werden bis zum Ende des 12-wöchigen Zyklus zunehmend komplex.

Obwohl wir bewusst auf die Einführung von JavaScript-Frameworks verzichtet haben, um die grundlegenden Fähigkeiten zu vermitteln, die ein Webentwickler vor der Verwendung eines Frameworks benötigt, wäre ein guter nächster Schritt nach Abschluss dieses Curriculums das Erlernen von Node.js über eine weitere Videosammlung: "Beginner Series to: Node.js".

Besuchen Sie unsere Verhaltensrichtlinie und Mitwirkungsrichtlinien. Wir freuen uns über Ihr konstruktives Feedback!

� Offline-Zugriff

Sie können diese Dokumentation offline nutzen, indem Sie Docsify verwenden. Forken Sie dieses Repo, installieren Sie Docsify auf Ihrem lokalen Rechner und geben Sie dann im Stammverzeichnis dieses Repos docsify serve ein. Die Website wird auf Port 3000 Ihres Localhost bereitgestellt: localhost:3000.

📘 PDF

Eine PDF aller Lektionen finden Sie hier.

🎒 Weitere Kurse

Unser Team produziert weitere Kurse! Schauen Sie sich an:

Lizenz

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