Plane dein Design

Willkommen zur letzten Lektion des CSS-Kurses! Du kennst jetzt genug CSS, um das Aussehen einer ganzen Webseite allein zu gestalten, und genau das wirst du tun.

Du kannst eine von zwei Seiten gestalten:

• Deine eigene Seite aus dem HTML-Kurs. Wenn du sie am Ende des HTML-Kurses auf deinem Computer gespeichert hast, fügst du ihren Code in der nächsten Übung in den Editor ein. Öffne die Datei index.html in einem Texteditor (Rechtsklick und „Öffnen mit“; ein Doppelklick würde sie im Browser öffnen), markiere den ganzen Code (Strg+A, auf dem Mac Cmd+A) und kopiere ihn (Strg+C, auf dem Mac Cmd+C).
• Unsere fertige Seite eines kleinen Katzenhauses, die du jetzt im Editor und in der Vorschau siehst. Sie hat einen Kopfbereich mit Navigation, ein paar Abschnitte, Karten mit den Katzen und einen Fußbereich, aber noch keine Stile.

Bevor du anfängst, CSS zu schreiben, lohnt sich ein kurzer Plan. Auch Designer machen das: Wenn du ein paar Dinge vorher festlegst, wirkt die ganze Seite einheitlich.

• Farben. Wähle eine Hintergrundfarbe, eine Textfarbe und eine oder zwei Akzentfarben, z. B. für den Kopfbereich, die Überschriften oder die Links. Achte darauf, dass sich der Text deutlich von seinem Hintergrund abhebt: dunkler Text auf hellem Hintergrund oder umgekehrt. Ein einfacher Trick: Wähle einen Farbton in HSL und ändere nur Sättigung und Helligkeit.
• Schrift. Wähle eine Schrift auf Google Fonts. Eine Schrift für die ganze Seite reicht, höchstens zwei: z. B. eine für die Überschriften und eine andere für den Text.
• Layout. Überlege, wie die Teile der Seite angeordnet werden. Zum Beispiel: der Inhalt in einer Spalte in der Mitte der Seite, die Links der Navigation nebeneinander in einer Zeile (Flexbox) und die Karten in einem Grid (CSS Grid).

Der beste Ort für den Plan ist ein Kommentar oben im Stylesheet. Wann immer du zum Code zurückkehrst, siehst du sofort, welche Farben und Schriften die Seite verwendet. Er kann so aussehen:

/*
	Mein Plan
	Farben: Hintergrund #fdf6ec, Text #3d2c2e, Akzent #b8482e
	Schrift: Nunito von Google Fonts, Ersatzschrift sans-serif
	Layout: Inhalt in einer zentrierten Spalte, Links in einer Zeile,
	Katzenkarten in einem Grid
*/

In der nächsten Übung findest du eine Checkliste von allem, was das Stylesheet enthalten muss. Die Prüfungen betrachten nur, welche CSS-Funktionen du verwendest, nie die konkreten Farben, Schriften oder Größen. Wie deine Seite aussieht, bleibt also dir überlassen.

Tipp: Dein Code wird nicht gespeichert, wenn du eine Übung verlässt. Kopiere also vor dem Weitermachen deinen Plan und füge ihn in der nächsten Übung über unseren Beispielplan ein.