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 Einleitung beginnen. Siehe wie das Web funktioniert und lerne die HTML-Grundlagen. Die wichtigesten Werkzeuge die du zum Basteln benötigst sind kostenlos. Die Roadmap zeigt dir den Lernpfad auf.

Was gibts Neues

20.03.2026 - Neuer Artikel: Erste Website bauen

In fünf Schritten entsteht eine vollständige Website: vom HTML-Grundgerüst über ein CSS-Layout mit Sidebar, echten Inhaltskomponenten wie Cards und Links, einer animierten Navigation mit durchdachter Typografie bis hin zum responsiven Design für Tablets und Smartphones.

Jeder Teil baut auf dem vorherigen auf, sodass du am Ende nicht nur eine funktionierende Website hast, sondern auch verstehst, warum sie so aufgebaut ist.

Erste Website bauen

Auf den ersten Blick:...

  • Erste Website bauen

    In fünf Schritten entsteht eine Website: vom Grundgerüst über ein CSS-Layout mit Sidebar, Inhaltskomponenten, animierter Navigation mit durchdachter Typografie bis hin zum responsiven Design.

    Erste Website bauen
  • Roadmap

    Diese Roadmap zeigt dir, wie Rainlearn aufgebaut ist und in welcher Reihenfolge du am besten vorgehst. Du musst dich nicht durch alles auf einmal kämpfen – aber es lohnt sich, den Pfad zu gehen. Jeder Abschnitt baut auf dem vorherigen auf.

    Pfadfinder
  • Tutorial

    Fotogalerie mit JavaScript Lightbox.

    Lerne, wie du eine flexible Fotogalerie mit einer eleganten Lightbox-Funktion baust. Ideal für Einsteiger, die JavaScript im echten Einsatz verstehen wollen.

    zu den Tutorials
  • Entwicklerwerkzeuge

    Die DevTools sind direkt im Browser eingebaut und ein unverzichtbares Hilfsmittel beim Webdesign. Wir schauen uns Schritt für Schritt an was drin steckt – von Bildschirmgrößen testen über den Inspektor bis zur Konsole.

    zum Artikel
  • Google und Co.

    Wie findet Google deine Seite – und was entscheidet darüber, ob sie gefunden wird? Wir schauen uns an wie Suchmaschinen, Meta-Tags, Ladezeiten und Struktur zusammenhängen und was du konkret tun kannst damit deine Seite sichtbar wird.

    zum Artikel
  • 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
  • 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
  • Tutorial

    Interaktives Akkordeon mit Javascript.

    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
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