Tutorials

Willkommen bei den Rainpearl Learn Tutorials

Im September 2025 habe ich mit diesen Tutorials begonnen. Die Idee entstand, als ein Member der dev community Hilfe bei einem spezifischen Problem benötigte. Ich dachte mir: Warum nicht ausführliche Tutorials daraus machen, die auch anderen helfen können?

Hier findest du nach und nach verschiedene Tutorials zu Webentwicklung, CSS-Tricks, JavaScript-Lösungen und mehr. Weitere Tutorials werden folgen – je nach Inspiration und Hilfegesuchen aus der Community. Wenn du selbst eine Frage oder ein Problem hast, melde dich gerne im Forum!

004 Fotogalerie im Grid-Design mit JavaScript Lightbox

Lerne, wie du eine flexible Fotogalerie im Grid-Design mit einer eleganten Lightbox-Funktion baust! Dieses Tutorial erklärt dir Schritt für Schritt, wie HTML, CSS und JavaScript zusammenspielen – von der dynamischen Bildpfad-Sammlung über das Öffnen und Blättern bis zur Tastatursteuerung. Ideal für Einsteiger, die JavaScript im echten Einsatz verstehen wollen. Exklusiv auf dev-community.de!

zum Tutorial

003 Interaktives Akkordeon mit JavaScript

Lerne, wie du ein vollständig funktionsfähiges Akkordeon mit sanften Animationen selbst programmierst. Verstehe die Logik hinter dem Öffnen und Schließen von Elementen, die Berechnung von Höhen und den Einsatz von requestAnimationFrame für flüssige Übergänge. Perfekt für FAQ-Bereiche, Produktbeschreibungen oder überall, wo du viele Informationen platzsparend und benutzerfreundlich präsentieren möchtest.

zum Tutorial

002 Moderne CSS Transforms - 3D Flip Cards​

Lerne, wie du beeindruckende 3D Flip Cards mit reinem CSS erstellst – ganz ohne JavaScript! Dieses kompakte Tutorial zeigt dir die drei essenziellen CSS-Eigenschaften (perspective, transform-style, backface-visibility) und wie du damit interaktive Portfolio-Karten mit Flip-Effekt entwickelst. Perfekt für Portfolios, Team-Vorstellungen oder Produktpräsentationen. Exklusiv auf dev-community.de!

zum Tutorial

001 Horizontaler Text-Scroll mit optimaler Spaltenaufteilung

Lerne, wie du Text in einer Box mit fester Höhe horizontal scrollbar machst und dabei automatisch in optimale Spalten aufteilst. Eine clevere Kombination aus CSS und JavaScript löst ein Problem, das mit purem CSS nicht machbar ist. Perfekt für mobile Interfaces, Timelines oder Dashboard-Widgets mit begrenztem Platz.

zum Tutorial