Lerne die Katzen kennen

Zeit für ein weiteres Projekt! Dieser Checkpoint setzt die letzten beiden Lektionen ein: Attribute, Links, Bilder, die Struktur einer Seite und Tabellen, zusammen mit allem, was du davor gelernt hast. Wie im ersten Checkpoint sagen die Anweisungen, was die Seite tun soll, und wie du es schreibst, bleibt dir überlassen: Die Prüfungen betrachten die fertige Seite, nicht deinen Code.

Das Projekt. Das Katzenheim Glückspfote kümmert sich um Katzen, die ein neues Zuhause brauchen, und seine Webseite muss überarbeitet werden. Der Editor enthält die erste Version: eine Überschrift, eine Einleitung und drei Katzen, jede mit ihrem Namen und ein paar Worten über sie. In drei Übungen gibst du den Katzen ihre Bilder, fügst die Besuchszeiten in einer Tabelle hinzu und gibst der Seite schließlich ihre Struktur und Navigationslinks. Im Hintergrund haben wir etwas CSS hinzugefügt, das die Bilder kleiner macht und der Tabelle Rahmen gibt.

Die Aufgabe. Jede Katze bekommt ihr Bild, direkt unter ihrem Namen. Die Bilder liegen auf unserer Website, unter diesen Adressen:

• Mandarine: /learn/tailwind/cat-orange.svg
• Schatten: /learn/tailwind/cat-black.svg
• Flocke: /learn/tailwind/cat-white.svg

Nicht jeder, der die Seite besucht, kann die Bilder sehen, beschreibe also jedes von ihnen mit ein paar Worten.

Auf der Seite sind die Bilder klein. Ein Besucher, der eine Katze besser sehen möchte, klickt auf ihr Bild, und das Bild öffnet sich in voller Größe in einem neuen Tab, damit die Seite des Katzenheims im ersten Tab geöffnet bleibt.