Web Dev For Beginners herunterladen - Web Dev For Beginners Quellcode herunterladen

Web Dev For Beginners

Anderer Quellcode

1.0.0

Herunterladen

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 beschäftigt sich mit JavaScript, CSS und HTML anhand praktischer Projekte wie Terrarien, Browsererweiterungen und Weltraumspiele. Nehmen Sie an Quizfragen, Diskussionen und praktischen Aufgaben teil. Erweitern Sie Ihre Fähigkeiten und optimieren Sie Ihren Wissenserhalt mit unserer effektiven projektbasierten Pädagogik. Beginnen Sie noch heute Ihre Programmierreise!

Sind Sie ein Student?

Besuchen Sie die Student Hub-Seite, auf der Sie Ressourcen für Anfänger, Studentenpakete und sogar Möglichkeiten finden, einen kostenlosen Zertifikatsgutschein zu erhalten. Dies ist die Seite, die Sie mit einem Lesezeichen versehen und von Zeit zu Zeit überprüfen möchten, da wir den Inhalt monatlich austauschen.

Ankündigung – Neuer Lehrplan zur generativen KI wurde gerade veröffentlicht!

Verpassen Sie nicht unseren NEUEN 12-Stunden-Lehrplan zum Thema generative KI!

Jede Lektion beinhaltet eine zu erledigende Aufgabe, eine Wissensüberprüfung und eine Herausforderung, die Sie bei Lernthemen wie den folgenden anleitet:

Aufforderung und zeitnahes Engineering
Generierung von Text- und Bild-Apps
Such-Apps

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

Erste Schritte

Liebe Lehrer , wir haben einige Vorschläge zur Verwendung dieses Lehrplans beigefügt. Wir würden uns über Ihr Feedback in unserem Diskussionsforum freuen!

Die Lernenden beginnen für jede Lektion mit einem Quiz vor der Vorlesung, lesen anschließend das Vorlesungsmaterial, führen die verschiedenen Aktivitäten durch und überprüfen ihr Verständnis mit dem Quiz nach der Vorlesung.

Um Ihre Lernerfahrung zu verbessern, vernetzen Sie sich mit Ihren Kollegen, um gemeinsam an den Projekten zu arbeiten! Diskussionen sind in unserem Diskussionsforum willkommen, in dem unser Moderatorenteam für die Beantwortung Ihrer Fragen zur Verfügung steht.

Um Ihre Ausbildung voranzutreiben, empfehlen wir Ihnen dringend, Microsoft Learn nach zusätzlichen Lernmaterialien zu durchsuchen.

Einrichten Ihrer Umgebung

Dieser Lehrplan verfügt über eine einsatzbereite Entwicklungsumgebung! Zu Beginn können Sie wählen, ob Sie den Lehrplan in einem Codespace ( einer browserbasierten Umgebung, in der keine Installationen erforderlich sind ) oder lokal auf Ihrem Computer mit einem Texteditor wie Visual Studio Code ausführen möchten.

Erstellen Sie Ihr Repository

Damit Sie Ihre Arbeit problemlos speichern können, wird empfohlen, eine eigene Kopie dieses Repositorys zu erstellen. Sie können dies tun, indem Sie oben auf der Seite auf die Schaltfläche „Diese Vorlage verwenden“ klicken. Dadurch wird in Ihrem GitHub-Konto ein neues Repository mit einer Kopie des Lehrplans erstellt.

Befolgen Sie diese Schritte:

Forken des Repositorys : Klicken Sie auf die Schaltfläche „Fork“ in der oberen rechten Ecke 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 von Ihnen erstellten Kopie dieses Repositorys auf die Schaltfläche „Code“ und wählen Sie „Mit Codespaces öffnen“ aus. Dadurch wird ein neuer Codespace erstellt, in dem Sie arbeiten können.

Codespace erstellen

Führen Sie den Lehrplan lokal auf Ihrem Computer aus

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 Handwerkszeug, führt Sie durch verschiedene Optionen für jedes dieser Werkzeuge, 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 über ein integriertes Terminal verfügt. 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:
Öffnen Sie dann Terminal in Visual Studio Code und führen Sie den folgenden Befehl aus. Ersetzen Sie dabei <your-repository-url> durch die URL, die Sie gerade kopiert haben:
```
 Git-Klon <Ihre-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 – zur Vorschau von HTML-Seiten in Visual Studio Code
Copilot – damit Sie Code schneller schreiben können

Jede Lektion beinhaltet:

optionale Sketchnote
optionales Zusatzvideo
Aufwärmquiz vor dem Unterricht
schriftliche Lektion
für projektbasierte Lektionen Schritt-für-Schritt-Anleitungen zum Aufbau des Projekts
Wissensüberprüfungen
eine Herausforderung
ergänzende Lektüre
Abtretung
Quiz nach dem Unterricht

Ein Hinweis zu Quizzen : Alle Quizze sind im Quiz-App-Ordner enthalten, insgesamt 48 Quizze mit jeweils drei Fragen. Sie sind innerhalb der Lektionen verknüpft. Die Quiz-App kann lokal ausgeführt oder in Azure bereitgestellt werden. Folgen Sie den Anweisungen im quiz-app -Ordner. Sie werden nach und nach lokalisiert.

Unterricht

	Projektname	Konzepte gelehrt	Lernziele	Verknüpfte Lektion	Autor
01	Erste Schritte	Einführung in die Programmierung und Handwerkszeug	Erfahren Sie mehr über die Grundlagen der meisten Programmiersprachen und über Software, die professionelle Entwickler bei ihrer Arbeit unterstützt	Einführung in Programmiersprachen und Handwerkszeug	Jasmin
02	Erste Schritte	Grundlagen von GitHub, einschließlich der Arbeit mit einem Team	Wie Sie GitHub in Ihrem Projekt verwenden und wie Sie mit anderen auf Codebasis zusammenarbeiten	Einführung in GitHub	Boden
03	Erste Schritte	Zugänglichkeit	Lernen Sie die Grundlagen der Barrierefreiheit im Internet	Grundlagen der Barrierefreiheit	Christoph
04	JS-Grundlagen	JavaScript-Datentypen	Die Grundlagen von JavaScript-Datentypen	Datentypen	Jasmin
05	JS-Grundlagen	Funktionen und Methoden	Erfahren Sie mehr über Funktionen und Methoden zum Verwalten des Logikflusses einer Anwendung	Funktionen und Methoden	Jasmin und Christopher
06	JS-Grundlagen	Entscheidungen mit JS treffen	Erfahren Sie, wie Sie mithilfe von Entscheidungsmethoden Bedingungen in Ihrem Code erstellen	Entscheidungen treffen	Jasmin
07	JS-Grundlagen	Arrays und Schleifen	Arbeiten Sie mit Daten mithilfe von Arrays und Schleifen in JavaScript	Arrays und Schleifen	Jasmin
08	Terrarium	HTML in der Praxis	Erstellen Sie den HTML-Code, um ein Online-Terrarium zu erstellen, und konzentrieren Sie sich dabei auf die Erstellung eines Layouts	Einführung in HTML	Jen
09	Terrarium	CSS in der Praxis	Erstellen Sie das CSS, um das Online-Terrarium zu gestalten, und konzentrieren Sie sich dabei auf die Grundlagen von CSS, einschließlich der Responsive-Optimierung der Seite	Einführung in CSS	Jen
10	Terrarium	JavaScript-Verschlüsse, DOM-Manipulation	Erstellen Sie das JavaScript, damit das Terrarium als Drag-and-Drop-Schnittstelle fungiert, wobei der Schwerpunkt auf Abschlüssen und DOM-Manipulation liegt	JavaScript-Verschlüsse, DOM-Manipulation	Jen
11	Tippspiel	Erstellen Sie ein Tippspiel	Erfahren Sie, wie Sie Tastaturereignisse verwenden, um die Logik Ihrer JavaScript-App zu steuern	Ereignisgesteuerte Programmierung	Christoph
12	Grüne Browsererweiterung	Arbeiten mit Browsern	Erfahren Sie, wie Browser funktionieren, welchen Verlauf sie haben und wie Sie die ersten Elemente einer Browsererweiterung aufbauen	Über Browser	Jen
13	Grüne Browsererweiterung	Erstellen eines Formulars, Aufrufen einer API und Speichern von Variablen im lokalen Speicher	Erstellen Sie die JavaScript-Elemente Ihrer Browsererweiterung, um eine API mithilfe von im lokalen Speicher gespeicherten Variablen aufzurufen	APIs, Formulare und lokaler Speicher	Jen
14	Grüne Browsererweiterung	Hintergrundprozesse im Browser, Web-Performance	Verwenden Sie die Hintergrundprozesse des Browsers, um das Symbol der Erweiterung zu verwalten. Erfahren Sie mehr über die Webleistung und einige Optimierungsmöglichkeiten	Hintergrundaufgaben und Leistung	Jen
15	Weltraumspiel	Fortgeschrittenere Spieleentwicklung mit JavaScript	Erfahren Sie mehr über die Vererbung mithilfe von Klassen und Kompositionen sowie des Pub/Sub-Musters als Vorbereitung für die Entwicklung eines Spiels	Einführung in die fortgeschrittene Spieleentwicklung	Chris
16	Weltraumspiel	Zeichnen auf Leinwand	Erfahren Sie mehr über die Canvas-API, die zum Zeichnen von Elementen auf einem Bildschirm verwendet wird	Auf Leinwand zeichnen	Chris
17	Weltraumspiel	Elemente auf dem Bildschirm verschieben	Entdecken Sie, wie Elemente mithilfe der kartesischen Koordinaten und der Canvas-API Bewegung gewinnen können	Elemente verschieben	Chris
18	Weltraumspiel	Kollisionserkennung	Lassen Sie Elemente mithilfe von Tastendrücken kollidieren und aufeinander reagieren und stellen Sie eine Abklingfunktion bereit, um die Leistung des Spiels sicherzustellen	Kollisionserkennung	Chris
19	Weltraumspiel	Punkte halten	Führen Sie mathematische Berechnungen basierend auf dem Status und der Leistung des Spiels durch	Punkte halten	Chris
20	Weltraumspiel	Das Spiel beenden und neu starten	Erfahren Sie, wie Sie das Spiel beenden und neu starten, einschließlich der Bereinigung von Assets und dem Zurücksetzen von Variablenwerten	Die Endbedingung	Chris
21	Banking-App	HTML-Vorlagen und Routen in einer Web-App	Erfahren Sie, wie Sie mithilfe von Routing- und HTML-Vorlagen das Gerüst der Architektur einer mehrseitigen Website erstellen	HTML-Vorlagen und Routen	Yohan
22	Banking-App	Erstellen Sie ein Anmelde- und Registrierungsformular	Erfahren Sie mehr über das Erstellen von Formularen und den Umgang mit Validierungsroutinen	Formulare	Yohan
23	Banking-App	Methoden zum Abrufen und Verwenden von Daten	Wie Daten in Ihre App ein- und ausgehen, wie Sie sie abrufen, speichern und entsorgen	Daten	Yohan
24	Banking-App	Konzepte des Staatsmanagements	Erfahren Sie, wie Ihre App den Status behält und wie Sie ihn programmgesteuert verwalten	Staatsmanagement	Yohan

Pädagogik

Unser Lehrplan basiert auf zwei zentralen pädagogischen Prinzipien:

Projektbasiertes Lernen
häufige Tests

Das Programm vermittelt die Grundlagen von JavaScript, HTML und CSS sowie die neuesten Tools und Techniken, die von heutigen Webentwicklern verwendet werden. Die Schüler haben die Möglichkeit, praktische Erfahrungen zu sammeln, indem sie ein Tippspiel, ein virtuelles Terrarium, eine umweltfreundliche Browsererweiterung, ein Spiel im Space-Invader-Stil und eine Banking-App für Unternehmen entwickeln. Am Ende der Reihe werden die Studierenden ein solides Verständnis der Webentwicklung erworben haben.

? Sie können die ersten Lektionen dieses Lehrplans als Lernpfad auf Microsoft Learn belegen!

Indem sichergestellt wird, dass der Inhalt mit den Projekten übereinstimmt, wird der Prozess für Studierende ansprechender gestaltet und das Behalten von Konzepten verbessert. Wir haben außerdem mehrere Einführungslektionen in JavaScript-Grundlagen geschrieben, um Konzepte einzuführen, gepaart mit einem Video aus der Sammlung von Video-Tutorials „Beginners Series to: JavaScript“, von denen einige Autoren zu diesem Lehrplan beigetragen haben.

Darüber hinaus wird durch ein Quiz mit geringen Einsätzen vor dem Unterricht die Absicht des Schülers, ein Thema zu erlernen, geklärt, während ein zweites Quiz nach dem Unterricht für eine weitere Bindung sorgt. Dieser Lehrplan wurde so konzipiert, dass er flexibel und unterhaltsam ist und ganz oder teilweise belegt werden kann. Die Projekte beginnen klein und werden am Ende des 12-Wochen-Zyklus immer komplexer.

Obwohl wir bewusst darauf verzichtet haben, JavaScript-Frameworks einzuführen, um uns auf die grundlegenden Fähigkeiten zu konzentrieren, die ein Webentwickler vor der Einführung eines Frameworks benötigt, wäre ein guter nächster Schritt zur Vervollständigung dieses Lehrplans das Erlernen von Node.js durch eine weitere Videosammlung: „Einsteigerserie für: Node.js".

Besuchen Sie unseren Verhaltenskodex und unsere Beitragsrichtlinien. Wir freuen uns über Ihr konstruktives Feedback!

Offline-Zugriff

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