Website-Erstellung Frontend-Entwicklung – kostenloser Kurs von der Online-Programmierschule für Kinder Hello World, Schulung 44 Stunden, Datum: 3. Dezember 2023.
Verschiedenes / / December 06, 2023
Wie das Internet funktioniert
Lassen Sie uns über die Grundkonzepte des Internets und seiner Architektur sprechen. Lassen Sie uns herausfinden, was eine Domain-, Hosting- und Client-Server-Architektur ist. Lassen Sie uns die Arbeitsumgebung einrichten und über die drei Säulen der Front-End-Entwicklung sprechen – HTML, CSS und JavaScript.
HTML
HTML-Dokumentstruktur
Lassen Sie uns die ersten HTML-Seiten erstellen und uns Beispiele für einfache und komplexe Webseiten ansehen. Lassen Sie uns herausfinden, welche Blöcke auf unserer Seite sein sollten. Lassen Sie uns unsere Seiten miteinander verknüpfen, herausfinden, wie sich Text vom Hypertext unterscheidet und was Tags und Attribute sind.
Arbeiten Sie mit Text
Lassen Sie uns lernen, wie Sie mit Text in HTML richtig arbeiten: Teilen Sie ihn in Absätze auf, geben Sie Überschriften und Zwischenüberschriften an. Lassen Sie uns lernen, wie man nummerierte und mit Aufzählungszeichen versehene Listen erstellt und die Klassiker zitiert.
Links und Bilder
Machen wir uns näher mit Links vertraut und lernen auch, wie man Bilder einfügt und als Links verwendet.
Tabellenlayout
Lassen Sie uns unsere erste Tabelle erstellen und herausfinden, aus welchen Tags sie besteht. Erfahren Sie, wie Sie Zellen zusammenführen, die Anzahl der Zeilen und Spalten ändern, Text ausrichten und vieles mehr. Außerdem erfahren wir vom Designer grundlegende Tipps, wie Sie Ihren Tisch schön gestalten können.
Einführung in Formulare
Lassen Sie uns unser erstes Formular erstellen und lernen, wie man mit Eingabefeldern, Dropdown-Listen, Kontrollkästchen und natürlich Schaltflächen arbeitet. Schauen wir uns andere Formularelemente an, die uns in Zukunft nützlich sein werden.
CSS
Einführung in CSS
Erinnern wir uns daran, was CSS ist und wie man es verwendet. Lassen Sie uns lernen, wie Sie CSS bei der Arbeit mit HTML-Seiten verwenden. Schauen wir uns die Syntax von CSS an und lernen, was Selektoren sind, welche Vererbung es gibt und mit welcher Priorität unsere Stile auf ein HTML-Dokument angewendet werden.
Selektoren
Schauen wir uns die Selektoren genauer an. Lassen Sie uns lernen, wie man auf ein oder mehrere Elemente zugreift, was der Unterschied zwischen einer Klasse und einer Pseudoklasse und einem Element von einem Pseudoelement ist. Werfen wir einen Blick auf die CSS-Richtlinien und finden Sie heraus, was die Leute in Interviews gerne zum Thema CSS fragen.
Vererbung, Kaskadierung und Priorität
Wir lernen, dass Stunting und Stuntmen nicht aus demselben Bereich stammen. Lassen Sie uns die Prinzipien verstehen, nach denen CSS-Stile auf HTML-Elemente angewendet werden.
Textdekoration
Kehren wir dorthin zurück, wo wir angefangen haben – zum Text. Lassen Sie uns lernen, wie wir unseren Text mithilfe von CSS-Eigenschaften schön und benutzerfreundlich gestalten: Fettschrift, Kursivschrift, Größe, Farbe, Hintergrund und andere.
Dokumentmodell blockieren
Lernen Sie die div- und span-Tags kennen und erfahren Sie, wie Sie Elementgrößen, Abstände und Ränder festlegen. Lassen Sie uns verstehen, wie das Blockmodell eines Dokuments entsteht und welche Möglichkeiten wir zur Positionierung von Elementen haben.
JavaScript
Einführung in JavaScript
Machen wir uns mit der dritten Säule der Front-End-Entwicklung vertraut – JavaScript. Lassen Sie uns herausfinden, was Variablen sind, welche Datentypen sie haben und warum sie benötigt werden. Und natürlich werden wir unser erstes Programm schreiben.
Bedingungen
Erinnern wir uns an Logik, logische Operationen und ihre Kombinationen. Möge die Stärke und Kontrolle mit uns sein.
Fahrräder
Lassen Sie uns lernen, wie man viel schafft, während man wenig Code schreibt. Lassen Sie uns verstehen, dass ein Zyklus innerhalb eines Zyklus einfach ist, aber Sie müssen vorsichtig sein.
Arrays
Es gibt Eismassen, Wälder und in der Programmierung gibt es Arrays. Wir werden in dieser Lektion untersuchen, was sie gemeinsam haben und wie sie sich unterscheiden. Hinweis: Die Schleifen aus der vorherigen Lektion werden uns sehr helfen.
Funktionen
Wenn Variablen und der richtige Name für sie das ABC der Programmierung sind, dann ist die Fähigkeit, mit Funktionen zu arbeiten und geeignete Namen für sie auszuwählen, bereits ein Rezept. In dieser Lektion erfahren Sie, wie Sie ein Programm in logische Blöcke unterteilen und warum dies wichtig ist.
Objekte
Wir werden uns mit dem Konzept von Objekten und Methoden vertraut machen und beginnen, uns mit den Prinzipien von OOP vertraut zu machen.
Einführung in DOM
JavaScript wäre nutzlos, wenn es nicht mit einem HTML-Dokument interagieren könnte. Wir lernen, was das DOM (Document Object Model) ist, aber was noch wichtiger ist, wir lernen, wie man mit HTML und CSS über JavaScript arbeitet.
Handhabung des Events
Jetzt gehen wir auf die nächste Ebene und lernen, wie man mithilfe von JavaScript auf den Benutzer reagiert und mit ihm interagiert. Wir erfahren auch, warum JavaScript-Ereignisse sprudeln und sinken können.
HTML5 und CSS3
HTML5: Was ist neu und warum?
Lassen Sie uns herausfinden, welche Änderungen in HTML5 vorgenommen wurden und warum. Lassen Sie uns neue Elemente untersuchen und Fälle ihrer korrekten Verwendung analysieren.
Positionierungselemente und Raster
Schauen wir uns neue Möglichkeiten an, Seiten zu strukturieren und Elemente darauf zu positionieren.
HTML5-Formulare
Lassen Sie uns die Schattenseiten der Macht erkunden und mit neuen Formularen in HTML5 sowie Änderungen an alten üben. Lassen Sie uns mit neuen Feldtypen für die Eingabe von Daten, Farben und Zahlen arbeiten und wie wir den Benutzer dazu auffordern können, sein Leben ein wenig einfacher zu machen.
Audio und Video
In diesem Tutorial sind Sie sowohl DJ als auch Redakteur. Wir werden in dieser Lektion keine Zeit haben, unser eigenes YouTube zu erstellen, aber wir werden uns sehr bemühen, einen Prototyp mit grundlegenden Funktionen zu erstellen.
Arbeiten mit Text in CSS3
Lassen Sie uns herausfinden, welche Möglichkeiten und Empfehlungen zur Textformatierung es in der neuesten Version des Standards gibt.
Übergangs- und Transformationseffekte in CSS3
Lassen Sie uns lernen, wie Sie mit CSS3 Animationen und verschiedene Effekte erstellen. Machen wir uns mit den Fallstricken beim Erstellen solcher Effekte vertraut.
Adaptives Layout
Lassen Sie uns herausfinden, warum Sie ein adaptives Layout benötigen und wann es unnötig ist und Schaden anrichten kann. Schauen wir uns die grundlegende Syntax an und üben natürlich das adaptive Layout.
Flexbox und CSS-Raster
Wir erfahren mehr über moderne Ansätze zur Blockaufteilung und welche Schwierigkeiten es bei deren Verwendung gibt.
CSS-Präprozessoren: LESS und SASS
Möchten Sie Variablen in CSS verwenden? Leicht! Finden Sie heraus, welche interessanten Dinge Sie mit CSS-Präprozessoren tun können.
JavaScript auf einem neuen Level
ES-2015+
Was ist modernes JavaScript, der „strenge Modus“ und wie kann man damit leben?
OOP in JavaScript
Lassen Sie uns untersuchen, wie Klassen in modernem JavaScript strukturiert sind und warum sie verwendet werden, wenn alles mit Funktionen erledigt werden kann. Wie Vererbung funktioniert und welche anderen Möglichkeiten es in JS gibt, Klassen zu erstellen.
Funktionen im Detail
Lassen Sie uns herausfinden, was Funktionsdeklaration und Funktionsausdruck sind, und lernen, wie man eine Funktion ohne Namen aufruft. Schauen wir uns den Begriff „Kontextbindung“ an.
AJAX und JSON
Lassen Sie uns als Entwickler eine neue Ebene erreichen, lernen, wie man HTTP-Anfragen stellt und wie Server und Client miteinander kommunizieren können, ohne sich zu streiten.
Reguläre Ausdrücke
„Wenn Sie ein Problem haben und es mit regulären Ausdrücken lösen wollen, dann haben Sie bereits zwei Probleme.“ Lassen Sie uns lernen, wie Sie mit regulären Ausdrücken vermeiden, sich selbst ins Bein zu schießen.
Builder, Task-Runner und Abhängigkeitsmanagement
Bower, npm, gulp, Grunt, Webpack und Co. Das ist nichts Kompliziertes, aber Sie müssen es herausfinden.
Testen in JavaScript
Wo Code ist, gibt es immer Fehler. Sie erfahren, wie Sie deren Anzahl minimieren können und welche Praktiken und Tools uns dabei helfen.
Algorithmen
Wir lernen, wie man Code schreibt, damit Prozessor und Browser später beim Starten Ihres Programms keine quälenden Schmerzen verspüren.
ReactJS
Einführung in ReactJS
Machen wir uns mit ReactJS vertraut, lernen wir, einfache Komponenten zu schreiben und vergleichen es mit anderen gängigen Frameworks. Machen wir uns mit dem Konzept des virtuellen DOM vertraut.
Architektur und Konfiguration von React-Anwendungen
Lassen Sie uns herausfinden, welche Aktionen wir ausführen müssen, um nicht nur in React zu schreiben, sondern es auch so effizient und bequem wie möglich zu machen.
Erstellen der ersten Anwendung in ReactJS
Schauen wir uns JSX, ReactComponent, ReactDOM.render und die Render-Funktion genauer an. Wir konfigurieren und starten die erste Anwendung, stellen Beziehungen zwischen Komponenten her und verarbeiten Ereignisse.
Routing und ReactJS
Was ist Routing? Machen wir uns mit ReactRouter und seiner Funktionalität vertraut. Wir organisieren das Routing in unserer Anwendung.