Lektionen
Mit Tailwind gestaltest du eine Seite mit kleinen Klassen direkt im HTML. Du baust eine ganze Webseite für ein Katzenheim, für Smartphones und Computer, hell und dunkel.
Lektionen
Lektion 1
Schalte Tailwind mit @import ein und gestalte Elemente mit Klassen wie text-center und font-bold.
Für die Lektion bekommst du 90 XP
Lektion 2
Wähle Farben aus der Palette wie text-orange-600 und bg-stone-50 und lege Schriftgröße und -stärke fest.
Für die Lektion bekommst du 130 XP
Lektion 3
Füge mit p-6 und mt-4 Padding und Margins hinzu und zentriere eine Karte mit max-w-sm und mx-auto.
Für die Lektion bekommst du 85 XP
Checkpoint
Verwandle ein Pfannkuchenrezept in eine zentrierte weiße Karte mit Farben, gut lesbarem Text und Abständen.
Für die Lektion bekommst du 30 XP
Lektion 5
Gib Karten Rahmen, abgerundete Ecken mit rounded-2xl und Schatten und schneide Bilder mit object-cover zu.
Für die Lektion bekommst du 100 XP
Lektion 6
Gestalte das Layout einer Seite mit flex, justify-between und grid-cols-2 und fixiere eine Kopfzeile mit sticky.
Für die Lektion bekommst du 130 XP
Checkpoint
Baue eine Galerie für einen Fotowettbewerb: Karten in zwei Spalten und ein Abzeichen auf dem Siegerfoto.
Für die Lektion bekommst du 30 XP
Lektion 8
Lass Buttons und Formularfelder mit hover:, focus: und disabled: auf Besucher reagieren.
Für die Lektion bekommst du 95 XP
Lektion 9
Beginne mit dem Layout für das Smartphone und passe es dann mit den Präfixen md: und lg: an breitere Bildschirme an.
Für die Lektion bekommst du 85 XP
Checkpoint
Vollende die Website eines Katzencafés: gestreifte Preisliste, Reservierungsformular und Layout für jeden Bildschirm.
Für die Lektion bekommst du 30 XP
Lektion 11
Gib einer Seite mit dark:-Klassen eine dunkle Version, die ein Button ein- und ausschaltet.
Für die Lektion bekommst du 80 XP
Lektion 12
Füge @theme eigene Farben und Schriftarten hinzu und erstelle mit @apply und @utility neue Klassen.
Für die Lektion bekommst du 95 XP
Lektion 13
Gestalte die Startseite eines Katzenheims aus reinem HTML, für Smartphones und Computer, hell und dunkel.
Für die Lektion bekommst du 110 XP
Mit Tailwind CSS gestaltest du eine Seite mit kleinen Klassen, die du direkt ins HTML schreibst. Der Kurs behandelt Farben und Text, Abstände und Größen, Rahmen und Schatten, Flexbox, Grid und Position, Hover- und Fokuszustände, responsives Design, den Dark Mode und wie du Tailwind an dein eigenes Design anpasst.
Er richtet sich an alle, die HTML und CSS kennen. Du gestaltest eine Rezeptkarte, einen Fotowettbewerb und ein Katzencafé, und im Abschlussprojekt baust du die ganze Startseite eines Katzenheims, von der Kopfzeile bis zur Fußzeile.