Webdesign lernen: Tipps & Praxis

Ein praxisnahes Tutorial, wie du mit CSS Grid moderne, flexible und responsive Layouts aufbaust – einfach erklärt mit Beispielen für Anfänger.

Mit CSS Flexbox kannst du Layouts flexibel, modern und responsive gestalten. Du lernst hier, wie Elemente im Container angeordnet, ausgerichtet und mit Abstand versehen werden.

Ein praxisnahes Tutorial, wie du ein WordPress Child Theme anlegst, aktivierst und sicher für eigene Anpassungen nutzt – ohne Änderungen im Haupttheme zu verlieren.

Ein praxisnahes Tutorial, wie du mit einem Farbpalette Generator harmonische Farbpaletten für Webdesign erstellst – einfach erklärt für UI und Design.

Ein praktisches Tool, mit dem du das Kontrastverhältnis von Hintergrund- und Vordergrundfarben prüfst – ideal für UI, Webdesign und barrierefreie Gestaltung.

Ein praxisnahes Tutorial, wie du ein Cookie-Banner mit HTML, CSS und JavaScript selbst umsetzt – einfach erklärt mit Beispielen für Anfänger und WordPress.

Mit meinem kostenlosen QR-Code Generator kannst du schnell und einfach individuelle QR-Codes aus Texten oder URLs erstellen. QR-Code Generator auf deiner eigenen Webseite

Ein einfaches Lernbeispiel, wie du in WordPress zwischen Hell- und Dunkel-Theme umschaltest. Unten findest du Beispiel-Code für Button, Styles und Skript – zum Anschauen und Kopieren.

Mit unserem kostenlosen Back to Top Button Generator für WordPress kannst du ganz einfach deinen eigenen Scroll-Button konfigurieren, individuell anpassen …

Hier kannst du beliebigen HTML-Code eingeben, um ihn in sicheren, escaped HTML-Code umzuwandeln. Das ist hilfreich, wenn du HTML-Code in Beiträgen, Tutorials oder auf Webseiten zeigen möchtest …

Schritt für Schritt Tutorial. In diesem Tutorial erfährst du, wie du ein minimalistisches eigenes WordPress Theme erstellst. Du bekommst das Grundgerüst mit den wichtigsten Dateien, Codeschnipseln & guten Tipps zum Start.

Ein einfaches Beispiel, wie du ein Video als Hintergrund im Header deiner Webseite einsetzt und für Mobilgeräte ein statisches Bild anzeigst. HTML & PHP: Header mit Video und Bild für Mobile

Sticky Header erstellen – Tutorial. In diesem Tutorial lernst du, wie du mit CSS und JavaScript einen fixierten Header erstellst, der beim Scrollen immer oben am Bildschirm bleibt.

Dieses Tutorial zeigt dir, wie du einen „Back to Top“ Button erstellst, der beim Scrollen erscheint und dich mit einem Klick sanft zum Seitenanfang bringt. Du erhältst Varianten mit reinem JavaScript und mit jQuery, inkl. HTML und CSS.

Vielseitige Icon-Kollektion – Symbole für jede Kategorie. Über 250 sorgfältig ausgewählte Symbole, perfekt geordnet in 11 thematische Kategorien wie Technologie, Internet, Bildung, Business und Social Media.

Pfeile, Formen & Symbole. HTML Sonderzeichen, speziell zugeschnitten für Webdesigner und Entwickler. Übersichtliche Sammlung von häufig genutzten Zeichen, inklusive Pfeilen, geometrischen Formen, Symbolen und Web-Icons.

Lazy Loading für Bilder und Videos – Ladezeiten optimieren. Lazy Loading bedeutet, dass Medien wie Bilder oder Videos erst dann geladen werden, wenn sie im sichtbaren Bereich des Nutzers (Viewport) erscheinen.

Keyframe-Animationen mit CSS & JavaScript. In diesem Tutorial lernst du, wie du mit CSS @keyframes komplexe und wiederholte Animationen erstellst. Hier sind Beispiele mit Erklärungen und praktischer Demo.

Pfannkuchen-Rezept für deine Webdesign-Auszeit. Du arbeitest im Home-Office, designst Webseiten und programmierst? Manchmal braucht man einfach eine kleine Pause, um den Kopf frei zu bekommen.

Eine schnelle Webseite ist entscheidend für bessere Nutzererfahrung, SEO und Conversion. Zwei wichtige Techniken sind Caching und Minification. Dieses Tutorial erklärt die Grundlagen und gibt Tipps zu Tools und Plugins.

Alle wichtigen Zeichen und Tastenkombinationen für Windows und Mac – einfach erklärt. Auf dieser Seite bekommst du eine einfache, übersichtliche Anleitung, wie du Sonderzeichen unter Windows und auf dem Mac eingibst.

Responsive Webdesign sorgt dafür, dass deine Webseite auf verschiedenen Geräten – vom Smartphone über Tablets bis zum Desktop – optimal dargestellt wird. So passt sich deine Seite jedem Gerät an.

Ausführliche Erklärung für Anfänger. Eine HTML-Tabelle ist ein Raster aus Zeilen und Spalten, mit dem du strukturierte Daten übersichtlich darstellen kannst. Dabei kommen verschiedene HTML-Elemente und Attribute zum Einsatz.

Dieses Beispiel zeigt ein Contact Form 7 Formular mit drei verschiedenen SPAM-Schutzmethoden: Unsichtbare Checkbox („subscribe“), Sichtbare Checkbox („bot-trick“), Time Trap. Zusammenfassung und Tipps

Kommentare sind kurze Hinweise im Quellcode, die Entwicklern Kontext, Absichten und Hinweise geben. In diesem Tutorial lernst du die Syntax für HTML, CSS/SCSS, JavaScript (inkl. JSDoc), PHP (PHPDoc) und weitere

Bild hochgeladen, Prompt (am besten auf Englisch) eingegeben und nach ~2 Minuten das fertige, teilanimierte Video erhalten. Schnell, simpel und perfekt für Posts, Stories und Grüße.