annalena.artinger
3 years ago
parent
120204995f
commit
bd809d6459
@ -0,0 +1,111 @@
|
|||||||
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||||
|
[](http://makeapullrequest.com)
|
||||||
|
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||||
|
|
||||||
|
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||||
|
|
||||||
|
# Web-Entwicklung für Einsteiger - Ein Lehrplan
|
||||||
|
|
||||||
|
Die Azure Cloud Vertreter von Microsoft freuen sich, diesen 12-wöchigen Kurs mit 24 Lektionen zu den Grundlagen von JavaScript, CSS und HTML anbieten zu können. Jede Lektion enthält Quizfragen vor und nach der Lektion, schriftliche Anweisungen zur Durchführung der Lektion, eine Lösung, eine Aufgabe und mehr. Unsere projektbasierte Lehrmethode ermöglicht es Ihnen zu lernen, während Sie die Methoden anwenden, ein bewährter Weg neue Fähigkeiten besser zu "verinnerlichen".
|
||||||
|
|
||||||
|
**Herzlichen Dank an unsere Autoren Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees und die Sketchnote-Künstlerin Tomomi Imura!**
|
||||||
|
|
||||||
|
# Sind Sie Student?
|
||||||
|
|
||||||
|
Nutzen Sie die folgenden Ressourcen für den Einstieg:
|
||||||
|
|
||||||
|
- [Student Hub](https://docs.microsoft.com/learn/student-hub?WT.mc_id=academic-13441-cxa) Auf dieser Seite finden Sie Ressourcen für Einsteiger, Studentenpakete und sogar Möglichkeiten, einen kostenlosen Zertifizierungsgutschein zu erhalten. Diese Seite sollten Sie als Lesezeichen speichern und von Zeit zu Zeit besuchen, da wir die Inhalte mindestens einmal im Monat anpassen.
|
||||||
|
- [Microsoft Student Learn Ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-13441-cxa) Werden Sie Mitglied einer globalen Gemeinschaft von Studentenbotschaftern, dies könnte Ihr Weg zu Microsoft sein.
|
||||||
|
|
||||||
|
# Erste Schritte
|
||||||
|
|
||||||
|
> Für **Lehrer**, haben wir [einige Vorschläge](for-teachers.de.md), wie man diesen Lehrplan verwenden kann. Wir würden uns über Ihr Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) freuen!
|
||||||
|
|
||||||
|
> Für **[Studenten](https://aka.ms/student-page)**: um diesen Kurs für sich alleine zu machen, forken Sie das gesamte Repo und bearbeiten Sie die Übungen, beginnend mit einem Quiz vor der Lektion. Lesen Sie dann die Lektion und bearbeiten Sie den Rest der Aufgaben. Versuchen Sie sich die Projekte zu erarbeiten, indem Sie das Gelernte anwenden, anstatt nur den Lösungscode zu kopieren; Der Code ist jedoch in den /solutions-Ordnern in jeder projektorientierten Lektion verfügbar. Eine andere Idee wäre, mit Freunden eine Lerngruppe zu bilden und den Inhalt gemeinsam durchzuarbeiten. Zum weiteren Studium empfehlen wir [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) und die unten genannten Videos.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=R1wrdtmBSII)
|
||||||
|
|
||||||
|
Gif von [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||||
|
|
||||||
|
> 🎥 Klicken Sie auf das Bild oben, um ein Video über das Projekt und die Leute, die es entwickelt haben, zu sehen!
|
||||||
|
|
||||||
|
## Lehrmethode
|
||||||
|
|
||||||
|
Bei der Erstellung dieses Kursplans haben wir uns für zwei pädagogische Grundsätze entschieden: Wir haben dafür gesorgt, dass er projektbasiert ist und viele Quizfragen enthält. Am Ende dieser Reihe werden Sie ein Tippspiel, ein virtuelles Terrarium, eine "grüne" Browsererweiterung, ein Spiel vom Typ "Space Invaders" und eine Banking-App für Geschäftskunden entwickelt haben und die Grundlagen von JavaScript, HTML und CSS zusammen mit der modernen Toolchain des heutigen Webentwicklers gelernt haben.
|
||||||
|
|
||||||
|
> Sie können die ersten Lektionen dieses Kursplans als [Lernpfad](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) auf Microsoft Learn ansehen!
|
||||||
|
|
||||||
|
Durch die Abstimmung der Inhalte auf die Projekte wird der Prozess für die Schüler interessanter und das Einprägen der Konzepte wird verbessert. Wir haben auch mehrere Anfängerlektionen zu den JavaScript-Grundlagen entwickelt, um Konzepte einzuführen, zusammen mit Video-Tutorials aus der "[Einsteigerserie für JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)", von denen einige Autoren bei diesem Kursplan mitgewirkt haben.
|
||||||
|
|
||||||
|
Ein Quiz mit geringem Schwierigkeitsgrad vor einer Lektion stellt die Intention der Schüler auf das Erlernen eines Themas ein, während ein zweites Quiz nach der Lektion dafür sorgt, dass das Gelernte im Kopf bleibt. Dieser Lehrplan wurde so konzipiert, dass er flexibel ist und Spaß macht und ganz oder teilweise absolviert werden kann. Die Projekte fangen klein an und werden am Ende des 12-Wochen-Zyklus immer komplexer.
|
||||||
|
|
||||||
|
Wir haben es bewusst vermieden, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten zu konzentrieren, die man als Webentwickler braucht, bevor man ein Framework einsetzt. Ein guter nächster Schritt zur Vervollständigung dieses Kursplans wäre es, Node.js über eine andere Sammlung von Videos kennenzulernen: "[Reihe für Node.js-Einsteiger](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||||
|
|
||||||
|
> Hier finden Sie unseren [Verhaltenskodex](CODE_OF_CONDUCT.md) und die [Mitwirkenden-](CONTRIBUTING.md), und [Übersetzungs-](TRANSLATIONS.md) Richtlinien. Wir freuen uns über Ihr konstruktives Feedback!
|
||||||
|
|
||||||
|
## Jede Lektion enthält:
|
||||||
|
|
||||||
|
- optionale Sketchnotes
|
||||||
|
- optionales zusätzliches Video (englisch)
|
||||||
|
- Aufwärm-Quiz vor der Lektion
|
||||||
|
- Skripte zu den Lektionen
|
||||||
|
- eine Schritt-für-Schritt-Anleitung für den Aufbau des Projekts bei den projektbasierten Lektionen
|
||||||
|
- Wissenstests
|
||||||
|
- eine zu meisternde Herausforderung
|
||||||
|
- ergänzende Lektüre
|
||||||
|
- eine Aufgabe
|
||||||
|
- Abschluss-Quiz nach der Lektion
|
||||||
|
|
||||||
|
**Hinweis zu den Quizfragen**: Alle Quizze sind [in dieser App](https://ashy-river-0debb7803.1.azurestaticapps.net/) enthalten, insgesamt 48 Quizze mit je drei Fragen. Sie sind in den Lektionen verlinkt, aber die Quiz-App kann auch lokal ausgeführt werden; folgen Sie den Anweisungen im Ordner `quiz-app`. Sie werden Schritt für Schritt angeleitet.
|
||||||
|
|
||||||
|
## Lektionen
|
||||||
|
|
||||||
|
| | Projekt Name | Vermittelte Konzepte | Lernziele | Verknüpfte Lektion | Autor |
|
||||||
|
| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||||
|
| 01 | Erste Schritte | Einführung in die Programmierung und des Handwerkszeug | Lernen Sie die Grundlagen der meisten Programmiersprachen und die Software kennen, die professionellen Entwicklern bei ihrer Arbeit hilft | [Einführung in die Programmierung und des Handwerkszeug](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||||
|
| 02 | Erste Schritte | Grundlagen von GitHub, einschließlich der Arbeit in einem Team | Wie Sie GitHub in Ihrem Projekt nutzen; wie Sie mit anderen an einer Codebasis zusammenarbeiten | [Grundlagen von GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||||
|
| 03 | Erste Schritte | Barrierefreiheit | Lernen Sie die Grundlagen der Barrierefreiheit im Internet kennen | [Grundlagen der Barrierefreiheit](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||||
|
| 04 | JS Grundlagen | JavaScript Datentypen | Die Grundlagen der JavaScript Datentypen | [Datentypen](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||||
|
| 05 | JS Grundlagen | Funktionen und Methoden | Lernen Sie Funktionen und Methoden kennen, um den logischen Ablauf einer Anwendung zu verwalten | [Funktionen und Methoden](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||||
|
| 06 | JS Grundlagen | Entscheidungsfindung mit JS | Lernen Sie, wie Sie mit Hilfe von Entscheidungsmethoden, Bedingungen in Ihrem Code erstellen können | [Entscheidungsfindung](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||||
|
| 07 | JS Grundlagen | Arrays und Schleifen | Arbeiten mit Daten mithilfe von Arrays und Schleifen in JavaScript | [Arrays und Schleifen](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||||
|
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML im praktischen Einsatz | HTML erstellen, um ein Online-Terrarium aufzubauen, mit dem Schwerpunkt auf der Erstellung eines Layouts | [Einführung in HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||||
|
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS im praktischen Einsatz | Erstellen Sie das CSS für die Gestaltung des Online-Terrariums, wobei Sie sich auf die Grundlagen von CSS konzentrieren und die Seite ansprechend gestalten | [Einführung in CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||||
|
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM-Manipulation | Erstellen Sie das JavaScript, damit das Terrarium als Drag/Drop-Schnittstelle funktioniert, und konzentrieren Sie sich dabei auf Closures und DOM-Manipulation | [JavaScript Closures, DOM-Manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||||
|
| 11 | [Tippspiel](/4-typing-game/solution/README.md) | Ein Tippspiel erstellen | Lernen Sie, wie Sie Tastatureingaben zur Steuerung der Logik Ihrer JavaScript-Anwendung verwenden können | [Ereignisgesteuerte Programmierung](/4-typing-game/typing-game/README.md) | Christopher |
|
||||||
|
| 12 | [Grüne Browser-Erweiterung](/5-browser-extension/solution/README.md) | Arbeiten mit Browsern | Erfahren Sie, wie Browser funktionieren, ihre Geschichte und wie man die ersten Elemente eines Browsers aufbaut | [Über Browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||||
|
| 13 | [Grüne Browser-Erweiterung](/5-browser-extension/solution/README.md) | Erstellen eines Formulars, Aufrufen einer API und Speichern von Variablen im lokalen Speicher | Erstellen Sie die JavaScript-Elemente Ihrer Browsererweiterung, um eine API mit lokal gespeicherten Variablen aufzurufen | [APIs, Formulare und lokale Speicherung](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||||
|
| 14 | [Grüne Browser-Erweiterung](/5-browser-extension/solution/README.md) | Hintergrundprozesse im Browser, Web-Performance | Verwenden Sie die Hintergrundprozesse des Browsers, um das Icon der Erweiterung anzupassen; lernen Sie etwas über die Web-Performance und einige Optimierungen, die Sie vornehmen können | [Hintergrundaufgaben und Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||||
|
| 15 | [Space Game](/6-space-game/solution/README.md) | Fortgeschrittene Spielentwicklung mit JavaScript | Erlernen von Vererbung unter Verwendung von Klassen und Komposition sowie des Pub/Sub-Musters als Vorbereitung auf die Entwicklung eines Spiels | [Einführung in die fortgeschrittene Spieleentwicklung](/6-space-game/1-introduction/README.md) | Chris |
|
||||||
|
| 16 | [Space Game](/6-space-game/solution/README.md) | Zeichnen mit Canvas | Lernen Sie die Canvas-API kennen, die zum Zeichnen von Elementen auf einem Bildschirm verwendet wird | [Zeichnen mit Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||||
|
| 17 | [Space Game](/6-space-game/solution/README.md) | Bewegen von Elementen auf dem Bildschirm | Entdecken Sie, wie sich Elemente mithilfe der kartesischen Koordinaten und der Canvas-API bewegen können | [Elemente bewegen](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||||
|
| 18 | [Space Game](/6-space-game/solution/README.md) | Kollisionsdetektion | Lassen Sie Elemente per Tastendruck kollidieren und aufeinander reagieren und bieten Sie eine Abklingfunktion, um die Performance des Spiels zu gewährleisten | [Kollisionsdetektion](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||||
|
| 19 | [Space Game](/6-space-game/solution/README.md) | Punkte zählen | Mathematische Berechnungen auf der Grundlage von Status und Leistung des Spiels durchführen | [Punkte zählen](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||||
|
| 20 | [Space Game](/6-space-game/solution/README.md) | Beenden und Neustarten des Spiels | Lernen Sie, wie man das Spiel beendet und neu startet, einschließlich der Bereinigung von Assets und dem Zurücksetzen von Variablenwerten | [Der Endzustand](/6-space-game/6-end-condition/README.md) | Chris |
|
||||||
|
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML-Vorlagen und Routes in einer Webanwendung | Lernen Sie, wie Sie das Gerüst einer mehrseitigen Webseiten-Architektur mithilfe von Routing und HTML-Vorlagen erstellen | [HTML Templates und Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||||
|
| 22 | [Banking App](/7-bank-project/solution/README.md) | Erstellen Sie ein Anmelde- und Registrierungsformular | Lernen Sie, wie man Formulare erstellt und Validierungsroutinen durchführt | [Formulare](/7-bank-project/2-forms/README.md) | Yohan |
|
||||||
|
| 23 | [Banking App](/7-bank-project/solution/README.md) | Methoden zum Abrufen und Verwenden von Daten | Wie Daten in und aus Ihrer Anwendung fließen, wie man sie abruft, speichert und löscht | [Daten](/7-bank-project/3-data/README.md) | Yohan |
|
||||||
|
| 24 | [Banking App](/7-bank-project/solution/README.md) | Konzepte des Statusmangement | Erfahren Sie, wie Ihre Anwendung den Status beibehält und wie Sie ihn programmatisch verwalten können | [Statusmangement](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||||
|
|
||||||
|
## Offline-Zugriff
|
||||||
|
|
||||||
|
Sie können diese Dokumentation mit Hilfe von [Docsify](https://docsify.js.org/#/) offline ausführen. Forken Sie dieses Repo, [installieren Sie Docsify](https://docsify.js.org/#/quickstart) auf Ihrem lokalen Rechner, und geben Sie dann im Stammverzeichnis dieses Repos den Befehl `docsify serve` ein. Die Website wird auf Port 3000 auf Ihrem lokalen Rechner bereitgestellt: `localhost:3000`.
|
||||||
|
|
||||||
|
## PDF
|
||||||
|
|
||||||
|
Ein PDF mit allen Lektionen finden Sie [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
||||||
|
|
||||||
|
## Andere Lehrpläne
|
||||||
|
|
||||||
|
Unser Team hat weitere Lehrpläne entwickelt! Schauen Sie sich diese an:
|
||||||
|
|
||||||
|
- [Maschinelles Lernen für Einsteiger](https://aka.ms/ml-beginners)
|
||||||
|
- [IoT für Einsteiger](https://aka.ms/iot-beginners)
|
||||||
|
- [Data Science für Einsteiger](https://aka.ms/datascience-beginners)
|
||||||
|
- [KI für Anfänger](https://aka.ms/ai-beginners)
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
## Für Lehrer
|
||||||
|
|
||||||
|
Sie möchten diesen Kurs in Ihrem Unterricht verwenden? Sehr gerne!
|
||||||
|
|
||||||
|
Sie können ihn sogar innerhalb von GitHub selbst verwenden, indem Sie GitHub Classroom nutzen.
|
||||||
|
|
||||||
|
Dazu forken Sie dieses Repo. Sie müssen für jede Lektion ein eigenes Repo erstellen, dazu extrahieren Sie jeden Ordner in ein separates Repo. Auf diese Weise kann [GitHub Classroom](https://classroom.github.com/classrooms) jede Lektion einzeln abrufen.
|
||||||
|
|
||||||
|
Diese [umfangreiche Anleitung](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) zeigt Ihnen, wie Sie Ihr Klassenzimmer einrichten können.
|
||||||
|
|
||||||
|
## Verwendung in Moodle, Canvas oder Blackboard
|
||||||
|
|
||||||
|
Dieser Kurs funktioniert gut mit diesen Lernmanagementsystemen! Verwenden Sie die [Moodle-Upload-Datei](/teaching-files/webdev-moodle.mbz) für den gesamten Inhalt oder versuchen Sie es mit der [Common-Cartridge-Datei](/teaching-files/webdev-common-cartridge.imscc), die einen Teil des Inhalts enthält. Moodle Cloud unterstützt keine vollständigen Exporte von Common Cartridges, daher ist es besser, die Moodle-Download-Datei zu verwenden, die in Canvas hochgeladen werden kann. Bitte lassen Sie uns wissen, wie wir diese Erfahrung verbessern können.
|
||||||
|
|
||||||
|
|
||||||
|
> Der Kurs in einem Moodle-Klassenzimmer
|
||||||
|
|
||||||
|
|
||||||
|
> Der Kurs in Canvas
|
||||||
|
|
||||||
|
## Verwendung des Repo an sich
|
||||||
|
|
||||||
|
Wenn Sie dieses Repo in seiner bereitgestellten Form verwenden möchten, ohne GitHub Classroom zu nutzen, ist dies ebenfalls möglich. Zuerst besprechen Sie mit Ihren Schülern, welche Lektion sie gemeinsam durcharbeiten wollen.
|
||||||
|
|
||||||
|
In einem Online-Format (Zoom, Teams oder andere) könnten Sie Gruppenräume für die einzelnen Quizfragen öffnen und die Schüler anleiten, damit sie sich auf die Unterrichtsstunde vorbereiten können. Dann fordern Sie die Schüler auf, an den Quizzen teilzunehmen und ihre Antworten zu einem bestimmten Zeitpunkt als 'Issues' abzugeben. Das Gleiche können Sie mit Aufgaben machen, wenn Sie möchten, dass die Schüler in der Gruppe zusammenarbeiten.
|
||||||
|
|
||||||
|
Wenn Sie ein privateres Format bevorzugen, können Sie Ihre Schüler bitten, den Kurs Lektion für Lektion in ihre eigenen GitHub-Repos als private Repos zu forken und Ihnen Zugriff zu gewähren. Dann können sie Quizze und Aufgaben privat erledigen und sie Ihnen über 'Issues' in Ihrem Klassenraum-Repository übermitteln.
|
||||||
|
|
||||||
|
Es gibt viele Möglichkeiten, wie dies in einem Online-Klassenzimmer funktionieren kann. Bitte lassen Sie uns wissen, was für Sie am besten funktioniert!
|
||||||
|
|
||||||
|
## Bitte teilen Sie uns Ihre Meinung mit!
|
||||||
|
|
||||||
|
Wir möchten, dass dieser Kurs für Sie und Ihre Schüler funktioniert. Daher geben Sie uns bitte [Feedback](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u).
|
||||||
Loading…
Reference in new issue