Rainpearl Learn ist eine Seite für alle, die mit HTML, CSS und PHP einsteigen oder nach einer Pause wieder anfangen möchten. Hier geht es nicht um trockene Theorie, sondern um verständliche Erklärungen, echte Beispiele und einen Blick hinter die Kulissen des Webdesigns.
Das Ziel ist einfach: Du sollst verstehen, was du tust – und warum es funktioniert. Denn wer die Zusammenhänge kennt, kommt auch dann weiter, wenn etwas nicht auf Anhieb klappt. Deshalb werden hier nicht nur Lösungen gezeigt, sondern auch erklärt, wie man auf sie kommt.
Rainpearl Learn ist kein klassisches Tutorial, das man einmal durchklickt und dann abhakt. Es ist eher ein offenes Nachschlagewerk, das wächst – mit echten Gedanken, echten Aha-Momenten und echten Stolpersteinen. Genau das kann hilfreich sein, wenn man selbst am Anfang steht.
Wie das Web funktioniert
Wenn du eine Webadresse in den Browser eingibst, läuft im Hintergrund ein einfacher Ablauf ab: Der Browser schickt eine Anfrage an einen Server irgendwo im Internet. Der Server antwortet – er schickt eine HTML-Datei zurück. Der Browser liest diese Datei und zeigt sie als Seite an.
CSS und JavaScript, die in der HTML-Datei verknüpft sind, werden dabei ebenfalls vom Server geholt und vom Browser verarbeitet. PHP läuft hingegen ausschließlich auf dem Server – der Browser bekommt davon nichts mit. Er sieht nur das fertige Ergebnis, das PHP erzeugt hat.
Das war es im Kern. Alles andere baut auf diesem einfachen Prinzip auf.
Werkzeuge
Bevor es losgeht, braucht man eine kleine Arbeitsumgebung. Die gute Nachricht: Alle notwendigen Programme sind kostenlos und schnell eingerichtet.
Zum Schreiben von HTML, CSS und PHP reicht ein guter Code-Editor – einer, der Syntax farblich hervorhebt, automatisch einrückt und einem das Arbeiten angenehm macht. Für das lokale Testen von PHP-Dateien braucht man außerdem einen Testserver, der den eigenen Rechner kurzerhand in eine Webumgebung verwandelt. Und wer eigene Bilder, Icons oder kleine Grafiken erstellen möchte, ist mit einem einfachen Bildbearbeitungsprogramm gut bedient.
Welche Programme das konkret sind, wie man sie einrichtet und wofür man sie im Alltag einsetzt, erklärt die Werkzeuge-Seite im Detail.
Empfohlene Reihenfolge
Die Inhalte hier sind bewusst in einer bestimmten Reihenfolge aufgebaut – weil jede Ebene auf der vorherigen aufbaut:
HTML → CSS → JavaScript → PHP
HTML ist die Grundstruktur – ohne sie gibt es keine Seite. CSS bestimmt, wie diese Struktur aussieht. JavaScript macht die Seite interaktiv, direkt im Browser. PHP kommt zuletzt, weil es auf dem Server läuft und Vorkenntnisse in den anderen drei voraussetzt.
Wer diese Reihenfolge einhält, wird schneller Fortschritte machen und weniger Fragen offen lassen.
Was du hier lernen kannst
Am Ende dieser Seite solltest du in der Lage sein, eine eigene Webseite von Grund auf zu bauen – mit sauberem HTML-Gerüst, eigenem CSS-Styling, einfachen JavaScript-Interaktionen und dynamischen PHP-Elementen. Konkret bedeutet das:
- Du verstehst, wie HTML-Seiten aufgebaut sind und kannst eigene Strukturen erstellen.
- Du gestaltest Layouts mit CSS – von Schriften über Farben bis zu responsivem Design für verschiedene Bildschirmgrößen.
- Du baust einfache Interaktionen mit JavaScript – zum Beispiel ein aufklappbares Akkordeon oder eine scrollbare Übersicht.
- Du nutzt PHP, um Seiteninhalte dynamisch zu erzeugen oder Dateien einzubinden.
Zusätzlich gibt es Tutorials zu konkreten Beispielen – also einzelne Lösungen für bestimmte Zwecke, die man direkt einsetzen oder nachbauen kann.
Der Browser-Inspektor
Eines der wichtigsten Werkzeuge beim Webdesign kostet nichts und ist schon installiert: der Entwicklungs-Inspektor in jedem modernen Browser. Mit einem Rechtsklick auf eine Webseite und „Element untersuchen" öffnet sich ein mächtiges Fenster mit direktem Zugriff auf den HTML- und CSS-Code der aktuellen Seite.
Man kann live sehen, wie Webseiten aufgebaut sind, CSS-Regeln in Echtzeit ändern, Layout-Probleme nachvollziehen und sogar die JavaScript-Konsole nutzen. Gerade wenn etwas nicht so aussieht wie gewollt, oder wenn man verstehen will, wie eine andere Seite einen bestimmten Effekt umsetzt, ist der Inspektor der direkteste Weg dahin. Es ist wie ein Labor direkt im Browser – und er lohnt sich schon vom ersten Tag an.
Browserkompatibilität – ein Hinweis
Ältere Browser müssen heute nicht mehr aktiv unterstützt werden. Der Anteil der Nutzer, die veraltete Browserversionen verwenden, liegt inzwischen unter einem Prozent – der Aufwand für Fallback-Lösungen steht in keinem vertretbaren Verhältnis zum Nutzen.
Was bedeutet das konkret? Moderne CSS-Eigenschaften funktionierten in älteren Browserversionen schlicht nicht oder nur teilweise. Ein gutes Beispiel ist die gap-Eigenschaft, die Abstände zwischen Elementen in Flexbox- und Grid-Layouts definiert. gap wurde ursprünglich 2017 nur für CSS Grid eingeführt. Die Unterstützung für Flexbox folgte erst 2020 – ab Chrome 84, Firefox 63, Edge 84 und Safari 14.1 (April 2021). Internet Explorer unterstützt gap bis heute in keiner Version.
Ein praktisches Beispiel: Infokarten, die mit gap: 2rem voneinander getrennt werden, hätten in einem Browser vor 2021 – etwa Safari 14 oder Chrome 83 – gar keine Abstände. Die Karten würden direkt aneinanderkleben. Früher musste man solche Abstände umständlich über margin an jedem einzelnen Kind-Element setzen, was bei responsiven Layouts schnell unübersichtlich wurde.
Ähnliches gilt für andere moderne Eigenschaften wie clamp() für flexible Schriftgrößen (vollständig unterstützt ab 2020) oder aspect-ratio (ab 2021). Wer heute mit einem aktuellen Chrome, Firefox, Safari oder Edge arbeitet – und das sind weit über 99 % aller Nutzer – bekommt modernes CSS genau so angezeigt, wie es gedacht ist.