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!

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