Die Preisliste

Zeit für ein weiteres Projekt! In diesem Checkpoint wendest du die letzten beiden Lektionen, Zustände und responsives Design, zusammen mit allem an, was du davor gelernt hast. Wie in den anderen Checkpoints beschreiben die Übungen das Ergebnis, und die Klassen wählst du selbst.

Das Projekt. Café Schnurr ist ein Café, in dem Katzen den Gästen Gesellschaft leisten. In drei Übungen machst du seine Website fertig: eine Preisliste, die sich gut lesen lässt, ein Formular für die Tischreservierung, das auf den Besucher reagiert, und ein Layout für Smartphones und für Computer. Die Seite hat schon ihre Farben, ihre Texte und ein Layout für Smartphones. Wie bisher änderst du nur die Klassen, nicht die Elemente.

Die Preisliste. Jede Zeile der Preisliste (ein li-Element) hat links den Namen eines Getränks oder Kuchens und rechts seinen Preis. Eine lange Liste lässt sich mit Streifen und Linien leichter lesen:

• Die Zeilen wechseln sich ab: Jede zweite Zeile hat einen hellen Hintergrund, die Zeilen dazwischen keinen.
• Eine dünne Linie trennt jede Zeile von der nächsten. Über der ersten Zeile und unter der letzten gibt es keine.
• Der Käsekuchen ist heute ausverkauft: Seine Zeile ist abgeblendet, mit höchstens 60 % Deckkraft, und sein Preis ist durchgestrichen, sein Name aber nicht.

Ein Tipp: Die Streifen und die Linien sollten nicht davon abhängen, welcher Eintrag in welcher Zeile steht. Wenn das Café einen Kuchen hinzufügt oder ein Getränk nicht mehr verkauft, sollen sie sich weiter richtig abwechseln, ohne dass du Klassen änderst. Denk an die Varianten für die Position eines Elements unter seinen Geschwistern.