Tutorials

Die Links auf dieser Seite führen zu einer Vielzahl von Tutorials und Schulungsmaterialien. Egal, ob Sie gerade erst anfangen, die Grundlagen erlernen oder bereits ein erfahrener Webentwickler sind, hier finden Sie hilfreiche Ressourcen zu Best Practices.

Diese Ressourcen werden von visionären Unternehmen und Webentwicklern erstellt, die offene Standards und Best Practices für die Webentwicklung übernommen haben und Übersetzungen durch eine offene Inhaltslizenz wie Creative Commons bereitstellen oder zulassen.

Für absolute Anfänger im Web

Erste Schritte im Web

Erste Schritte im Web ist eine kompakte Serie, die Sie in die praktischen Aspekte der Webentwicklung einführt. Sie richten die Werkzeuge ein, die Sie benötigen, um eine einfache Webseite zu erstellen und Ihren eigenen einfachen Code zu veröffentlichen.

HTML-Tutorials

Einführungslevel

Inhalte mit HTML strukturieren

Unser einführendes HTML-Lernmodul bringt Ihnen HTML von Grund auf bei – keine Vorkenntnisse erforderlich. Es bereitet die Bühne, indem es Sie mit wichtigen Konzepten und der Syntax vertraut macht, indem es HTML auf Texte anwendet, zeigt, wie man Hyperlinks erstellt und wie man HTML zur Strukturierung einer Webseite nutzt.

Erstellen einer einfachen Webseite mit HTML

Ein HTML-Leitfaden für Anfänger, der Erklärungen zu gängigen Tags, einschließlich HTML-Tags, enthält. Enthält auch eine Schritt-für-Schritt-Anleitung zum Erstellen einer einfachen Webseite mit Codebeispielen.

HTML-Herausforderungen

Verwenden Sie diese Herausforderungen, um Ihre HTML-Fähigkeiten zu schärfen (zum Beispiel, "Soll ich ein <h2>-Element oder ein <strong>-Element verwenden?"), mit dem Fokus auf bedeutungsvolle Auszeichnungen.

Fortgeschrittenes Level

Webformulare

Formulare sind ein sehr wichtiger Teil des Webs – sie bieten einen Großteil der Funktionen, die Sie benötigen, um mit Websites zu interagieren, z.B. um sich zu registrieren und einzuloggen, Feedback zu senden, Produkte zu kaufen und mehr. Dieses Modul hilft Ihnen, die clientseitigen Teile von Formularen zu erstellen.

Tipps zur Erstellung von HTML-Seiten, die schnell geladen werden

Optimieren Sie Webseiten, um Besuchern eine reaktionsfähigere Seite zu bieten und die Belastung Ihres Webservers und Ihrer Internetverbindung zu reduzieren.

CSS-Tutorials

Einführungslevel

CSS-Grundlagen

CSS (Cascading Style Sheets) ist der Code, den Sie verwenden, um Ihre Webseite zu stylen. CSS-Grundlagen führt Sie durch das, was Sie brauchen, um loszulegen. Wir beantworten Fragen wie: Wie mache ich meinen Text schwarz oder rot? Wie bringe ich meinen Inhalt an einer bestimmten Stelle auf dem Bildschirm zur Anzeige? Wie dekoriere ich meine Webseite mit Hintergrundbildern und -farben?

CSS-Styling-Grundlagen

CSS (Cascading Style Sheets) wird verwendet, um Webseiten zu stylen und zu gestalten – zum Beispiel um Schriftarten, Farben, Größen und Abstände von Inhalten zu ändern, sie in mehrere Spalten aufzuteilen oder Animationen und andere dekorative Funktionen hinzuzufügen. Dieses Modul bietet einen sanften Einstieg in Ihren Weg zu CSS-Meisterschaft, indem es die Grundlagen erklärt, wie es funktioniert, wie die Syntax aussieht und wie Sie damit beginnen können, Styling zu HTML hinzuzufügen.

CSS-Layout

In den vorherigen Modulen haben wir untersucht, wie man die Boxen, in denen sich Ihr Inhalt befindet, stylen und manipulieren kann. Jetzt ist es an der Zeit zu schauen, wie man Ihre Boxen korrekt in Beziehung zueinander und zum Browser-Viewport layoutet. Dieses Modul behandelt Floats, Positionierung, andere moderne Layout-Tools und das Erstellen reaktionsfähiger Designs, die sich an verschiedene Geräte, Bildschirmgrößen und -auflösungen anpassen werden.

Selektoren

Zielgerichtete HTML-Elemente, einschließlich solcher im Zustands eines Elements, mit CSS.

Spezifität

Verständnis des Browser-Algorithmus zur Bestimmung, welche CSS-Deklarationen auf ein Element angewendet werden, wenn es konkurrierende Deklarationen gibt, mit einem Spezifitäts-Quiz

Konflikte lösen

Die Kaskade, Spezifität und Vererbung bestimmen, wie CSS auf HTML angewendet wird und wie Konflikte zwischen Stil-Deklarationen gelöst werden.

CSS-Text-Styling

Hier betrachten wir die Grundlagen des Textstylings, einschließlich der Einstellung von Schriftart, Fettigkeit und Kursivschrift, Zeilen- und Zeichenabständen sowie Schatten und anderen Textmerkmalen. Wir schließen das Modul ab, indem wir benutzerdefinierte Schriftarten auf Ihrer Seite anwenden und Listen und Links stylen.

Häufige CSS-Probleme lösen

Häufig gestellte Fragen und Antworten für Anfänger.

Mittleres Level

CSS-Layout

An diesem Punkt haben wir bereits die CSS-Grundlagen, das Stylen von Texten und das Stylen und Manipulieren der Boxen, in denen Ihr Inhalt sich befindet, betrachtet. Jetzt ist es an der Zeit zu schauen, wie man Ihre Boxen an der richtigen Stelle in Bezug auf den Viewport und zueinander platziert. Wir haben die notwendigen Voraussetzungen behandelt und können jetzt tief in das CSS-Layout eintauchen, indem wir uns verschiedene Anzeigeeinstellungen, traditionelle Layoutmethoden mit Floats und Positionierung sowie neuartige Layout-Tools wie Flexbox ansehen.

CSS Referenz

Komplette Referenz zu CSS, mit Details zur Unterstützung durch Firefox und andere Browser.

Flüssige Raster

Entwerfen Sie Layouts, die sich mit dem Browserfenster fließend anpassen, während sie weiterhin ein typografisches Raster verwenden.

CSS-Herausforderungen

Flexen Sie Ihre CSS-Fähigkeiten und sehen Sie, wo Sie noch mehr Übung benötigen.

Fortgeschrittenes Level

CSS-Transformationen verwenden

Verwenden Sie CSS zur Anwendung von Rotation, Schiefstellung, Skalierung und Übersetzung.

CSS-Übergänge

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

Canvas-Tutorial

Lernen Sie, wie man Grafiken mit Skripting über das canvas-Element zeichnet.

JavaScript-Tutorials

Einführungslevel

Dynamisches Scripting mit JavaScript

In diesem Modul setzen wir unsere Abdeckung aller grundlegenden Eigenschaften von JavaScript fort und richten unser Augenmerk auf häufige Codeblöcke wie bedingte Anweisungen, Schleifen, Funktionen und Ereignisse. Sie haben dieses Material bereits im Kurs gesehen, aber nur kurz – hier werden wir alles explizit besprechen.

Erste Schritte mit JavaScript

Was ist JavaScript und wie kann es Ihnen helfen?

Codecademy

Codecademy ist eine einfache Möglichkeit, wie man JavaScript programmieren lernen kann. Es ist interaktiv und Sie können es mit Freunden machen.

freeCodeCamp

freeCodeCamp unterrichtet eine Vielzahl von Sprachen und Frameworks für die Webentwicklung. Es hat auch ein Forum, ein Internetradio und ein Blog.

Mittleres Level

Einführung in JavaScript-Objekte

In JavaScript sind die meisten Dinge Objekte, von Kernfunktionen wie Strings und Arrays bis zu den auf JavaScript basierenden Browser-APIs. Sie können sogar Ihre eigenen Objekte erstellen, um verwandte Funktionen und Variablen in effiziente Pakete zu kapseln. Die objektorientierte Natur von JavaScript ist wichtig zu verstehen, wenn Sie Ihr Wissen über die Sprache erweitern und effizienteren Code schreiben möchten. Daher haben wir dieses Modul bereitgestellt, um Ihnen zu helfen. Hier lehren wir die Objekttheorie und -syntax im Detail, schauen uns an, wie man eigene Objekte erstellt, und erklären, was JSON-Daten sind und wie man mit ihnen arbeitet.

Client-seitige Web-APIs

Beim Schreiben von clientseitigem JavaScript für Websites oder Anwendungen kommen Sie nicht weit, bevor Sie beginnen, APIs zu verwenden – Schnittstellen zur Manipulation verschiedener Aspekte des Browsers und Betriebssystems, auf dem die Seite läuft, oder sogar Daten von anderen Websites oder Diensten. In diesem Modul werden wir erforschen, was APIs sind und wie man einige der häufigsten APIs verwendet, die Ihnen oft in Ihrer Entwicklungsarbeit begegnen werden.

Eloquent JavaScript

Ein umfassender Leitfaden zu mittleren und fortgeschrittenen JavaScript-Methodologien.

Speaking JavaScript

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

Essentielle JavaScript-Designmuster

Eine Einführung in essentielle JavaScript-Designmuster.

JavaScript.info - Das moderne JavaScript-Tutorial

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

Fortgeschrittenes Level

JavaScript-Leitfaden

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

You Don't Know JS

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

JavaScript Garden

Dokumentation der eigenartigsten Teile von JavaScript.

Exploring ES6

Zuverlässige und gründliche Informationen über ECMAScript 2015.

JavaScript Patterns

Eine Sammlung von JavaScript-Mustern und Anti-Mustern, die Funktionsmuster, jQuery-Muster, jQuery-Plugin-Muster, Designmuster, allgemeine Muster, Literale und Konstruktormuster, Objekt-Erstellungsmuster, Code-Wiederverwendungsmuster, DOM umfasst.

Wie Browser arbeiten

Ein detaillierter Forschungsartikel, der verschiedene moderne Browser, ihre Engines, das Rendern von Seiten etc. beschreibt.

JavaScript-Videos

Eine Sammlung von JavaScript-Videos, die man sich ansehen sollte.

Erweiterungsentwicklung

WebExtensions

WebExtensions ist ein browserübergreifendes System zur Entwicklung von Browser-Add-ons. In großem Umfang ist das System kompatibel mit der von Google Chrome und Opera unterstützten Erweiterungs-API. Erweiterungen, die für diese Browser geschrieben wurden, laufen in den meisten Fällen in Firefox oder Microsoft Edge mit nur wenigen Änderungen. Die API ist auch vollständig kompatibel mit multiprozessfähigem Firefox.