Web Developer from Zero to Hero

Erkunden Sie die Funktionsweise des Webs. Erfahren Sie, wie Daten über Netzwerke übertragen werden, entdecken Sie die Rolle von Protokollen und entschlüsseln Sie die Geheimnisse von IP-Adressen und Domainnamen. Gewinnen Sie ein grundlegendes Verständnis darüber, wie Webbrowser und Server miteinander kommunizieren, um Webinhalte bereitzustellen.

Erkunden Sie die Möglichkeiten von Tags zur Strukturierung von Inhalten, von Überschriften und Absätzen bis hin zu Listen und Tabellen. Erfahren Sie, wie Sie Elemente mit Attributen erweitern können.

Der Kern der HTML-Dokumentstruktur. Lernen Sie die Bestandteile eines HTML-Dokuments kennen, einschließlich der Doctype-Deklaration, des Head- und Body-Bereichs. Verstehen Sie den Zweck jedes Elements und wie sie zur Gesamtstruktur einer Webseite beitragen.

Gestaltung einer ansprechenderen Webseite durch den Einsatz von Medien wie Bildern, Audio und Video. Umgang mit strukturierten tabellarischen Daten in Form von Tabellen.

Erkunden Sie die Vielseitigkeit von HTML-Formularen. Lernen Sie, intuitive und benutzerfreundliche Formulare durch Anwendung zentraler Konzepte und Techniken zu gestalten. Entdecken Sie, wie Formulare die Benutzerinteraktion und Datenübermittlung auf Websites ermöglichen.

Erfahren Sie, was CSS ist, wie es mit HTML verbunden wird und wie HTML-Elemente mithilfe von Selektoren gestaltet werden. Entdecken Sie grundlegende Konzepte wie Textfarben, Pseudoklassen für Benutzeraktionen und Variablen in CSS.

Erfahren Sie, wie Sie Text auf Ihren Webseiten gestalten und formatieren. Lernen Sie, benutzerdefinierte Schriftarten anzuwenden und verschiedene Schriftarteigenschaften zu erkunden, um das Erscheinungsbild von Text zu verbessern.

Erlernen der Grundlagen des Box-Modells, das das Layout und die Abstände von Elementen auf einer Webseite definiert. Untersuchung von Konzepten wie Box-Sizing, Hinzufügen von Abstand zu Elementen, Arbeiten mit Block- und Inline-Elementen sowie Nutzung struktureller und funktionaler Pseudoklassen für fortgeschrittenes Styling.

Entdecken Sie Flexbox, eine leistungsstarke CSS-Layoutmethode zur Anordnung von Elementen in Zeilen und Spalten. Erfahren Sie, wie Sie Richtung, Ausrichtung und Abstand von Elementen horizontal und vertikal steuern sowie einzelne Flex-Elemente für präzise Layouts anpassen können.

Erfahren Sie, wie Sie mit CSS die visuelle Attraktivität Ihrer Webseiten steigern. Entdecken Sie Techniken zur Anwendung von Hintergrundfarben und -bildern, zum Stylen von Bildern, zur Nutzung dekorativer Pseudoelemente und zum Hinzufügen von Schatten für beeindruckende Designs.

Erfahren Sie, was Lernende von diesem Kurs zu fortgeschrittenem HTML- und CSS-Styling erwarten können. Welche Vorkenntnisse sind vor Kursbeginn erforderlich? Welche Themen werden behandelt?

Elemente auf Webseiten positionieren und verwalten. Verschiedene Positionierungseigenschaften kennenlernen, den Stapelreihenfolge nutzen, um die Sichtbarkeit überlappender Elemente zu steuern, und schließlich den Umgang mit Überlauf von Inhalten beherrschen.

Untersuchung der Leistungsfähigkeit von Übergängen und Möglichkeiten zur Verbesserung der Benutzererfahrung. Erläuterung, wie Eigenschaften fließend und schrittweise animiert werden, um nahtlose Zustandsübergänge zu ermöglichen.

Erfahren Sie mehr über die Eigenschaft „animation“ und deren Einsatz zur Erstellung dynamischer und ansprechender Designs. Entdecken Sie die Erstellung komplexer Animationen mit Keyframes sowie die Steuerung der Animation.

Untersuchung der Transformations-Eigenschaft, die das Modifizieren von Aussehen und Position von Elementen auf einer Webseite ermöglicht. Skalierung, Rotation, Schrägstellung und Verschiebung von Elementen in zwei und drei Dimensionen. Kombination mehrerer Transformationen zur Erzeugung komplexerer Effekte.

Die Prinzipien und Techniken des adaptiven/responsiven Designs zielen darauf ab, Websites und Anwendungen auf verschiedenen Geräten, Bildschirmgrößen und Ausrichtungen zugänglich und optisch ansprechend zu gestalten.

Erfahren Sie mehr über Präprozessoren in CSS und wie sie dabei helfen, effizienteren und besser wartbaren Code zu schreiben. Verstehen Sie, wie Präprozessoren den Arbeitsablauf vereinfachen und saubereren CSS-Code generieren können.

Entdecken Sie die Grundlagen von JavaScript, einschließlich seines Zwecks und seiner Syntax. Erfahren Sie, wie Sie mit der Konsole Ausgaben erzeugen und Kommentare zur Organisation und Dokumentation Ihres Codes verwenden. Diese grundlegenden Fähigkeiten bereiten Sie auf eine vertiefte Auseinandersetzung mit den Möglichkeiten von JavaScript vor.

Erkunden Sie die Grundlagen von JavaScript durch die Unterscheidung zwischen Literalen und Variablen. Verstehen Sie die zentralen Datentypen, einschließlich `null` und Arrays, und erfahren Sie, wie diese mit Array-Methoden manipuliert werden können.

Erlernen Sie die Manipulation von JavaScript-Datentypen durch grundlegende Operationen. Beherrschen Sie Zuweisungen, mathematische Operationen, Inkrementieren und Dekrementieren, Vergleiche, logische Operationen und Zeichenkettenverkettung.

Erfahren Sie, wie Sie den Ablauf Ihrer Programme mit bedingten Anweisungen steuern. Beherrschen Sie `if`, `else` und `else if`, um JavaScript Anweisungen zur Entscheidungsfindung und Ausführung von Code basierend auf unterschiedlichen Bedingungen zu geben.

Optimieren Sie Ihren Code durch das Beherrschen der Schleifenstrukturen in JavaScript. Erkunden Sie `while`-, `do while`- und `for`-Schleifen und lernen Sie, deren Verhalten mit `break` und `continue` zu steuern. Nutzen Sie die Leistungsfähigkeit von Schleifen, um wiederkehrende Aufgaben effizient auszuführen.

Entdecken Sie die Leistungsfähigkeit von Funktionen in JavaScript. Erfahren Sie, wie Funktionen definiert werden, wie mit Argumenten gearbeitet wird und wie die `return`-Anweisung zur Erstellung von wiederverwendbarem und effizientem Code eingesetzt wird. Das Beherrschen von Funktionen verbessert die Fähigkeit, saubere und modulare Programme zu schreiben.

Erhalten Sie ein Verständnis für die Kernprinzipien von React. Sie lernen JSX (JavaScript XML), den Aufbau wiederverwendbarer UI-Komponenten und das Rendern von Elementen kennen. Zusätzlich erfahren Sie mehr über die Bedeutung der Datenerfassung und der bedingten Darstellung in React-Anwendungen. Am Ende dieses Abschnitts verfügen Sie über ein solides Fundament der wesentlichen Konzepte von React, das Sie auf die weiterführenden Themen in den folgenden Abschnitten vorbereitet.

Untersuchen Sie die verschiedenen Methoden zur Hinzufügung von Styles in React-Anwendungen. Sie lernen, wie Sie Styles auf einzelne Komponenten anwenden, dynamische Styles nutzen und einen skalierbaren sowie wartbaren Styling-Ansatz in Ihren Projekten beibehalten.

Leistungsstarke Funktionen in der modernen React-Entwicklung. Hooks revolutionieren die Entwicklung von Funktionskomponenten, indem sie eine prägnante und intuitive Möglichkeit zur Verwaltung von Zustand und zur Ausführung von Seiteneffekten bieten. Im Gegensatz dazu ermöglicht Context das Teilen von Daten durch den Komponentenbaum, ohne Props weiterreichen zu müssen. Die Kombination von Hooks und Context ermöglicht ein effizientes Zustandsmanagement und eine vereinfachte Datenweitergabe in React-Anwendungen.

Schritt-für-Schritt-Anleitung zum Start eines praxisnahen React-Projekts. Von der Einrichtung der Entwicklungsumgebung über das Verständnis der Projektorganisation bis hin zu wichtigen Tools – Sie erwerben das Wissen und die Sicherheit, um Ihre React-Reise zu beginnen.

Erlernen der theoretischen Grundlagen von Konzepten wie URL, Domain, Protokoll, Abfrageparametern und mehr. Verständnis der Bedeutung von Routing in Webanwendungen und der Notwendigkeit der React-Router-Bibliothek.

Erfahren Sie, wie eine vollständige React-Anwendung von Grund auf erstellt wird, mit der Möglichkeit, Inhalte anzuzeigen, die sich anhand der URL mithilfe der React-Router-Funktionalität anpassen.

Erkunden Sie die Verwendung von Query-Strings zur gemeinsamen Nutzung und Verwaltung des Anwendungszustands über URLs, arbeiten Sie mit verschiedenen Datentypen in Query-Parametern und nutzen Sie React Router für Navigation und Effekte basierend auf URL-Änderungen.