28 KiB

Raw Permalink Blame History Unescape Escape

Folgen Sie diesen Schritten, um mit diesen Ressourcen zu beginnen:

Repository forken: Klicken Sie auf
Repository klonen: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
Treten Sie dem Azure AI Foundry Discord bei und treffen Sie Experten und andere Entwickler

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 behandelt JavaScript, CSS und HTML durch praktische Projekte wie Terrarien, Browser-Erweiterungen und Weltraumspiele. Nehmen Sie an Quizfragen, Diskussionen und praktischen Aufgaben teil. Verbessern Sie Ihre Fähigkeiten und optimieren Sie Ihr Wissen mit unserer effektiven projektbasierten Pädagogik. Beginnen Sie noch heute Ihre Programmierreise!

🌐 Mehrsprachige Unterstützung

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

Wenn Sie zusätzliche Übersetzungen wünschen, finden Sie die unterstützten Sprachen hier

🧑‍🎓 Sind Sie ein Student?

Besuchen Sie die Student Hub Seite, wo Sie Ressourcen für Anfänger, Studentenpakete und sogar Möglichkeiten finden, einen kostenlosen Zertifikatsgutschein zu erhalten. Dies ist die Seite, die Sie als Lesezeichen speichern und regelmäßig besuchen sollten, da wir den Inhalt monatlich wechseln.

📣 Ankündigung - Neues Projekt mit Generativer KI

Ein neues KI-Assistent-Projekt wurde gerade hinzugefügt, sehen Sie es sich hier an.

📣 Ankündigung - Neuer Lehrplan zu Generativer 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 loszulegen!

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

Jede Lektion enthält eine Aufgabe, ein Wissensquiz und eine Herausforderung, die Ihnen helfen, Themen wie folgende zu lernen:

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 aufgenommen, wie Sie diesen Lehrplan nutzen können. Wir würden uns über Ihr Feedback in unserem Diskussionsforum freuen!

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

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

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

📋 Einrichten Ihrer Umgebung

Dieser Lehrplan hat eine einsatzbereite Entwicklungsumgebung! Wenn Sie beginnen, können Sie den Lehrplan entweder in einem Codespace (eine browserbasierte Umgebung, keine Installationen erforderlich) oder lokal auf Ihrem Computer mit einem Texteditor wie Visual Studio Code ausführen.

Erstellen Sie Ihr Repository

Um Ihre Arbeit einfach zu speichern, wird empfohlen, dass Sie Ihre eigene Kopie dieses Repositorys erstellen. Sie können dies 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:

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

Ausführen des Lehrplans in einem Codespace

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

!Codespace./images/createcodespace.png)

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, führt Sie durch verschiedene Optionen für jedes dieser Tools, damit Sie auswählen können, was am besten für Sie funktioniert.

Unsere Empfehlung ist die Verwendung von Visual Studio Code als Editor, der auch ein integriertes Terminal enthält. Sie können Visual Studio Code hier herunterladen.

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

!CodeSpace

Öffnen Sie dann Terminal innerhalb von Visual Studio Code und führen Sie den folgenden Befehl aus, wobei Sie <your-repository-url> durch die gerade kopierte URL ersetzen:
```
git clone <your-repository-url>
```
Öffnen Sie den Ordner in Visual Studio Code. Sie können dies tun, indem Sie auf Datei klicken.

Ordner öffnen und den Ordner auswählen, den du gerade geklont hast. Empfohlene Visual Studio Code-Erweiterungen:

Live Server - um HTML-Seiten direkt in Visual Studio Code zu betrachten

Copilot - um schneller Code zu schreiben

📂 Jede Lektion beinhaltet:

optionale Sketchnotes
optionales ergänzendes Video
Quiz zur Aufwärmung 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
Aufgaben
Quiz nach der Lektion

Eine Anmerkung zu den Quizzes: Alle Quizzes befinden sich im Ordner "Quiz-app", insgesamt 48 Quizzes 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:in
01	Erste Schritte	Einführung in die Programmierung und Werkzeuge der Branche	Lernen Sie die Grundlagen der meisten Programmiersprachen und die Software kennen, die professionelle Entwickler:innen nutzen	Einführung in Programmiersprachen und Werkzeuge der Branche	Jasmine
02	Erste Schritte	Grundlagen von GitHub, inklusive Teamarbeit	Wie man GitHub in Projekten nutzt und mit anderen an einem Code-Bestand zusammenarbeitet	Einführung in GitHub	Floor
03	Erste Schritte	Barrierefreiheit	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, wie Funktionen und Methoden den logischen Ablauf einer Anwendung steuern	Funktionen und Methoden	Jasmine und Christopher
06	JS-Grundlagen	Entscheidungen mit JS treffen	Lernen, wie man Bedingungen im Code mit Entscheidungsstrukturen erstellt	Entscheidungen treffen	Jasmine
07	JS-Grundlagen	Arrays und Schleifen	Arbeiten 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 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 und responsivem Design	Einführung in CSS	Jen
10	Terrarium	JavaScript Closures, DOM-Manipulation	Schreiben 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, wie man Tastaturereignisse nutzt, um die Logik einer JavaScript-App zu steuern	Ereignisgesteuerte Programmierung	Christopher
12	Grüne Browser-Erweiterung	Arbeiten mit Browsern	Lernen, wie Browser funktionieren, ihre Geschichte und wie man die ersten Elemente einer Browser-Erweiterung erstellt	Über Browser	Jen
13	Grüne Browser-Erweiterung	Formulare erstellen, eine API aufrufen und Variablen im lokalen Speicher speichern	Erstellen Sie die JavaScript-Elemente Ihrer Browser-Erweiterung, um eine API mit Variablen aus dem 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 Optimierungen für die Web-Performance	Hintergrundaufgaben und Performance	Jen
15	Weltraum-Spiel	Fortgeschrittene Spieleentwicklung mit JavaScript	Lernen Sie 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, um Elemente auf einem Bildschirm zu zeichnen	Zeichnen auf Canvas	Chris
17	Weltraum-Spiel	Elemente auf dem Bildschirm bewegen	Entdecken Sie, wie Elemente mithilfe kartesischer Koordinaten und der Canvas-API Bewegung erhalten	Elemente bewegen	Chris
18	Weltraum-Spiel	Kollisionserkennung	Lassen Sie Elemente kollidieren und aufeinander reagieren, nutzen Sie Tastendrücke und implementieren Sie eine Abkühlfunktion für die Spielperformance	Kollisionserkennung	Chris
19	Weltraum-Spiel	Punktestand führen	Führen Sie mathematische Berechnungen basierend auf dem Spielstatus und der Performance durch	Punktestand führen	Chris
20	Weltraum-Spiel	Spiel beenden und neu starten	Lernen Sie, wie man ein Spiel beendet und neu startet, einschließlich der Bereinigung von Ressourcen und Zurücksetzung von Variablen	Endbedingung	Chris
21	Banking-App	HTML-Templates und Routen in einer Web-App	Lernen Sie, wie man die Struktur einer mehrseitigen Website mit Routing und HTML-Templates erstellt	HTML-Templates und Routen	Yohan
22	Banking-App	Login- und Registrierungsformular erstellen	Lernen Sie, wie man Formulare erstellt und Validierungsroutinen implementiert	Formulare	Yohan
23	Banking-App	Methoden zum Abrufen und Verwenden von Daten	Wie Daten in Ihre App fließen, wie man sie abruft, speichert und verwaltet	Daten	Yohan
24	Banking-App	Konzepte des Zustandsmanagements	Lernen Sie, wie Ihre App den Zustand beibehält und wie man ihn programmatisch verwaltet	Zustandsmanagement	Yohan
25	Browser/VScode Code	Arbeiten mit VScode	Lernen Sie, wie man einen Code-Editor verwendet	VScode Code-Editor verwenden	Chris
26	KI-Assistenten	Arbeiten mit KI	Lernen Sie, wie man einen eigenen KI-Assistenten erstellt	KI-Assistent-Projekt	Chris

🏫 Pädagogik

Unser Lehrplan basiert auf zwei zentralen pädagogischen Prinzipien:

projektbasiertes Lernen
häufige Quizzes

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

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

Indem der Inhalt projektbasiert gestaltet ist, wird der Lernprozess für die Studierenden ansprechender und die Behaltensleistung der Konzepte wird verbessert. Wir haben außerdem mehrere Einführungslektionen zu JavaScript-Grundlagen geschrieben, die mit einem Video aus der Sammlung "Beginners Series to: JavaScript" kombiniert sind, von denen einige Autor:innen zu diesem Lehrplan beigetragen haben.

Darüber hinaus setzt ein niedrigschwelliges Quiz vor einer Lektion den Fokus der Studierenden auf das Lernen eines Themas, während ein zweites Quiz nach der Lektion die Behaltensleistung weiter fördert. Dieser Lehrplan wurde flexibel und unterhaltsam gestaltet und kann vollständig oder teilweise absolviert werden. Die Projekte beginnen klein und werden im Laufe des 12-wöchigen Zyklus zunehmend komplexer.

Obwohl wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten zu konzentrieren, die als Webentwickler:in benötigt werden, bevor ein Framework verwendet wird, 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 Richtlinien für Beiträge. 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:

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, 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.

28 KiB Raw Permalink Blame History Unescape Escape