Kursinhalt

Tailwind CSS für Webentwicklung

1. Einführung und Einrichtung

Was Ist Tailwind CSS?Für Wen Ist der Kurs Geeignet?Installationsmethoden Quiz

2. Kernkonzepte und Grundlegende Gestaltung

Verständnis von Utility-Klassen Anwenden von Utility-Klassen Grundlegendes Styling - Farben Grundlegendes Styling - Rahmen Grundlegendes Styling - Schatten Herausforderung: Grundlegendes Styling Typografie-Dienstprogramme Herausforderung: Anwenden von Typografie-Utilities

3. Grundlegende Komponenten Erstellen

Schaltflächen Herausforderung: Schaltflächen Karten Herausforderung: Karten Formulare Herausforderung: Formulare

4. Layout-Grundlagen

Abstandswerkzeuge Herausforderung: Abstands-Dienstprogramme Flexbox-Dienstprogramme Herausforderung: Flexbox Utilities Raster-Dienstprogramme Herausforderung: Rasterdienstprogramme

5. Reaktionsfähigkeit und Anpassung

Responsives Design Herausforderung: Responsives Design Ändern des Standardthemas Fazit und Nächste Schritte

Herausforderung: Abstands-Dienstprogramme

Aufgabe

Vervollständigen Sie die bereitgestellte HTML-Struktur, indem Sie die fehlenden Tailwind CSS-Klassen gemäß den angegebenen Abstandsanforderungen ausfüllen.

Erstes div: Wenden Sie einen Rand von 2rem (32px) auf allen Seiten und eine Polsterung von 1rem (16px) auf allen Seiten an;
Zweites div: Wenden Sie einen oberen Rand von 1rem (16px) und einen unteren Rand von 2rem (32px) an. Wenden Sie eine Polsterung von 0.5rem (8px) auf allen Seiten an;
Drittes div: Wenden Sie einen rechten Rand von 1.5rem (24px) und einen linken Rand von 0.75rem (12px) an. Wenden Sie eine Polsterung von 1.5rem (24px) auf allen Seiten an.

index.html

Für das erste div verwenden Sie m-8 für den Rand und p-4 für den Abstand.
Für das zweite div verwenden Sie mt-4 mb-8 für den Rand und p-2 für den Abstand.
Für das dritte div verwenden Sie mr-6 ml-3 für den Rand und p-6 für den Abstand.

index.html

War alles klar?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 2

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Kursinhalt

Tailwind CSS für Webentwicklung

1. Einführung und Einrichtung

Was Ist Tailwind CSS?Für Wen Ist der Kurs Geeignet?Installationsmethoden Quiz

2. Kernkonzepte und Grundlegende Gestaltung

3. Grundlegende Komponenten Erstellen

Schaltflächen Herausforderung: Schaltflächen Karten Herausforderung: Karten Formulare Herausforderung: Formulare

4. Layout-Grundlagen

Abstandswerkzeuge Herausforderung: Abstands-Dienstprogramme Flexbox-Dienstprogramme Herausforderung: Flexbox Utilities Raster-Dienstprogramme Herausforderung: Rasterdienstprogramme

5. Reaktionsfähigkeit und Anpassung

Responsives Design Herausforderung: Responsives Design Ändern des Standardthemas Fazit und Nächste Schritte

Herausforderung: Abstands-Dienstprogramme

Aufgabe

Vervollständigen Sie die bereitgestellte HTML-Struktur, indem Sie die fehlenden Tailwind CSS-Klassen gemäß den angegebenen Abstandsanforderungen ausfüllen.

Erstes div: Wenden Sie einen Rand von 2rem (32px) auf allen Seiten und eine Polsterung von 1rem (16px) auf allen Seiten an;
Zweites div: Wenden Sie einen oberen Rand von 1rem (16px) und einen unteren Rand von 2rem (32px) an. Wenden Sie eine Polsterung von 0.5rem (8px) auf allen Seiten an;
Drittes div: Wenden Sie einen rechten Rand von 1.5rem (24px) und einen linken Rand von 0.75rem (12px) an. Wenden Sie eine Polsterung von 1.5rem (24px) auf allen Seiten an.

index.html

Für das erste div verwenden Sie m-8 für den Rand und p-4 für den Abstand.
Für das zweite div verwenden Sie mt-4 mb-8 für den Rand und p-2 für den Abstand.
Für das dritte div verwenden Sie mr-6 ml-3 für den Rand und p-6 für den Abstand.

index.html

War alles klar?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 2