Aktualisiert im Mai 2025. Dieser Kurs enthält jetzt den Coursera Coach! Eine intelligentere Art zu lernen mit interaktiven Unterhaltungen in Echtzeit, die Ihnen helfen, Ihr Wissen zu testen, Ihre Annahmen in Frage zu stellen und Ihr Verständnis zu vertiefen, während Sie im Kurs vorankommen. Dieser Kurs beginnt mit einer Coding Sandbox, um Farben, Typografie, Abstände, Flex-Klassen und mehr in Tailwind CSS zu erforschen und eine solide Grundlage für kleine Projekte zu schaffen.


Tailwind CSS From Scratch - Lernen durch Erstellen von Projekten

Dozent: Packt - Course Instructors
Bei enthalten
Empfohlene Erfahrung
Was Sie lernen werden
Erstellen und gestalten Sie schnelle Layouts und individuelle Stile mit Tailwind CSS.
Verstehen und Beschreiben der Grundlagen und der Einrichtung der Umgebung mit Tailwind CLI.
Effiziente Anwendung von Haltepunktklassen und Medienabfragen.
Kompetenzen, die Sie erwerben
- Kategorie: Webdesign
- Kategorie: Animationen
- Kategorie: Reaktionsfähiges Webdesign
- Kategorie: Entwicklungsumgebung
- Kategorie: HTML und CSS
- Kategorie: Javascript
- Kategorie: Typografie
- Kategorie: Cascading Style Sheets (CSS)
- Kategorie: UI Komponenten
- Kategorie: Bereitstellung von Anwendungen
- Kategorie: Webpack
- Kategorie: Web Design und Entwicklung
Wichtige Details

Zu Ihrem LinkedIn-Profil hinzufügen
6 Aufgaben
Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

In diesem Kurs gibt es 11 Module
In diesem Modul werden wir Sie in den Kurs einführen, indem wir die Ergebnisse und Projektdetails besprechen, erklären, was Tailwind CSS ist, und Sie durch die anfängliche Einrichtung Ihrer Entwicklungsumgebung führen.
Das ist alles enthalten
5 Videos1 Lektüre
In diesem Modul werden wir uns mit den grundlegenden Aspekten von Tailwind CSS beschäftigen und uns dabei auf Utility-First-Design, Farbmanagement, Abstände, Typografie, Layout, Positionierung, Hintergründe, Schatten, Rahmen und Filter konzentrieren.
Das ist alles enthalten
9 Videos
In diesem Modul vertiefen wir die CSS-Grundlagen von Tailwind, indem wir uns mit Interaktivität, Responsive Design mit Media-Queries und fortgeschrittenen Layout-Techniken mit Spalten, Flexbox und Grid beschäftigen. Wir werden auch Übergänge, Animationen und Anpassungsoptionen behandeln.
Das ist alles enthalten
9 Videos1 Aufgabe
In diesem Modul werden wir Ihre Entwicklungsumgebung verbessern, indem wir Ihnen zeigen, wie Sie Tailwind CLI einrichten, Direktiven und Funktionen nutzen und optionale Tools wie Webpack und PostCSS für einen effizienteren Workflow konfigurieren.
Das ist alles enthalten
3 Videos
In diesem Modul werden wir anhand von Miniprojekten praktisch lernen und uns auf die Erstellung nützlicher Komponenten und Layouts mit Tailwind CSS konzentrieren, um Ihre Kenntnisse und Fähigkeiten zu festigen.
Das ist alles enthalten
6 Videos
In diesem Modul führen wir Sie durch die Erstellung einer Clipboard-Website, wobei wir die Einrichtung und Konfiguration, die Gestaltung verschiedener Bereiche und die Bereitstellung des Projekts auf Netlify für das Live-Hosting behandeln.
Das ist alles enthalten
8 Videos1 Aufgabe
In diesem Modul werden wir eine Loopstudios-Website erstellen, wobei wir uns auf die Einrichtung des Projekts, die Gestaltung des Hero-Bereichs, der Merkmale und Kreationen sowie die Sicherstellung der Responsivität vor der Bereitstellung in Vercel konzentrieren werden.
Das ist alles enthalten
9 Videos
In diesem Modul werden wir die Shortly-Website entwickeln und dabei die Einrichtung, die Navigationsleiste, die Hero-Sektion, das Link-Verkürzungsformular und die JavaScript-Validierung abdecken, um ein voll funktionsfähiges und responsives Design zu gewährleisten.
Das ist alles enthalten
9 Videos
In diesem Modul erstellen wir ein Testimonial-Grid-Projekt und konzentrieren uns dabei auf die Einrichtung, die Gestaltung einzelner Testimonial-Boxen, die Anwendung von Grid-Klassen und die Nutzung des Zeilenklammer-Plugins für eine bessere Textverwaltung.
Das ist alles enthalten
6 Videos1 Aufgabe
In diesem Modul werden wir die Fylo-Website erstellen und dabei die Einrichtung, das Header-Design mit Dark Mode, JavaScript für Farbmodi, die Erstellung des Hero-Bereichs, Merkmale, Testimonials und die Smooth-Scroll-Funktionalität behandeln.
Das ist alles enthalten
8 Videos
In diesem Modul werden wir die Bookmark Manager-Website entwickeln, wobei wir uns auf die Einrichtung, die Navigationsleiste, den Heldenbereich, das Layout der Registerkarten, JavaScript für interaktive Elemente und die Gewährleistung eines Responsive Designs konzentrieren werden.
Das ist alles enthalten
10 Videos3 Aufgaben
Dozent

von
Mehr von Mobile und Web-Entwicklung entdecken
Status: Kostenloser TestzeitraumScrimba
Status: Kostenloser Testzeitraum
Warum entscheiden sich Menschen für Coursera für ihre Karriere?





Neue Karrieremöglichkeiten mit Coursera Plus
Unbegrenzter Zugang zu 10,000+ Weltklasse-Kursen, praktischen Projekten und berufsqualifizierenden Zertifikatsprogrammen - alles in Ihrem Abonnement enthalten
Bringen Sie Ihre Karriere mit einem Online-Abschluss voran.
Erwerben Sie einen Abschluss von erstklassigen Universitäten – 100 % online
Schließen Sie sich mehr als 3.400 Unternehmen in aller Welt an, die sich für Coursera for Business entschieden haben.
Schulen Sie Ihre Mitarbeiter*innen, um sich in der digitalen Wirtschaft zu behaupten.
Häufig gestellte Fragen
Ja, Sie können das erste Video in der Vorschau ansehen und den Lehrplan einsehen, bevor Sie sich anmelden. Sie müssen den Kurs kaufen, um auf Inhalte zuzugreifen, die nicht in der Vorschau enthalten sind.
Wenn Sie sich vor dem Beginn der Sitzung in den Kurs einschreiben, haben Sie Zugang zu allen Vorlesungsvideos und Lesestoff für den Kurs. Sobald die Sitzung beginnt, können Sie die Aufgaben einreichen.
Sobald Sie sich angemeldet haben und Ihre Sitzung beginnt, haben Sie Zugang zu allen Videos und anderen Ressourcen, einschließlich der Lektüre und dem Diskussionsforum des Kurses. Sie können Übungsaufgaben ansehen und einreichen und die erforderlichen benoteten Aufgaben erledigen, um eine Note und ein Kurszertifikat zu erhalten.
Weitere Fragen
Finanzielle Unterstützung verfügbar,



