Die richtige Größe

Zuletzt die Größen. Auf einem breiten Bildschirm zieht sich die Karte jetzt über die ganze Seite, und die Zeilen der Zubereitung sind lang und schwer zu verfolgen. Probiere die Schaltfläche 1280 px in der Leiste Vorschaubreite.

• Die Karte ist nie breiter als 448 px, und auf breiten Bildschirmen steht sie in der Mitte der Seite. Auf einem Smartphone passt sie auf den Bildschirm: Probiere 375 px.
• Der Pfannkuchen sitzt in der Mitte eines Quadrats, 64 × 64 px, in der Honigfarbe des Logos der Rezeptseite, #f8d78b. Die Palette hat diese Farbe nicht. Das Quadrat ist 16 px über der Beschriftung.

Ein Tipp: In der Lektion über Abstände und Größen hast du eine Pfote in die Mitte eines quadratischen Kastens gesetzt. Derselbe Trick funktioniert für den Pfannkuchen.

Das ist die ganze Karte. Mit drei Lektionen im Rücken hast du aus schlichtem HTML ein fertiges Design gemacht: Farben und Schriften, Abstände, die alles zusammenhalten, und Größen, die auf einem Smartphone und auf einem großen Bildschirm funktionieren. In der nächsten Lektion, Rahmen, Schatten und Bilder, lernst du, solchen Karten abgerundete Ecken, einen Schatten und ein Foto zu geben.