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.