Glückwunsch!

Glückwunsch, das Kino Sternenlicht hat sein neues Aussehen, und du hast die dritte Phase des Lernpfads Webentwicklung abgeschlossen!

Denk daran, wo das Kino angefangen hat: zwei HTML-Seiten, ein Stylesheet, drei Filmkarten und zwei Tabellen. Seitdem ist die Website unter einer eigenen Adresse online gegangen. Ihr Programm wird aus einer Datendatei geladen, Besucher wählen Plätze und buchen sie mit einem Formular, das prüft, was sie eingegeben haben, und die Seite merkt sich ihre Tickets. Und jetzt hat sie ein modernes Aussehen, das auf einem Smartphone genauso funktioniert wie auf einem Computer.

All das hast du selbst gebaut, und du kannst es für jede Website wiederholen: ihre Seiten in HTML schreiben, sie mit CSS oder Tailwind für jeden Bildschirm gestalten, sie mit JavaScript zum Leben erwecken, Daten laden, Formulare prüfen, Dinge im Browser merken und die Website online stellen. So entsteht das Web.

Die neue Version online. Lade sie hoch wie in der Lektion Online stellen, aber vorher mit einem zusätzlichen Schritt. Browser verstehen @import "tailwindcss"; nicht: Bei jedem Ausführen macht Start Coder aus deiner style.css normales CSS. Für deine Website erledigt das die Tailwind-CLI auf deinem Computer, wie du am Ende des Tailwind-Kurses gesehen hast. Sie braucht Node.js. Dein Tailwind-Stylesheet bleibt auf deinem Computer, und die Website bekommt das fertige CSS:

1. Erstelle einen Ordner kino und verschiebe den Ordner deiner Website, kino-sternenlicht, hinein. Speichere aus dem Editor index.html, programm.html, script.js und programm.json in kino-sternenlicht, anstelle der alten Dateien, und style.css in kino.
2. Öffne das Terminal im Ordner kino und führe aus:

   npm install tailwindcss @tailwindcss/cli
   npx @tailwindcss/cli -i style.css -o kino-sternenlicht/style.css --minify

   Der zweite Befehl liest dein Tailwind-Stylesheet, findet die Klassen in den Dateien der Website, auch in script.js, und schreibt das fertige CSS in kino-sternenlicht/style.css. --minify lässt Leerzeichen und Zeilenumbrüche weg, die Datei ist also kleiner und lädt schneller. Führe den Befehl erneut aus, wenn du deine Klassen änderst.
3. Öffne kino-sternenlicht/index.html in deinem Browser und prüfe das Aussehen (das Programm selbst lädt nur von einem Server, wie du aus dem Projekt zum Kinoprogramm weißt). Ziehe dann bei Netlify den Ordner kino-sternenlicht auf die Seite Deploys deines Projekts, wie zuvor. Was npm installiert hat, bleibt in kino: Die Website braucht es nicht.

Öffne dann deine Website auf deinem Smartphone. Diesmal ist sie dafür gemacht.

Wie es weitergeht. Die letzte Phase des Lernpfads ist React, eine JavaScript-Bibliothek, mit der man ganze Apps aus Komponenten baut, Teilen einer Seite, die du einmal schreibst und immer wieder verwendest. Nach dem React-Kurs kommt das Kino ein letztes Mal zurück: Du baust es als React-App neu. Und wenn du zuerst an dieser Version weiterarbeiten möchtest, weißt du alles, was ein Dark Mode braucht: die Variante dark: und den Schalter aus der Lektion Dark Mode, und mit localStorage kann sich der Schalter sogar die Wahl des Besuchers merken.

Bevor du gehst, signiere deine Website, so wie du deine allererste Seite am Anfang des Lernpfads signiert hast.