Anleitungen

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

Diese Ressourcen wurden von zukunftsorientierten Unternehmen und Webentwicklern erstellt, die offene Standards und Best Practices für die Webentwicklung übernommen haben und Übersetzungen durch eine offene Content-Lizenz wie Creative Commons bereitstellen oder erlauben.

Für absolute Anfänger im Web

Erste Schritte im Web

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

HTML-Anleitungen

Einführungslevel

Einführung in HTML

Dieses Modul legt den Grundstein, indem es Sie an wichtige Konzepte und die Syntax gewöhnt, den Einsatz von HTML für Text betrachtet, wie man Hyperlinks erstellt und HTML verwendet, um eine Webseite zu strukturieren.

MDN HTML-Elementreferenz

Eine umfassende Referenz für HTML-Elemente und wie die verschiedenen Browser sie unterstützen.

Eine einfache Webseite mit HTML erstellen

Eine HTML-Anleitung für Anfänger, die Erklärungen zu gängigen Tags, einschließlich HTML-Tags, beinhaltet. Zudem enthält sie eine Schritt-für-Schritt-Anleitung zur Erstellung einer grundlegenden Webseite mit Codebeispielen.

HTML-Herausforderungen

Nutzen Sie diese Herausforderungen, um Ihre HTML-Fähigkeiten zu verbessern (zum Beispiel, "Sollte ich ein <h2>-Element oder ein <strong>-Element verwenden?"), mit Fokus auf sinnvolle Auszeichnung.

Mittleres Level

Multimedia und Einbettung

Dieses Modul untersucht, wie HTML verwendet wird, um Multimedia in Ihre Webseiten einzubinden, inklusive der verschiedenen Möglichkeiten, Bilder einzuschließen und wie man Video, Audio und sogar ganze andere Webseiten einbettet.

HTML-Tabellen

Tabellarische Daten auf einer Webseite auf verständliche und zugängliche Weise darzustellen, kann eine Herausforderung sein. Dieses Modul behandelt die grundlegende Tabellenmarkup, sowie komplexere Funktionen wie die Implementierung von Bildunterschriften und Zusammenfassungen.

Fortgeschrittenes Level

HTML-Formulare

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, wie z.B. registrieren und anmelden, Feedback senden, Produkte kaufen und mehr. Dieses Modul bringt Sie dazu, die clientseitigen Teile von Formularen zu erstellen.

Tipps zum Erstellen von schnell ladenden HTML-Seiten

Optimieren Sie Webseiten, um eine reaktionsfähigere Seite für Besucher bereitzustellen und die Belastung Ihres Webservers und Ihrer Internetverbindung zu verringern.

CSS-Anleitungen

Einführungslevel

CSS-Grundlagen

CSS (Cascading Style Sheets) ist der Code, den Sie verwenden, um Ihre Webseite zu gestalten. CSS-Grundlagen führen Sie durch alles, was Sie zum Einstieg benötigen. Wir beantworten Fragen wie: Wie mache ich meinen Text schwarz oder rot? Wie bringe ich meine Inhalte an der gewünschten Stelle auf dem Bildschirm zum Erscheinen? Wie dekoriere ich meine Webseite mit Hintergrundbildern und Farben?

CSS-Erste Schritte

CSS (Cascading Style Sheets) wird verwendet, um Webseiten zu gestalten und zu layouten — zum Beispiel, um die Schriftart, Farbe, Größe und den Abstand Ihrer Inhalte zu ändern, sie in mehrere Spalten aufzuteilen oder Animationen und andere dekorative Features hinzuzufügen. Dieses Modul bietet einen sanften Einstieg auf Ihrem Weg zur CSS-Meisterschaft mit den Grundlagen der Funktionsweise, was die Syntax aussieht und wie Sie beginnen können, es zu nutzen, um Styling zu HTML hinzuzufügen.

CSS-Bausteine

Dieses Modul setzt da an, wo CSS-Erste Schritte aufgehört hat — jetzt haben Sie sich mit der Sprache und ihrer Syntax vertraut gemacht und einige grundlegende Erfahrungen mit der Nutzung gesammelt, es ist Zeit, ein wenig tiefer zu tauchen. Dieses Modul betrachtet die Cascade und Vererbung, alle verfügbaren Selektortypen, Einheiten, Größenanpassung, Stil von Hintergründen und Rahmen, Debugging und vieles mehr.

Ziel ist es, Ihnen ein Toolkit zum Schreiben kompetenter CSS bereitzustellen und Ihnen das wesentliche theoretische Verständnis zu vermitteln, bevor Sie zu spezifischeren Disziplinen wie Textgestaltung und CSS-Layout übergehen.

Selektoren

Ziel-HTML-Elemente einschließlich solcher basierend auf Elementzustand mit CSS.

Spezifität

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

Cascade & Vererbung

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

Textgestaltung

Hier betrachten wir die Grundlagen der Textgestaltung, einschließlich der Einstellung von Schriftart, Fettdruck und Kursivschrift, Zeilen- und Buchstabenabstand, Schlagschatten und anderen Texteigenschaften. Wir runden das Modul mit der Betrachtung ab, wie benutzerdefinierte Schriften auf Ihrer Seite angewendet werden können und wie man Listen und Links gestaltet.

Häufige CSS-Fragen

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

Mittleres Level

CSS-Layout

An diesem Punkt haben wir bereits die CSS-Grundlagen betrachtet, wie man Text gestaltet und wie man die Boxen, in denen Ihre Inhalte sitzen, gestaltet und manipuliert. Nun ist es an der Zeit zu betrachten, 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 die CSS-Gestaltung eintauchen, verschiedene Anzeigeeinstellungen betrachten, traditionelle Layout-Methoden mit Float und Positionierung und neue Layout-Tools wie Flexbox.

CSS-Referenz

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

Fluid Grids

Gestalten Sie Layouts, die sich fließend mit dem Browserfenster ändern und dennoch ein typografisches Raster verwenden.

CSS-Herausforderungen

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

Fortgeschrittenes Level

Verwendung von CSS-Transformationen

Anwenden von Drehungen, Kippen, Skalieren und Übersetzen mit CSS.

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 Sie Grafiken mit Skripting unter Verwendung des <canvas>-Elements zeichnen.

JavaScript-Anleitungen

Einführungslevel

JavaScript erste Schritte

In unserem ersten JavaScript-Modul beantworten wir zunächst einige grundlegende Fragen wie "Was ist JavaScript?", "Wie sieht es aus?" und "Was kann es tun?", bevor wir zu Ihrem ersten praktischen Erlebnis beim Schreiben von JavaScript übergehen. Danach erörtern wir einige wichtige JavaScript-Funktionen im Detail, wie Variablen, Strings, Zahlen und Arrays.

JavaScript-Bausteine

In diesem Modul setzen wir unsere Abdeckung aller wichtigen grundlegenden JavaScript-Funktionen fort und konzentrieren uns auf häufig vorkommende Arten von Codeblöcken wie bedingte Anweisungen, Schleifen, Funktionen und Ereignisse. Sie haben dieses Material bereits im Kurs gesehen, aber nur nebenbei — hier werden wir es explizit besprechen.

Erste Schritte mit JavaScript

Was ist JavaScript und wie kann es Ihnen helfen?

Codecademy

Codecademy ist ein einfacher Weg, wie Sie JavaScript-Programmierung lernen können. Es ist interaktiv und Sie können es mit Ihren Freunden tun.

freeCodeCamp

freeCodeCamp lehrt eine Vielzahl von Programmiersprachen und Frameworks für die Webentwicklung. Es gibt auch ein Forum, einen Internet-Radiosender und einen Blog.

Mittleres Level

Einführung in JavaScript-Objekte

In JavaScript sind die meisten Dinge Objekte, von Kern-JavaScript-Funktionen wie Strings und Arrays bis hin zu den Browser-APIs, die auf JavaScript aufbauen. 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 Ihre Kenntnisse der Sprache weiter vertiefen und effizienteren Code schreiben möchten, daher haben wir dieses Modul bereitgestellt, um Ihnen dabei zu helfen. Hier lehren wir die Theorie und Syntax von Objekten im Detail, zeigen, wie Sie Ihre eigenen Objekte erstellen und erklären, was JSON-Daten sind und wie Sie damit arbeiten.

Client-seitige Web-APIs

Beim Schreiben von client-seitigem JavaScript für Websites oder Anwendungen werden Sie nicht weit kommen, bevor Sie beginnen, APIs zu verwenden — Schnittstellen zur Manipulation verschiedener Aspekte des Browsers und des Betriebssystems, auf dem die Website läuft, oder sogar Daten von anderen Websites oder Diensten. In diesem Modul werden wir erkunden, was APIs sind und wie man einige der häufigsten APIs verwendet, auf die Sie häufig in Ihrer Entwicklungsarbeit stoßen werden.

Eloquent JavaScript

Ein umfassender Leitfaden zu Methoden für fortgeschrittenes und mittleres JavaScript.

Speaking JavaScript

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

Essenzielle JavaScript-Entwurfsmuster

Eine Einführung in essentielle JavaScript-Entwurfsmuster.

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 Lernniveaus von Anfänger bis Fortgeschritten.

You Don't Know JS

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

JavaScript Garden

Dokumentation der eigenartigsten Teile von JavaScript.

Exploring ES6

Zuverlässige und tiefgehende Informationen zu ECMAScript 2015.

JavaScript Patterns

Eine Sammlung von JavaScript-Mustern und Anti-Mustern, die Funktionsmuster, jQuery-Muster, jQuery-Plugin-Muster, Entwurfsmuster, allgemeine Muster, Literale und Konstruktor-Muster, Objekt-Erstellungsmuster, Code-Wiederverwendungsmuster, DOM abdecken.

Wie Browser funktionieren

Ein detaillierter Forschungsartikel, der verschiedene moderne Browser, deren Engines, Seitenrendering usw. beschreibt.

JavaScript-Videos

Eine Sammlung von JavaScript-Videos, die man gesehen haben sollte.

Erweiterungsentwicklung

WebExtensions

WebExtensions ist ein browserübergreifendes System zur Entwicklung von Browsererweiterungen. Es ist weitgehend 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 Multiprozess-Firefox.