Lennis
2 years ago
parent
207136a537
commit
1ac536347f
@ -0,0 +1,112 @@
|
||||
[](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)
|
||||
|
||||
# Webentwicklung für Anfänger - Ein Lehrplan
|
||||
|
||||
Lernen Sie die Grundlagen von JavaScript, CSS und HTML mit unserem umfassenden 12-Wochen-Kurs, der Ihnen von Microsoft Cloud Advocate zur Verfügung gestellt wird. Jede der 24 Lektionen enthält Quizfragen vor und nach der Lektion, detaillierte schriftliche Anweisungen, Lösungen, Aufgaben und vieles mehr. Mit einem projektbasierten Lernansatz ist unser Lehrplan so konzipiert, dass Sie durch praktische Übungen praktische Fähigkeiten entwickeln können. Verbessern Sie Ihre Fähigkeiten und optimieren Sie Ihre Wissensspeicherung mit unserer effektiven projektbasierten Pädagogik.
|
||||
|
||||
### _Sind Sie ein Student?_
|
||||
|
||||
Starten Sie mit den folgenden Ressourcen:
|
||||
|
||||
- [Student Hub page](https://docs.microsoft.com/learn/student-hub?WT.mc_id=academic-77807-sagibbon) Auf dieser Seite finden Sie Ressourcen für Einsteiger, Studentenpakete und sogar Möglichkeiten, einen kostenlosen Gutschein für ein Zertifikat zu erhalten. Dies ist eine Seite, die Sie als Lesezeichen speichern und von Zeit zu Zeit überprüfen sollten, da wir mindestens einmal im Monat Inhalte austauschen.
|
||||
- [Microsoft Student Learn ambassadors](https://studentambassadors.microsoft.com?WT.mc_id=academic-77807-sagibbon) Schließen Sie sich einer globalen Gemeinschaft von Studentenbotschaftern an - das könnte Ihr Weg zu Microsoft sein.
|
||||
|
||||
Besuchen Sie die [**Student Hub page**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon), wo Sie Ressourcen für Einsteiger, Studentenpakete und sogar Möglichkeiten finden, einen kostenlosen Gutschein für ein Zertifikat zu erhalten. Dies ist die Seite, die Sie als Lesezeichen speichern und von Zeit zu Zeit überprüfen sollten, da wir den Inhalt monatlich wechseln.
|
||||
|
||||
# Erste Schritte
|
||||
|
||||
> **Lehrer**, wir haben [einige Vorschläge](for-teachers.md) zur Verwendung dieses Lehrplans beigefügt. Wir würden uns über Ihr Feedback [in unserem Diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner) freuen!
|
||||
|
||||
> **[Studierende](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, um den vollen Nutzen aus diesem Lehrplan zu ziehen, empfehlen wir Ihnen, das gesamte Repository aufzugabeln und im Selbststudium zu bearbeiten. Beginnen Sie mit einem Quiz vor der Vorlesung und lesen Sie anschließend das Vorlesungsmaterial und bearbeiten Sie die verschiedenen Aufgaben. Legen Sie den Schwerpunkt auf das Verstehen der Lektionen und nicht nur auf das Kopieren des Lösungscodes. Bei Bedarf finden Sie den Lösungscode jedoch in den Ordnern _/solutions_ innerhalb jeder projektbasierten Lektion. Eine weitere gute Möglichkeit, Ihre Lernerfahrung zu verbessern, besteht darin, mit Gleichaltrigen eine Lerngruppe zu bilden und den Lehrplan gemeinsam durchzuarbeiten. Um Ihre Ausbildung zu vertiefen, empfehlen wir Ihnen, [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) zu besuchen, wo Sie zusätzliche Lernmaterialien finden.
|
||||
|
||||
## Pädagogik
|
||||
|
||||
Unser Lehrplan ist auf zwei wichtige pädagogische Prinzipien ausgerichtet: projektbasiertes Lernen und häufige Quizfragen. Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Tools und Techniken, die Webentwickler heutzutage verwenden. Die Schüler haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Tippspiel, ein virtuelles Terrarium, eine umweltfreundliche Browsererweiterung, ein Spiel im Stil eines Weltrauminvasors und eine Banking-App für Unternehmen erstellen. Am Ende der Reihe werden die Schüler ein solides Verständnis der Webentwicklung erlangt haben.
|
||||
|
||||
> Sie können die ersten Lektionen dieses Lehrplans als [Lernpfad](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) auf Microsoft Learn!
|
||||
|
||||
Indem wir sicherstellen, dass der Inhalt mit den Projekten übereinstimmt, wird der Prozess für die Schüler interessanter und das Behalten der Konzepte wird verbessert. Wir haben auch mehrere Anfängerlektionen zu JavaScript-Grundlagen geschrieben, um Konzepte einzuführen, gepaart mit einem Video aus der "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" Sammlung von Video-Tutorials, von denen einige Autoren zu diesem Lehrplan beigetragen haben. Ein Quiz mit geringem Schwierigkeitsgrad vor dem Unterricht stellt die Absicht der Schüler fest, ein bestimmtes Thema zu lernen, während ein zweites Quiz nach dem Unterricht dafür sorgt, dass der Stoff noch länger im Gedächtnis bleibt. Dieser Lehrplan wurde so konzipiert, dass er flexibel ist und Spaß macht und ganz oder teilweise absolviert werden kann. Die Projekte beginnen klein und werden am Ende des 12-wöchigen Zyklus immer komplexer.
|
||||
|
||||
Wir haben es bewusst vermieden, JavaScript-Frameworks vorzustellen, 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 Lehrplans wäre es, Node.js anhand einer anderen Videosammlung kennenzulernen: "[Einsteigerreihe zu: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)".
|
||||
|
||||
> Hier finden Sie unsere [Verhaltenskodex](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), und [Translation](TRANSLATIONS.md) Richtlinien. Wir freuen uns über Ihr konstruktives Feedback!
|
||||
|
||||
## Jede Lektion beinhaltet:
|
||||
|
||||
- Optionale Notizen
|
||||
- Ein Optionales zusätzliches Video
|
||||
- Quiz zur Aufwärmung vor der Lektion
|
||||
- written lesson
|
||||
- Für Projekt basierte Lektionen, Schritt für Schritt Anleitung zum erstellen des Projektes
|
||||
- Wissenstests
|
||||
- eine Herausforderung
|
||||
- Ergänzende Lektüre
|
||||
- Aufgabe
|
||||
- Quiz nach der Lektion
|
||||
|
||||
> **Ein 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 lokal ausgeführt werden; folgen Sie den Anweisungen im Ordner "quiz-app". Sie werden nach und nach lokalisiert.
|
||||
|
||||
## Lektionen
|
||||
|
||||
| | Projekt Namen | Unterrichts Konzept | Zielsetzung | Verlinkte Lektione | Autor |
|
||||
| :-: | :-----------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-----------------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | Erste Schritte | Einführung in die Programmierung und Programme | Lernen Sie die Grundlagen der meisten Programmiersprachen und die verwendeten Entwicklungsumgebungen | [Einführung in Programmiersprachen und Entwicklungsumgebungen](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | Erste Schritte | Grundlagen für GitHub und die Arbeit mit einem Team | Wie Sie GitHub in Ihrem Projekt nutzen, wie Sie mit anderen an einer Codebasis zusammenarbeiten | [Einführung in GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | Erste Schritte | Barrierefreiheit | Lernen Sie die Grundlagen der Barrierefreiheit im Internet | [Grundlagen der Barrierefreiheit](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | JavaScript Grundlagen | JavaScript Datentypen | Die Grundlagen von JavaScript Datentypen | [Datentypen](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | JavaScript 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 | JavaScript Grundlagen | Verzweigungen mit JavaScript | Lernen Sie wie Sie Bedingungen in Ihren Code nutzten | [Verzweigungen](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | JavaScript 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 in der Praxis | HTML für ein Online-Terrarium erstellen, mit Schwerpunkt auf der Erstellung eines Layouts | [Einleitung in HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in der Praxis | Erstellen Sie das CSS für die Gestaltung des Online-Terrariums, wobei Sie sich auf die Grundlagen von CSS konzentrieren und die Seite responsiv gestalten | [Einleitung 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, mit Fokus auf DOM-Manipulation und Closures. | [JavaScript DOM-Manipulation und Closures](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [Tasten Spiel](/4-typing-game/solution/README.md) | Erstellen eines Tasten Spiel | Lernen Sie, wie Sie Tastaturereignisse zur Steuerung der Logik Ihrer JavaScript-Anwendung verwenden können | [Ereignisgesteuerte Programmierung](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [Umweltfreundliche Browsererweiterung](/5-browser-extension/solution/README.md) | Arbeiten mit Browsern | Lernen Sie, wie Browser und Browserverläufe funktionieren, und wie man die ersten Elemente einer Browser-Erweiterung einbaut | [Über Browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [Umweltfreundliche Browsererweiterung](/5-browser-extension/solution/README.md) | Erstellen eines Formulars, Aufrufen einer API und Speichern von Variablen im lokalen Speicher | Erstellen der JavaScript-Elemente Ihrer Browsererweiterung zum Aufrufen einer API unter Verwendung von im lokalen Speicher gespeicherten Variablen | [APIs, Formulare und lokaler Speicher](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [Umweltfreundliche Browsererweiterung](/5-browser-extension/solution/README.md) | Hintergrundprozesse im Browser, Web-Performance | Verwenden Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten; erfahren Sie mehr über die Web-Performance und einige Optimierungen, die Sie vornehmen können | [Hintergrundprozesse und Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [Weltraum-Spiel](/6-space-game/solution/README.md) | Fortgeschrittene Spielentwicklung mit JavaScript | Lernen Sie die Vererbung mit Klassen und Komposition und das Pub/Sub-Muster kennen, um sich auf die Entwicklung eines Spiels vorzubereiten | [Einführung in die fortgeschrittene Spielentwicklung](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [Weltraum-Spiel](/6-space-game/solution/README.md) | Auf eine Leinwand Zeichnen | Erfahren Sie mehr über die Canvas-API, die zum Zeichnen von Elementen auf einem Bildschirm verwendet wird | [Zeichnen auf Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [Weltraum-Spiel](/6-space-game/solution/README.md) | Bewegen von Elementen auf dem Bildschirm | Entdecken Sie, wie Elemente mithilfe der kartesischen Koordinaten und der Canvas-API bewegt werden können | [Bewegen von Elementen](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [Weltraum-Spiel](/6-space-game/solution/README.md) | Kollisionserkennung | Elemente kollidieren lassen und auf Tastendruck aufeinander reagieren lassen und eine Abklingfunktion bereitstellen, um die Performance des Spiels zu gewährleisten | [Kollisionserkennung](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [Weltraum-Spiel](/6-space-game/solution/README.md) | Spielstand beibehalten | Durchführen von mathematischen Berechnungen basierend auf dem Status und der Leistung des Spiels | [Spielstand beibehalten](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [Weltraum-Spiel](/6-space-game/solution/README.md) | Beenden und Neustarten des Spiels | Erfahren Sie mehr über das Beenden und Neustarten des Spiels, einschließlich des Aufräumens von Assets und des Zurücksetzens von Variablenwerten | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML-Templates und Routes in einer Web-App | Lernen Sie, wie Sie mit Routing und HTML-Templates das Gerüst für die Architektur einer mehrseitigen Website erstellen | [HTML Vorlagen und Routes](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [Banking App](/7-bank-project/solution/README.md) | Erstellen eines Anmelde- und Registrierungsformulars | Lernen Sie, wie man Formulare erstellt und Validierungsroutinen handhabt | [Formulare](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [Banking App](/7-bank-project/solution/README.md) | Methoden zum Laden und nutzen von Daten | Wie Daten in und aus Ihrer Anwendung fließen, wie man sie abruft und Speichert | [Daten](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [Banking App](/7-bank-project/solution/README.md) | Konzepte der Zustandsverwaltung | Lernen Sie, wie Ihre Anwendung den Zustand beibehält und wie Sie ihn programmatisch verwalten können | [Zustandsverwaltung](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## Offline Zugriff
|
||||
|
||||
Sie können diese Dokumentation offline ausführen, indem Sie [Docsify](https://docsify.js.org/#/) verwenden. Forken Sie dieses Repo, [installieren Sie Docsify](https://docsify.js.org/#/quickstart) auf Ihrem lokalen Rechner, und geben Sie dann im Stammordner dieses Repo `docsify serve` ein. Die Website wird auf Port 3000 auf Ihrem lokalen Rechner bereitgestellt: `localhost:3000`.
|
||||
|
||||
## PDF
|
||||
|
||||
Eine PDF aller Lektionen gibt es [hier](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf).
|
||||
|
||||
## Hilfe erwünscht!
|
||||
|
||||
Wenn Sie den Lehrplan ganz oder teilweise übersetzen möchten, folgen Sie bitte unserem [Übersetzungsleitfaden](TRANSLATIONS.md).
|
||||
|
||||
## Andere Lehrpläne
|
||||
|
||||
Unser Team produziert weitere Lehrpläne! Sehen Sie sich das 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 Einsteiger](https://aka.ms/ai-beginners)
|
||||
- [XR-Entwicklung für Einsteiger](https://aka.ms/xr-dev-for-beginners)
|
||||
|
||||
## Lizenz
|
||||
|
||||
Dieses Repository ist unter der MIT-Lizenz lizenziert. Siehe die Datei [LICENSE](LICENSE) für weitere Informationen.
|
||||
Loading…
Reference in new issue