Grundlagen

Während des Projekts lernst du HTML, CSS und JavaScript kennen. Damit du sie gut nutzen kannst, verlinke ich dir zu jedem Schritt die Grundlagen aus dem Lernpfad Webentwicklung. Dort steht ausführlich, was hier nur kurz vorkommt – mit eigenen Aufgaben und Selbsttests.

Zwei Orte zum Arbeiten

Im Projekt arbeitest du abwechselnd an zwei Stellen. Das ist Absicht:

Wo	Wofür
Der Übungsbereich hier im Buch	zum Zusehen und Ausprobieren. Jeder Schritt zeigt darin, wie etwas gemacht sein könnte. Du kannst herumändern; kaputt geht nichts, und beim Neuladen ist alles wie vorher.
Dein Editor auf dem Rechner	zum Bauen. Dort entsteht deine eigene Seite aus mehreren Dateien – und die bleibt.

So sieht der Übungsbereich aus

Links die Vorschau, rechts der Quelltext. Die Vorschau aktualisiert sich, sobald du etwas änderst.

<h1>Meine erste Webseite</h1> <p>Willkommen auf meiner Webseite!</p>

html, body { background: darkslategray; color: darkseagreen; padding: 16px; } h1 { color: darksalmon; }

🖊️ Ändere „Meine erste Webseite" in „Die beste Webseite" und schau, was passiert. Danach dreh an den Farben: darksalmon, gold, hotpink – es gibt 148 Farbnamen.

Der Übungsbereich kennt eine Seite. Dein Projekt besteht aber aus mehreren Dateien: einer Startseite, Unterseiten, einer CSS-Datei, Bildern.

Deshalb kannst du hier zwar jede einzelne Technik ausprobieren – das Zusammenspiel mehrerer Dateien siehst du erst in deinem eigenen Editor. Und genau das ist der eigentliche Sprung in diesem Projekt.

Was du wo nachschlagen kannst

Thema	Im Lernpfad
Grundgerüst, Überschriften, Absätze	HTML: Inhalte auszeichnen
Listen, Tabellen, Links, Bilder	Listen und Tabellen, Links und Bilder
Farben, Schrift, Abstände, Layout	CSS: gestalten
Bilder, Musik und Rechte	Urheberrecht und Lizenzen
Was beim Veröffentlichen gilt	Impressum und Datenschutz