Webentwicklungstutorials

Für absolute Anfänger

Erste Schritte mit dem Web

Erste Schritte mit dem Web ist eine prägnante Reihe, die Sie in die Praktiken der Webentwicklung einführt. 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ührungskurs in HTML vermittelt HTML von Grund auf — es sind keine Vorkenntnisse erforderlich. Er bereitet das Terrain, indem Sie sich an wichtige Konzepte und die Syntax gewöhnen, HTML auf Text anwenden, Hyperlinks erstellen und HTML verwenden, um eine Webseite zu strukturieren.

HTML für Anfänger

Ein HTML-Leitfaden für Anfänger, der Erklärungen zu gängigen Tags, einschließlich HTML-Tags, bietet. Er beinhaltet auch eine Schritt-für-Schritt-Anleitung zur Erstellung einer grundlegenden 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 Fokus auf sinnvolles Markup.

Fortgeschrittene HTML-Themen

Webformulare

Formulare sind ein sehr wichtiger Bestandteil des Webs — sie bieten viel von der Funktionalität, die Sie für die Interaktion mit Websites benötigen, wie z.B. Registrierungen und Anmeldungen, Feedback senden, Produkte kaufen und mehr. Dieses Modul hilft Ihnen beim Einstieg in die Erstellung der clientseitigen Teile von Formularen.

Tipps zur Erstellung schnell ladender HTML-Seiten

Optimieren Sie Webseiten, um eine reaktionsschnellere Seite für Besucher zu bieten und die Belastung für Ihren Webserver und Ihre 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 lasse ich meinen Inhalt an einem bestimmten Ort auf dem Bildschirm erscheinen? Wie dekoriere ich meine Webseite mit Hintergrundbildern und -farben?

CSS-Styling-Grundlagen

CSS (Cascading Style Sheets) wird verwendet, um Webseiten zu gestalten und zu layouten — zum Beispiel, um die Schriftart, Farbe, Größe und den Abstand Ihres Inhalts zu ändern, ihn in mehrere Spalten zu teilen oder Animationen und andere dekorative Merkmale hinzuzufügen. Dieses Modul bietet einen sanften Einstieg auf Ihrem Weg zur CSS-Meisterschaft mit den Grundlagen, wie es funktioniert, wie die Syntax aussieht und wie Sie es verwenden können, um HTML zu stylen.

Selektoren

Zielgerichtet HTML-Elemente, einschließlich Zustandselementen, mit CSS ansteuern.

Spezifität

Verstehen des Browser-Algorithmus, um zu bestimmen, welche CSS-Deklarationen auf ein Element angewendet werden, wenn es konkurrierende Deklarationen gibt, mit einem Spezifitäts-Quiz.

Konflikte handhaben

Der Cascade, die Spezifität und die Vererbung steuern die Anwendung von CSS auf HTML und wie Konflikte zwischen Stil-Deklarationen gelöst werden.

CSS-Textstyling

Hier befassen wir uns mit den Grundlagen des Textstylings, einschließlich Schriftart, Fettdruck und Kursivschrift, Linien- und Buchstabensetzung und Schlagschatten sowie anderer Textmerkmale. Wir schließen das Modul ab, indem wir uns ansehen, wie benutzerdefinierte Schriften auf Ihre Seite angewendet werden, sowie das Styling von Listen und Links.

Häufige CSS-Probleme lösen

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

Mittlere CSS-Themen

CSS-Layout

Zu diesem Zeitpunkt haben wir bereits CSS-Grundlagen behandelt, wie man Text stylisiert und wie man die Boxen, in denen Ihr Inhalt enthalten ist, stylt und manipuliert. Jetzt ist es an der Zeit, sich anzusehen, wie Sie Ihre Boxen im Verhältnis zum Viewport und zueinander richtig platzieren. Wir haben die notwendigen Voraussetzungen abgedeckt, um nun tief in das CSS-Layout einzutauchen und uns verschiedene Anzeigeeinstellungen, traditionelle Layout-Methoden mit Float und Positionierung sowie neue Layout-Tools wie Flexbox anzusehen.

CSS-Referenz

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

Flüssige Raster

Erstellen Sie Layouts, die sich fließend mit dem Browserfenster anpassen und dennoch ein typografisches Raster verwenden.

CSS-Herausforderungen

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

Fortgeschrittene CSS-Themen

Verwenden von CSS-Transformierungen

Rotation, Verzerrung, Skalierung und Translation mit CSS anwenden.

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 zeichnen, indem Sie das canvas-Element mit Scripting verwenden.

JavaScript-Tutorials

Einführung in JavaScript

Dynamisches Scripting mit JavaScript

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

Erste Schritte mit JavaScript

Was ist JavaScript und wie kann es Ihnen helfen?

Codecademy

Codecademy ist eine einfache Möglichkeit, die Programmierung in 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, einen Internetradio-Sender und einen Blog.

Mittlere JavaScript-Themen

Einführung in JavaScript-Objekte

In JavaScript sind die meisten Dinge Objekte, von grundlegenden JavaScript-Funktionen wie Strings und Arrays bis hin zu den auf JavaScript aufgebauten Browser-APIs. Sie können sogar Ihre eigenen Objekte erstellen, um verwandte Funktionen und Variablen in effizienten Paketen zu kapseln. Das objektorientierte Wesen 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 bereitgestellt, um Ihnen zu helfen. Hier lehren wir Objekttheorie und -syntax im Detail, zeigen, wie Sie Ihre eigenen Objekte erstellen, und erklären, was JSON-Daten sind und wie Sie mit ihnen arbeiten.

Clientseitige Web-APIs

Beim Schreiben von clientseitigem JavaScript für Websites oder Anwendungen kommen Sie nicht weit, bevor Sie anfangen, APIs zu verwenden — Schnittstellen zur Manipulation verschiedener Aspekte des Browsers und Betriebssystems, auf dem die Website ausgeführt wird, oder sogar Daten von anderen Websites oder Diensten. In diesem Modul werden wir erkunden, was APIs sind, und wie man einige der am häufigsten verwendeten APIs nutzt, denen Sie oft in Ihrer Entwicklungsarbeit begegnen.

Eloquent JavaScript

Ein umfassender Leitfaden zu mittleren und fortgeschrittenen JavaScript-Methoden.

Speaking JavaScript

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

Essential JavaScript Design Patterns

Eine Einführung in wesentliche JavaScript-Designmuster.

JavaScript.info - Das moderne JavaScript-Tutorial

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

Fortgeschrittene JavaScript-Themen

JavaScript-Leitfaden

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

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 tiefgehende Informationen zu ECMAScript 2015.

JavaScript Patterns

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

Wie Browser funktionieren

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

JavaScript-Videos

Eine Sammlung von JavaScript-Videos, die Sie sich ansehen sollten.

Erweiterungsentwicklung

WebExtensions

WebExtensions ist ein plattformübergreifendes System zur Entwicklung von Browser-Add-ons. Das System ist weitgehend kompatibel mit der von Google Chrome und Opera unterstützten Erweiterungs-API. Erweiterungen, die für diese Browser geschrieben wurden, funktionieren in den meisten Fällen auch in Firefox oder Microsoft Edge mit nur wenigen Änderungen. Die API ist auch vollständig kompatibel mit multiprocess Firefox.