Kontakt
Webdesignstudio WedDesign
Eduard Wischnewski
Am Justusberg 7
41849 Wassenberg
Webdesign lernen: Tutorials & Praxis
Tutorials & Hilfe vom Frontend Developer
Als erfahrener Senior Frontend Developer und Webdesigner teile ich hier mein Wissen und praktische Tipps, um dich Schritt für Schritt zum Webdesign-Profi zu machen. Egal, ob du gerade erst startest oder deine Fähigkeiten erweitern möchtest – bei mir findest du verständliche Lernmaterialien, hilfreiche Anleitungen und direkten Support. Gemeinsam verwandeln wir deine Ideen in ansprechende und moderne Webseiten, die begeistern. Starte jetzt und lerne, wie du Design, Programmierung und Usability perfekt kombinierst!
Theme Umschalten
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.
Back to Top Button Generator
Mit unserem kostenlosen Back to Top Button Generator für WordPress kannst du ganz einfach deinen eigenen Scroll-Button konfigurieren, individuell anpassen …
HTML Escape Generator
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 …
Custom WordPress Theme erstellen
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.
Video im Header erstellen
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
Custom WordPress Theme
n 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. Schritt für Schritt Tutorial.
Tutorial: Sticky Header
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.
Back to Top Button
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
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.
HTML Sonderzeichen Liste
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
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
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.
Kreative Pause
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.
Caching & Minification
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.
Sonderzeichen auf der Tastatur
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
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.
HTML-Tabellen Tutorial
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.
Contact Form 7 Botschutz
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 CSS HTML JS PHP
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
KI Video mit Freepik erstellen
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.