25+ hilfreiche Cheat-Sheets zu HTML, CSS & JavaScript für Anfänger und Profis
Diese Code-Bespiele beschleunigen den Einstieg in die Webprogrammierung sowie unterstützen fotgeschrittene Entwickler bei der Erstellung von Websites.
Wie oft ist es dir schon passiert, dass du dringend eine Code-Zeile für dein Projekt brauchst, um ohne Ablenkung weiter arbeiten zu können? Aber es nimmt Zeit in Anspruch, bis benötigte Schnipsel über Suchmaschinen gefunden wird. Wenn du dich gerade jetzt mit HTML, CSS oder JavaScript beschäftigst, wirst du deine Arbeit unterbrechen müssen, bis du fündig wirst.
Damit du dir zeitintensive Suche ersparst, haben wir uns Mühe gegeben, eine All-in-One-Liste mit Spickzetteln für HTML, CSS und JS zusammenzustellen. Wähle einfach das benötigte Cheat-Sheet für dein aktuelles Projekt aus und setze deine Arbeit fort. Hoffentlich erweisen sich Sheets für dich als nützlich!
Code-Beispiele für HTML
Verwende die unten aufgeführten Cheat-Sheets zu HTML, um dir das Leben leichter zu machen und deinen Workflow zu optimieren. Beispiele aus dieser Liste eignen sich sowohl für erfahrene Webentwickler als auch für Anfänger. Diese Cheat-Sheets verhelfen dir zur verbesserten Effizienz.
Cheat-Sheet zu HTML (Mit neuen HTML5 Tags)
Dieses spezielle HTML-Cheat-Sheet verfügt über alle wichtigen Attribute für Listen, Formulare, Textformatierung und Dokumentstruktur. Es hilft dir, eine perfekte Struktur für deine neue Website zu erstellen.
Hier ist ein großartiges Beispiel dafür, wie ein interaktives Cheat-Sheet präsentiert werden kann. Es enthält eine vollständige Liste aller HTML-Elemente mit Beschreibungen, Beispielen und mit der Live-Vorschau. Alle HTML-Tags sind alphabetisch oder nach Kategorien angeordnet. Außerdem steht es als PDF zum Download bereit.
Hier ist eine vollständige Liste der HTML5-Elemente mit Beschreibungen, wofür jedes davon verwendet werden kann. Es gibt sowohl neue HTML5-Tags als auch alte Tags, die nicht unterstützt werden.
Cheat-Sheet zu HTML: Der einfache Guide für HTML
Das HTML-Cheat-Sheet eignet sich besonders gut für User, die HTML-Neulinge sind und Fortschritte beim Lernen machen möchten. Es enthält detailliertes Material, das die Funktionsweise von einzelnen Tags erklärt. Das hilft dir, eine umfassende Ressource für HTML zu erstellen und Mechanismen zu verstehen, die hinter dem Code stecken.
Cheat-Sheet zu HTML bei OverAPI.com
Dieses originelle HTML-Сheat-Sheet ist sehr einfach und leicht verständlich. Es enthält zahlreiche Elemente wie einfache Tags, Formulare, Tabellen, Formatierung und HTTP-Status. Klicke Elemente an, um zur nächsten Seite mit Beschreibungen und Beispielen zu gelangen.
HTML-Cheat-Sheet für Einsteiger
Hier ist eine weitere nützliche Ressource für Anfänger. Dises Cheat-Sheet enthält grundlegende Informationen zu Dokumenten, Struktur, Objekten, Rahmen, Listen, Tabellen, Links und Bildattributen sowie Beispiele.
Das nächste HTML-Cheat-Sheet ist deinen Blick wert, wenn du dich für die Informationspräsentation mit Hilfe von Infografiken begeisterst. Hier findest du Canvas-Element, 2D-Kontext, Farben, Stile, Schatten, Textrechtecke, Transformation, Linienstil und Pixelmanipulation.
Das interaktive HTML-Cheat-Sheet verfügt über Entwicklertools, hilfreiche Beispielcodes, Markup-Generatoren und vieles mehr. Alle Informationen sind auf einer Seite organisiert.
Cheat-Sheet-Infografik zu HTML und CSS
Diese Infografiken wurden von BlueHost erstellt. Das Cheat-Sheet enthält alles, was du über HTML und CSS wissen musst, um bestimmte Elemente durch die Reduzierung von HTTP-Anfragen schneller zu ändern.
Dieses übersichtliche Cheat-Sheet stellt viele HTML5-Tags und deren Bedeutungen dar.
Periodische Tabelle der HTML5-Elemente
Die Tabelle enthält alle in der HTML5-Spezifikation aufgeführten Elemente, die nach dem Inhaltsmodell (Elementtyp) gruppiert sind. Rote Markierung steht für komplexe Anforderungen.
CSS-Sheet-Beispiele
Cascading Style Sheets können auf jedes XML-Dokument angewendet werden. Es gibt eine so große Anzahl von CSS-Eigenschaften, so dass es sogar für einen erfahrenen Webdesigner schwierig sein kann, sie alle im Kopf zu behalten. Deshalb erfreuen sich CSS-Cheat-Sheets bei Entwicklern immer größerer Beliebtheit. Nutze die folgenden vertrauenswürdigen Ressourcen, um deine Produktivität zu erhöhen.
Das CSS-Cheat-Sheet enthält eine Reihe von CSS-Eigenschaften und -Werten mit entsprechenden Beschreibungen. Das Dokument ist zum Download verfügbar.
Das ist ein ultimatives Cheat-Sheet zu CSS-Grid, mit dem du beliebig viele Grids (Spalten und Zeilen) jeder Größe erstellen kannst.
Ultimatives Flexbox-Cheat-Sheet
Alle Elemente, die in diesem Cheat-Sheet enthalten sind, kommen mit geeigneten Beispielen. Falls eines der aufgeführten Beispiele nicht funktioniert, stelle sicher, dass dein Webbrowser auf die neueste Version aktualisiert ist.
CSS 3, Cheat-Sheet zu Media Queries
Dieses CSS-Cheat-Sheet hat als Ziel, dir mit Medienabfragen zu helfen. Probiere es einfach aus!
Das CSS-Cheat-Sheet liefert eine Vielzahl von Beispielcodes, um Elemente zu manipulieren, wie z.B. Code für box-sizing, Hinzufügen des Schatteneffekts zum Text, Keyframe-Animationen, Gradienten, Transformationen, etc. Es gibt auch Live-Demos und Informationen zur Browserunterstützung.
Cheat-Sheet zu Responsive Webdesign
Mit diesem CSS-Cheat-Sheet hast du keine Schwierigkeiten mit der Anpassung von Breakpoints im Responsive Design. Wenn du die richtigen Breakpoint-Dimensionen wissen möchtest, brauchst du nicht mehr jedes Mal zu googlen. Benutze einfach dieses Cheat-Sheet, um diese Daten vor Augen zu halten.
CSS3-Cheat-Sheet zu Animationen
Das CSS-Cheat-Sheet enthält eine Reihe von Presets und Plug-and-Play-Animationen für dein nächstes Website-Projekt. Füge einfach das Stylesheet in deine Website ein und du siehst dir die Ergebnisse sofort an. Es ist wirklich einfach und zeitsparend.
Es gibt 3 Hauptabschnitte im Cheat-Sheet - Layout-Mechanik, Zentrierelemente und Code-Beispiele. Das Cheat-Sheet befindet sich auf einer einzigen Seite und ist im HTML-Format verfügbar.
Mega CSS3-Cheat-Sheet (Infografik)
Dieses CSS-Cheat-Sheet steht als druckfähige Version zur Verfügung. Es enthält eine vollständige Auflistung aller Elemente und Eigenschaften sowie einige lang erwartete Neuheiten.
In diesem Guide wird erläutert, wie du flexible Boxen auf der Website implementierst, freien Raum zwischen Elementen im Container ausrichtest und verteilst, wenn auch ihre Größe dynamisch oder unbekannt ist.
Umfassendes CSS-Cheat-Sheet + PDF
Das Cheat-Sheet ist für Anfänger gedacht, die nach Möglichkeiten suchen, sich alle Elemente und CSS-Tags zu merken.
Unter dem Link findest du einen kurzen Spickzettel im JPEG-Format. Es zeigt Parameter der häufig verwendeten Eigenschaften wie Rand, Schriftart, Hintergrund, Farbe u.a.
Cheat-Sheets zu JavaScript
Neben HTML und CSS ist JavaScript eine der wichtigsten Technologien für die Erstellung interaktiver Websites und Online-Anwendungen. Alle modernen Webbrowser unterstützen es, ohne dass zusätzliche Plugins eingesetzt werden müssen. Nachfolgend findest du einige JavaScript-Cheat-Sheets und Infografiken, die sich gut insbesondere für diejenigen eignen, die sich erst in die Programmierung in JavaScript einarbeiten.
Dies ist ein grundlegendes interaktives JavaScript-Cheat-Sheet mit hilfreichen Codebeispielen für JavaScript auf einer einzigen Seite präsentiert. Es enthält Codezeilen für Variablen, Objekte, Schleifen, Datentypen, Ereignisse, Zeichenketten und andere Kategorien. Kopiere einfach notwendige Codeschnipsel und füge diese in dein eigenes JavaScript-Projekt ein.
Als nächstes kommt ein Mind-Map-Diagramm, das die JavaScript-Syntax zusammenfasst und praktische Beispiele enthält.
Das Cheat-Sheet von Oscar Otero enthält Funktionen und Eigenschaften von jQuery, einschließlich Selektoren, Attribute, Ereignisse und Effekte. Mit einem Klick auf jedes Element wirst du zur neuen Seite mit Erklärungen und Beispielen weitergeleitet. 
jQuery-Selektoren gehören zu den bekanntesten Aspekten der jQuery-Bibliothek. Sie verwenden die bekannte CSS-Syntax, damit Entwickler Seitenelemente schnell identifizieren können, die für die Arbeit mit jQuery-Methoden geeignet sind. jQuery-Selektoren sind der Schlüssel zur effizienten Nutzung der jQuery-Bibliothek.
Dieses Cheat-Sheet ist ein Versuch, die NASA-Codierungsrichtlinien auf JavaScript- und HTML-Apps anzuwenden, um deren Leistung und Zuverlässigkeit zu erhöhen. Da die Nachfrage nach webbasierten Anwendungen schnell wächst, ist es sinnvoll, alle wichtigen Standards zusammenzufassen.
Von diesem Cheat-Sheet zu JavaScript profitieren in erster Linien diejenigen User, die gerade erst ins Programmieren einsteigen. Es bietet sowohl Basis-Elemente als auch erweiterte Details zu JavaScript. Zudem gibt es Antworten auf einige der grundlegenden Fragen, die normalerweise Anfänger haben.
Wenn dir diese Liste gefallen hat, dann speichere sie mit Lesezeichen für weitere Empfehlungen. Du kannst jetzt viel produktiver arbeiten, weil du notwendige Cheat-Sheets zu HTML-, CSS- und JavaScript zur Hand hast.
Die besten Cheat-Sheets hat Katherine Crayon aufgespürt. Dieselbe Liste auf Englisch ist bei MonsterPost verfügbar.
Lies mehr zum Thema
Kostenlos: 70+ Responsive HTML5 Website-Vorlagen
Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing über E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und geprüftem Expertenwissen in diesen Bereichen vertraut zu machen. Olga auf Facebook.