Tutorials zur Webentwicklung

Für absolute Anfänger

Erste Schritte mit dem Web

Erste Schritte mit dem Web ist eine kompakte Reihe, die Sie in die Praxis der Webentwicklung einführt. Sie richten die Werkzeuge ein, die Sie benötigen, um eine einfache Webseite zu erstellen und Ihren eigenen Code zu veröffentlichen.

HTML-Tutorials

Einführung in HTML

Inhalte mit HTML strukturieren

Unser einführendes HTML-Lernmodul vermittelt HTML von Grund auf — Vorkenntnisse sind nicht erforderlich. Es schafft die Grundlagen, indem es Sie mit wichtigen Konzepten und der Syntax vertraut macht, die Anwendung von HTML auf Text behandelt, zeigt, wie Hyperlinks erstellt werden, und erklärt, wie HTML zur Strukturierung einer Webseite verwendet wird.

HTML für Anfänger

Ein HTML-Leitfaden für Anfänger mit Erklärungen gängiger Tags, einschließlich HTML-Tags. Enthält außerdem eine Schritt-für-Schritt-Anleitung zum Erstellen einer einfachen Webseite mit Codebeispielen.

HTML-Herausforderungen

Nutzen Sie diese Herausforderungen, um Ihre HTML-Fähigkeiten zu verbessern (zum Beispiel: „Soll ich ein <h2>-Element oder ein <strong>-Element verwenden?“), mit Schwerpunkt auf aussagekräftigem Markup.

Fortgeschrittene HTML-Themen

Webformulare

Formulare sind ein sehr wichtiger Teil des Webs — sie bieten einen Großteil der Funktionalität, die Sie für die Interaktion mit Websites benötigen, etwa für Registrierung und Anmeldung, das Senden von Feedback, den Kauf von Produkten und vieles mehr. Dieses Modul hilft Ihnen beim Einstieg in die Erstellung der clientseitigen Teile von Formularen.

Tipps zum Verfassen schnell ladender HTML-Seiten

Optimieren Sie Webseiten, um Besuchern eine reaktionsschnellere Website zu bieten und die Belastung Ihres Webservers und Ihrer Internetverbindung zu reduzieren.

CSS-Tutorials

Einführung in CSS

CSS-Grundlagen

CSS (Cascading Style Sheets) ist der Code, mit dem Sie Ihre Webseite gestalten. CSS-Grundlagen führt Sie durch alles, was Sie für den Einstieg benötigen. Wir beantworten Fragen wie: Wie mache ich meinen Text schwarz oder rot? Wie lasse ich meine Inhalte an einer bestimmten Stelle auf dem Bildschirm erscheinen? Wie gestalte ich meine Webseite mit Hintergrundbildern und Farben?

Grundlagen der CSS-Gestaltung

CSS (Cascading Style Sheets) wird verwendet, um Webseiten zu gestalten und anzuordnen — zum Beispiel, um Schriftart, Farbe, Größe und Abstand Ihrer Inhalte zu ändern, sie in mehrere Spalten aufzuteilen oder Animationen und andere dekorative Funktionen hinzuzufügen. Dieses Modul bietet einen sanften Einstieg auf Ihrem Weg zur CSS-Meisterschaft mit den Grundlagen der Funktionsweise, dem Aussehen der Syntax und der Verwendung von CSS zur Gestaltung von HTML.

Selektoren

Wählen Sie mit CSS HTML-Elemente aus, auch anhand ihres Elementzustands.

Spezifität

Verstehen Sie den Browser-Algorithmus, der bestimmt, welche CSS-Deklarationen auf ein Element angewendet werden, wenn konkurrierende Deklarationen vorhanden sind, einschließlich eines Spezifitätsquiz.

Konflikte behandeln

Die Kaskade, Spezifität und Vererbung steuern, wie CSS auf HTML angewendet wird und wie Konflikte zwischen Style-Deklarationen aufgelöst werden.

CSS-Textgestaltung

Hier betrachten wir die Grundlagen der Textgestaltung, einschließlich der Einstellung von Schriftart, Fettdruck und Kursivschrift, Zeilen- und Buchstabenabstand sowie Schlagschatten und anderer Textfunktionen. Das Modul schließen wir mit der Anwendung benutzerdefinierter Schriftarten auf Ihre Seite sowie der Gestaltung von Listen und Links ab.

Häufige CSS-Probleme lösen

Häufige Fragen und Antworten für Anfänger.

CSS-Themen für Fortgeschrittene

CSS-Layout

An diesem Punkt haben wir bereits die CSS-Grundlagen behandelt, wie Text gestaltet wird und wie die Boxen gestaltet und manipuliert werden, in denen sich Ihre Inhalte befinden. Jetzt ist es an der Zeit, zu betrachten, wie Sie Ihre Boxen an der richtigen Position in Bezug auf den Viewport und zueinander platzieren. Wir haben die notwendigen Voraussetzungen behandelt und können nun tief in CSS-Layout eintauchen, verschiedene display-Einstellungen, traditionelle Layout-Methoden mit float und Positionierung sowie moderne Layout-Werkzeuge wie flexbox betrachten.

CSS-Referenz

Vollständige Referenz zu CSS mit Details zur Unterstützung durch Firefox und andere Browser.

Fließende Raster

Entwerfen Sie Layouts, deren Größe sich flexibel mit dem Browserfenster ändert, und verwenden Sie dabei weiterhin ein typografisches Raster.

CSS-Herausforderungen

Trainieren Sie Ihre CSS-Fähigkeiten und finden Sie heraus, wo Sie mehr Übung benötigen.

Fortgeschrittene CSS-Themen

CSS-Transformationen verwenden

Wenden Sie Drehung, Scherung, Skalierung und Verschiebung mit CSS an.

CSS-Übergänge

CSS-Übergänge bieten eine Möglichkeit, Änderungen an CSS-Eigenschaften zu animieren, statt die Änderungen sofort wirksam werden zu lassen.

Canvas-Tutorial

Erfahren Sie, wie Sie mit Skripten unter Verwendung des canvas-Elements Grafiken zeichnen.

JavaScript-Tutorials

Einführung in JavaScript

Dynamische Skripterstellung mit JavaScript

In diesem Modul setzen wir unsere Behandlung aller wichtigen grundlegenden Funktionen von JavaScript fort und richten unsere Aufmerksamkeit auf häufig vorkommende Arten von Codeblöcken wie bedingte Anweisungen, Schleifen, Funktionen und Ereignisse. Sie haben diese Dinge im Kurs bereits gesehen, aber nur am Rande — hier behandeln wir sie alle ausdrücklich.

Erste Schritte mit JavaScript

Was ist JavaScript und wie kann es Ihnen helfen?

Codecademy

Codecademy ist eine einfache Möglichkeit, das Programmieren mit JavaScript zu lernen. Es ist interaktiv, und Sie können es gemeinsam mit Ihren Freunden nutzen.

freeCodeCamp

freeCodeCamp vermittelt verschiedene Sprachen und Frameworks für die Webentwicklung. Es bietet außerdem ein Forum, einen Internetradiosender und einen Blog.

JavaScript-Themen für Fortgeschrittene

Einführung in JavaScript-Objekte

In JavaScript sind die meisten Dinge Objekte, von zentralen JavaScript-Funktionen wie Strings und Arrays bis hin zu den auf JavaScript aufbauenden Browser-APIs. Sie können sogar eigene Objekte erstellen, um zusammengehörige Funktionen und Variablen in effizienten Paketen zu kapseln. Die objektorientierte Natur von JavaScript ist wichtig zu verstehen, wenn Sie Ihr Wissen über die Sprache vertiefen und effizienteren Code schreiben möchten; deshalb stellen wir dieses Modul bereit. Hier vermitteln wir Objekt-Theorie und -Syntax ausführlich, betrachten die Erstellung eigener Objekte und erklären, was JSON-Daten sind und wie Sie mit ihnen arbeiten.

Clientseitige Web-APIs

Wenn Sie clientseitiges JavaScript für Websites oder Anwendungen schreiben, werden Sie schon bald APIs verwenden — Schnittstellen zur Manipulation verschiedener Aspekte des Browsers und Betriebssystems, auf dem die Website läuft, oder sogar von Daten anderer Websites oder Dienste. In diesem Modul untersuchen wir, was APIs sind und wie Sie einige der gängigsten APIs verwenden, denen Sie in Ihrer Entwicklungsarbeit häufig begegnen werden.

Eloquent JavaScript

Ein umfassender Leitfaden zu JavaScript-Methoden für Fortgeschrittene und Experten.

Speaking JavaScript

Für Programmierer, die JavaScript schnell und richtig lernen möchten, sowie für JavaScript-Programmierer, die ihre Fähigkeiten vertiefen und/oder bestimmte Themen nachschlagen möchten.

Essential JavaScript Design Patterns

Eine Einführung in wesentliche JavaScript-Entwurfsmuster.

JavaScript.info – Das moderne JavaScript-Tutorial

Teil 1: Die Sprache. Teil 2: Arbeiten mit Browsern.

Erweiterte JavaScript-Themen

JavaScript-Leitfaden

Ein umfassender, regelmäßig aktualisierter Leitfaden zu JavaScript für alle Lernstufen, von Anfängern bis zu Fortgeschrittenen.

You Don't Know JS

Eine Buchreihe, die tief in die Kernmechanismen der JavaScript-Sprache eintaucht.

JavaScript Garden

Dokumentation der ungewöhnlichsten Teile von JavaScript.

Exploring ES6

Zuverlässige und ausführliche Informationen über ECMAScript 2015.

JavaScript Patterns

Eine Sammlung von JavaScript-Mustern und Anti-Mustern, die Funktionsmuster, jQuery-Muster, jQuery-Plugin-Muster, Entwurfsmuster, allgemeine Muster, Literal- und Konstruktor-Muster, Muster zur Objekterstellung, Muster zur Code-Wiederverwendung und DOM abdeckt.

Wie Browser funktionieren

Ein ausführlicher Forschungsartikel, der verschiedene moderne Browser, ihre Engines, das Rendern von Seiten usw. beschreibt.

JavaScript-Videos

Eine Sammlung von JavaScript-Videos zum Ansehen.

Entwicklung von Erweiterungen

WebExtensions

WebExtensions ist ein browserübergreifendes System zur Entwicklung von Browser-Add-ons. Das System ist weitgehend kompatibel mit der von Google Chrome und Opera unterstützten Extension-API. Für diese Browser geschriebene Erweiterungen werden in den meisten Fällen mit nur wenigen Änderungen in Firefox oder Microsoft Edge ausgeführt. Die API ist außerdem vollständig kompatibel mit Multiprocess Firefox.