Der Text

Zeit für ein kleines Projekt! In diesem Checkpoint gestaltest du eine ganze Seite allein, mit dem, was du in den ersten drei Lektionen gelernt hast: Farben, Text, Abstände und Größen.

Die Übungen hier sind ein wenig anders als bisher. Sie beschreiben, wie die Seite aussehen soll, nicht, welche Klassen du verwenden sollst. Meist führen mehrere Wege zum Ziel, wähle also die Klassen, die für dich Sinn ergeben: Die Prüfungen sehen sich das Ergebnis in der Vorschau an, nicht deine Klassen. Wenn du nicht weiterkommst, sieh in der Lektion nach, in der du gelernt hast, was du brauchst.

Das Projekt. Eine Rezeptseite hat dich um eine Karte mit ihrem Rezept für Pfannkuchen gebeten. In drei Übungen gestaltest du ihren Text, gibst ihr Platz und legst ihre Größen fest. Jede Übung setzt dort an, wo die vorige aufgehört hat: Der Editor startet mit einer fertigen Seite aus dem vorigen Schritt, deren Klassen von deinen abweichen können. Das ist in Ordnung. Ändere nur die Klassen, nicht die Elemente: Die Prüfungen suchen nach ihnen.

Am Ende sieht die Karte so aus:

Der Text. In dieser Übung bekommt der Text seine Farben und sein Aussehen:

• Die Seite hat einen hellen Hintergrund mit einem Hauch von Farbe, etwa amber-50, und dunkelgrauen Text statt Schwarz.
• Der Titel ist groß (mindestens 36 px), fett, in einer Serifenschrift und in einer eigenen Farbe, zum Beispiel einem dunklen Orange oder Amber.
• Die Zeile über dem Titel ist eine kleine Beschriftung: höchstens 14 px, in Großbuchstaben, mit mehr Abstand zwischen den Buchstaben und in einem helleren Grau als der Text.
• Die Überschriften Zutaten und Zubereitung sind größer als der Text (mindestens 20 px) und fett.
• Die Zutaten haben Aufzählungspunkte davor.

Ein Tipp: Ohne Klassen hat die Liste keine Aufzählungspunkte. Denk an die erste Lektion: Preflight hat sie entfernt, und die Punkte müssen innerhalb der Einträge stehen, damit man sie sieht.