Webentwicklungstutorials
Die Links auf dieser Seite führen zu einer Vielzahl von Tutorials und Lernmaterialien. Unabhängig davon, ob Sie ein Anfänger, Fortgeschrittener oder Experte in der Webentwicklung sind, finden Sie hier etwas Nützliches.
Diese Tutorials wurden von zukunftsorientierten Unternehmen und Webentwicklern erstellt, die offene Standards und Best Practices übernommen haben und Übersetzungen durch eine offene Content-Lizenz wie Creative Commons ermöglichen oder bereitstellen.
Für absolute Anfänger
- Erste Schritte im Web
-
Erste Schritte im Web ist eine kompakte Serie, die Ihnen die praktischen Aspekte der Webentwicklung näherbringt. Sie richten die Werkzeuge ein, die Sie benötigen, um eine grundlegende 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 lehrt HTML von Grund auf - keine Vorkenntnisse erforderlich. Es legt den Grundstein, macht Sie mit wichtigen Konzepten und der Syntax vertraut und zeigt, wie HTML auf Text angewendet wird, wie Hyperlinks erstellt werden und wie HTML zur Strukturierung einer Webseite verwendet wird.
- HTML für Anfänger
-
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 zur Erstellung einer einfachen Webseite mit Codebeispielen.
- HTML-Herausforderungen
-
Verwenden Sie diese Herausforderungen, um Ihre HTML-Fähigkeiten zu verfeinern (zum Beispiel "Soll ich ein
<h2>
-Element oder ein<strong>
-Element verwenden?"), mit Schwerpunkt auf sinnvollem Markup.
Erweiterte HTML-Themen
- Webformulare
-
Formulare sind ein sehr wichtiger Teil des Webs — sie bieten viele der Funktionen, die Sie für die Interaktion mit Websites benötigen, wie z.B. Registrierung und Anmeldung, Feedback senden, Produkte kaufen und mehr. Dieses Modul führt Sie in die Erstellung der clientseitigen Teile von Formularen ein.
- Tipps für das Verfassen schneller ladender HTML-Seiten
-
Optimieren Sie Webseiten, um eine reaktionsfähigere Site für Besucher bereitzustellen 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, den Sie verwenden, um Ihre Webseite zu gestalten. CSS-Grundlagen führt Sie durch das, was Sie benötigen, um loszulegen. Wir beantworten Fragen wie: Wie mache ich meinen Text schwarz oder rot? Wie zeige ich meinen Inhalt an einem bestimmten Ort auf dem Bildschirm an? Wie dekoriere ich meine Webseite mit Hintergrundbildern und Farben?
- CSS-Styling-Grundlagen
-
CSS (Cascading Style Sheets) wird verwendet, um Webseiten zu gestalten und zu gestalten — zum Beispiel, um Schriftart, Farbe, Größe und Abstand Ihres Inhalts zu ändern, ihn in mehrere Spalten zu teilen oder Animationen und andere dekorative Funktionen hinzuzufügen. Dieses Modul bietet einen sanften Einstieg auf Ihrem Weg zur CSS-Beherrschung mit den Grundlagen, wie es funktioniert, wie die Syntax aussieht und wie Sie damit beginnen können, Styling zu HTML hinzuzufügen.
- Selektoren
-
Ziel-HTML-Elemente, einschließlich basierend auf dem Zustand des 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 verwalten
-
Die Kaskade, Spezifität und Vererbung steuern, wie CSS auf HTML angewendet wird, und wie Konflikte zwischen Stil-Deklarationen gelöst werden.
- CSS-Textgestaltung
-
Hier betrachten wir die Grundlagen der Textgestaltung, einschließlich der Einstellung von Schriftart, Fettung und Kursivschrift, Zeilen- und Buchstabenabstand sowie Schlagschatten und andere Textmerkmale. Wir schließen das Modul ab, indem wir uns mit der Anwendung benutzerdefinierter Schriftarten auf Ihre Seite beschäftigen und Listen und Links stylen.
- Häufige CSS-Probleme lösen
-
Häufige Fragen und Antworten für Anfänger.
Themen der mittleren CSS-Stufe
- CSS-Layout
-
An diesem Punkt haben wir bereits die Grundlagen von CSS, die Gestaltung von Texten und die Gestaltung und Manipulation der Boxen, in denen Ihr Inhalt sitzt, betrachtet. Jetzt ist es an der Zeit, sich anzusehen, wie Sie Ihre Boxen in Bezug auf den Ansichtsfenster und zueinander an die richtige Stelle platzieren. Wir haben die notwendigen Voraussetzungen abgedeckt und können jetzt tief in das CSS-Layout eintauchen, indem wir uns verschiedene Anzeigeeinstellungen ansehen, traditionelle Layout-Methoden, die Floats und Positionierung verwenden, sowie neue Layout-Tools wie Flexbox.
- CSS-Referenz
-
Vollständige Referenz zu CSS, mit Details zur Unterstützung durch Firefox und andere Browser.
- Flüssige Raster
-
Entwerfen Sie Layouts, die sich flüssig mit dem Browserfenster ändern, während Sie immer noch ein typografisches Raster verwenden.
- CSS-Herausforderungen
-
Trainieren Sie Ihre CSS-Fähigkeiten und finden Sie heraus, wo Sie noch mehr Übung benötigen.
Erweiterte CSS-Themen
- CSS-Transformationen verwenden
-
Anwenden von Rotation, Schrägstellung, Skalierung und Translation mit CSS.
- CSS-Übergänge
-
CSS-Übergänge bieten eine Möglichkeit, Änderungen an CSS-Eigenschaften zu animieren, anstatt dass die Änderungen sofort wirksam werden.
- Canvas-Tutorial
-
Lernen Sie, wie Sie Grafiken mit Scripting unter Verwendung des Canvas-Elements zeichnen.
JavaScript-Tutorials
Einführung in JavaScript
- Dynamisches Scripting mit JavaScript
-
In diesem Modul setzen wir unsere Abdeckung aller grundlegenden JavaScript-Funktionen fort und richten unsere Aufmerksamkeit auf häufig verwendete Arten von Codeblöcken wie bedingte Anweisungen, Schleifen, Funktionen und Ereignisse. Sie haben diese Dinge bereits flüchtig im Kurs gesehen – 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, JavaScript zu lernen. Es ist interaktiv und Sie können es mit Ihren Freunden machen.
- freeCodeCamp
-
FreeCodeCamp lehrt eine Vielzahl von Sprachen und Frameworks für die Webentwicklung. Es hat auch ein Forum, eine Internet-Radiostation und einen Blog.
Themen der mittleren JavaScript-Stufe
- Einführung in JavaScript-Objekte
-
In JavaScript sind die meisten Dinge Objekte, von grundlegenden JavaScript-Funktionen wie Strings und Arrays bis 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 Ihr Wissen über die Sprache vertiefen und effizienteren Code schreiben möchten, daher haben wir dieses Modul eingerichtet, um Ihnen zu helfen. Hier lehren wir Objekt-Theorie und Syntax im Detail, schauen, wie man eigene Objekte erstellt und erklären, was JSON-Daten sind und wie man mit ihnen arbeitet.
- Clientseitige Web-APIs
-
Beim Schreiben von clientseitigem JavaScript für Websites oder Anwendungen werden Sie nicht weit kommen, bevor Sie anfangen, APIs zu verwenden — Schnittstellen zur Manipulation verschiedener Aspekte des Browsers und des Betriebssystems, auf dem die Site läuft, oder sogar Daten von anderen Websites oder Diensten. In diesem Modul werden wir untersuchen, was APIs sind und wie man einige der häufigsten APIs verwendet, denen Sie oft in Ihrer Entwicklungsarbeit begegnen werden.
- Eloquent JavaScript
-
Ein umfassender Leitfaden zu mittleren und fortgeschrittenen JavaScript-Methoden.
- Speaking JavaScript
-
Für Programmierer, die JavaScript schnell und richtig lernen wollen, und für JavaScript-Programmierer, die ihre Fähigkeiten vertiefen und/oder spezifische 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.
Erweiterte JavaScript-Themen
- JavaScript-Leitfaden
-
Ein umfassender, regelmäßig aktualisierter Leitfaden zu JavaScript für alle Lernstufen, von Anfänger bis Fortgeschrittene.
- You Don't Know JS
-
Eine Buchreihe, die tief in die Kernmechanismen der JavaScript-Sprache eintaucht.
- JavaScript-Garten
-
Dokumentation der eigenartigsten Teile von JavaScript.
- Exploring ES6
-
Zuverlässige und tiefgehende Informationen über ECMAScript 2015.
- JavaScript-Muster
-
Eine Sammlung von JavaScript-Mustern und Anti-Mustern, die Funktionsmuster, jQuery-Muster, jQuery-Plugin-Muster, Design-Muster, allgemeine Muster, Literal- und Konstruktor-Muster, Objekt-Erstellungsmuster, Code-Wiederverwendungs-Muster, DOM abdeckt.
- Wie Browser funktionieren
-
Ein ausführlicher Forschungsartikel, der verschiedene moderne Browser, ihre Engines, die Seitendarstellung usw. beschreibt.
- JavaScript-Videos
-
Eine Sammlung von JavaScript-Videos, die Sehenswert sind.
Erweiterungsentwicklung
- WebExtensions
-
WebExtensions ist ein systemübergreifendes System zur Entwicklung von Browser-Erweiterungen. Zu einem großen Teil ist das System mit der von Google Chrome und Opera unterstützten Erweiterungs-API kompatibel. In diesen Browsern geschriebene Erweiterungen laufen in den meisten Fällen in Firefox oder im Microsoft Edge mit nur wenigen Änderungen. Die API ist auch vollständig kompatibel mit Multiprozess-Firefox.