Rainpearl Logo

Willkommen auf deiner Lernseite

Rainlearn ist eine Plattform für alle, die HTML, CSS, Javascript und PHP lernen oder nach einer Pause wieder einsteigen möchten. Statt trockener Theorie stehen verständliche Erklärungen, echte Beispiele und praktische Einblicke ins Webdesign im Mittelpunkt. Ziel ist es, nicht nur Lösungen zu zeigen, sondern auch die Zusammenhänge dahinter verständlich zu machen. So wächst mit der Zeit ein offenes Nachschlagewerk, das beim Lernen unterstützt und zum eigenen Ausprobieren einlädt.

Wenn du neu bist, solltest du am besten mit der Einführung beginnen. Siehe wie das Web funktioniert und lerne die HTML-Grundlagen. Die wichtigesten Werkzeuge die du zum Basteln benötigst sind kostenlos.

Was gibts Neues

03.02.2026 - Neues Tutorial:
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.

zu den Tutorials

Auf den ersten Blick:...

  • HTML Grundlagen

    Sieh dir zum Anfang an, wie ein HTML-Dokument aufgebaut ist. In diesem Abschnitt lernst du die absoluten Grundlagen kennen.

    Jetzt starten
  • Kostenlose Programme

    Um mit HTML, CSS und PHP produktiv zu arbeiten, braucht man gute Werkzeuge. Gerade am Anfang ist es hilfreich, sich eine zuverlässige Umgebung einzurichten, in der man direkt und unkompliziert loslegen kann.

    Werzeuge wählen
  • Texte stylen

    In CSS kannst du das Aussehen von Text ganz gezielt anpassen – nicht nur durch Farben und Größen, sondern auch durch die Form der Buchstaben und mehr

    Wichtigste Eigenschaften
  • Hosting deiner Seite

    Wenn du eine eigene Website starten willst brauchst du ein zuverlässiges Webhosting. Dabei stellt sich oft die Frage: Welcher Anbieter...

    Bedarf abchecken
  • Neues Tutorial

    Interaktives Akkordeon. Lerne, wie du ein Akkordeon mit sanften Animationen selbst programmierst und Inhalte platzsparend präsentierst...

    zu den Tutorials
  • HTML Tags

    Beim Erstellen moderner Webseiten ist es wichtig, auch auf die Struktur und Bedeutung des Inhalts zu achten. Dafür gibt es in HTML5 sogenannte semantische Tags...

    Wissen vertiefen
  • Bilder und Medien

    Webseiten auf verschiedenen Bildschirmgrößen funktionieren lassen (Smartphones, Tablets, große Monitore), responsiv gestalten.

    Medien einbauen
  • CSS Grid

    CSS Grid ist ein leistungsstarkes Layout-System, das es ermöglicht, Webseiteninhalte in einem zweidimensionalen Raster anzuordnen.

    komplexe Layouts erstellen
  • CSS auslagern

    Wenn du Webseiten gestaltest, kommt früher oder später die Frage auf: Wie und wo schreibe ich eigentlich mein CSS? – Es gibt drei Möglichkeiten.

    CSS sauber trennen
  • Links & Navigation

    Ein Link ist eine Verbindung von einer Stelle im Web zu einer anderen – egal ob zu einer anderen Seite, einem anderen Abschnitt oder sogar einer externen Website.

    Sprungmarken setzen
  • JavaScript

    JavaScript ist eine Programmiersprache, die direkt im Browser läuft und Webseiten interaktiv macht. Während HTML Strukturen vorgibt und CSS das Design vorgibt, bringt JavaScript die Seite zum Leben.

    ein kleiner Einstieg
  • PHP Serverseitig

    PHP ist eine Programmiersprache, die speziell für Webentwicklung konzipiert wurde. Während HTML im Browser des Nutzers dargestellt wird, läuft PHP auf dem Webserver.

    ein kleiner Einstieg
  • Klassen und IDs

    Klassen und IDs helfen dir dabei, bestimmte Elemente gezielt zu gestalten. Um strukturierte und wiederverwendbare Layouts zu erstellen, ist das Verständnis beider Konzepte ein wichtiger Schritt.

    Klassen nutzen
  • Boxmodell

    In CSS wird jedes HTML-Element als eine Rechteck-Box behandelt – egal ob ein Button, ein Absatz oder ein Bild. Deshalb nennt man das Ganze Box-Model.

    Aufbau des Box-Modells
  • CSS Flexbox

    Die Flexbox ist ein CSS-Modell, das das Positionieren, Ausrichten und Verteilen von HTML-Elementen vereinfacht – die Größe der Elemente können sich dynamisch ändern (bei versch. Bildschirmgrößen).

    ein dynamische Layouts erstellen
  • Learn Nuggets

    Nuggets sind Teilstücke zu Eigenschaften und Techniken, die im Alltag ständig gebraucht werden. Sie behandeln ein Thema, kompakt - direkt auf den Punkt – ideal zum Erweitern der eigenen Werkzeugkiste.

    zu den Goldstücken
Willkommen auf deiner Lernseite

Neu hier? Dann ist die Einführung der richtige Startpunkt. Du erfährst, wie das Web im Hintergrund funktioniert – was passiert, wenn du eine Adresse in den Browser eingibst, und welche Rolle HTML, CSS, JavaScript und PHP dabei spielen. Außerdem bekommst du eine Empfehlung, in welcher Reihenfolge du am besten vorgehst, und erfährst, welche kostenlosen Werkzeuge du für den Einstieg brauchst. Kein Vorwissen nötig.

einfach einsteigen.

Steckst du gerade fest oder hast eine Frage, die du nicht alleine lösen kannst? In der dev-community findest du eine aktive Community aus Entwicklern und Designern, die dir gerne weiterhilft. Egal ob HTML-Anfänger oder fortgeschrittener PHP-Entwickler – hier stellt niemand eine dumme Frage. Schreib einfach rein, beschreib dein Problem so gut du kannst, und erhalte eine Antwort.

zur dev-community