Part 9: Tailwind CSS Debugging HTML Grid vs Columns TailwindUI Issue
In diesem YouTube-Video zeigt euch Roland, wie er Tailwind CSS Testimonials in ein Sulu CMS mit dem Tailwind UI Kit implementiert. Wenn du meinen Kanal noch nicht kennst, klicke bitte auf die Glocke und folge uns. Hier erwarten dich regelmäßige Live-Coding-Tutorials jeden Montag und Freitag. Wir starten auf der Tailwind UI-Seite und konzentrieren uns auf die Integration von Testimonials für die Landingpage von TESTIFY, einer Plattform für Website-Testing mit automatisierter Testfunktion. Roland zeigt euch Schritt für Schritt, wie er die Testimonials einfügt, inklusive Subline, Headline, Namen, Bild und mehr. Das Sulu CMS, ein Symphony Full-Stack Content Management System, erleichtert die Implementierung. Durch Live-Templates reduziert Roland Copy-Paste-Fehler und arbeitet effizienter. Die Einbindung erfolgt durch XML-Konfigurationen, um die Struktur für das Element festzulegen. Wir beheben einige Debugging-Herausforderungen unterwegs, optimieren die Darstellung und sorgen für ein ansprechendes Layout. Außerdem zeigt euch Roland, wie er Fehlerquellen identifiziert und behebet, um die gewünschte Ausgabe zu erzielen. Am Ende haben wir alles erfolgreich in das Sulu CMS integriert und das Layout angepasst, um eine beeindruckende Landingpage zu erstellen.
Vergiss nicht, den Kanal zu abonnieren und die Glocke zu aktivieren, um keine neuen Tutorials zu verpassen. Bis zum nächsten Mal!
00:00 Debugging Tailwind CSS Tutorial auf deutsch mit Roland Golla
00:37 TailwindUI CSS Kit mit Marketing Component Templates
00:59 HTML Marketing Landingpage Section für Testimonials mit Headline, Subline und Items
01:47 Symfony Konfiguration für ein Admin Template in PhpStorm
07:02 Block Element in Sulu CMS im Loader einbinden
08:10 Twig Templates mit Tailwind CSS Styles erstellen
09:50 Headless CMS mit Vue und React als fertige Templates in TailwindUI
12:22 Best Practice Twig For Loop when not empty
15:40 PhpStorm Live Template für Twig Rendering von Variablen erstellen
17:46 Image Rendering im Sulu CMS für berrierefreies Webdesign mit Alt Beschreibungen
20:32 Hard den Cache in Symfony PHP Projekten löschen
22:05 Admin Interface im Sulu CMS
25:55 Start Debugging in Tailwind CSS mit Chrome Developer Tools
29:27 Vorteil von Tailwind CSS für besseres HTML Markup für Accessibility
31:37 Debugging HTML Markup mit der Vereinfachung von Elementen
42:37 Webdevelopment Frontend und Fullstack Developer aus Fehlern lernen
45:27 Komplette HTML Snippets aus Template Vorlagen ohnne dynamische Inhalte übernehmen
54:46 Debugging Analyse und Schritte wiederholen und Errors reproduzieren
56:47 HTML Elemente in Chrome Developer Tools löschen und damit Debug Punkte ohne Backend simulieren
58:52 Tailwind CSS Dokumentation mit Grid Layout für Large Screen und Small Screen
ChatGPT Playlist:
• Part 1: Wie ich in Zukunft Chat GPT von Op...
Cypress.IO Live Coding Tutorial Playlist:
• Part 19: Cypress.IO is clickable für einen...
Vim Playlist:
• Vim Tutorials auf deutsch
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Hier geht es zu unseren Social-Media-Kanälen:
► Patreon: / nevercodealone
► Twitter: / nevercodealone
► Instagram: / nevercodealone
► LinkedIn: / never-code-alone
► Facebook: / nevercodealone
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Das sind unsere Webseiten:
► Never Code Alone bietet kostenlose und kommerzielle live Coding Events und PHP Kurse für Fortgeschrittene an und unterstützt soziale Projekte https://nevercodealone.de
► TESTIFY - Agentur für Website Testing mit Cypress.IO und dem Codeception Testing Framework https://testify.team/
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Du möchtest Never Code Alone unterstützen?
Dann lass uns gerne ein Abo da und schreibe deine Fragen und/oder Anregungen in die Kommentare.
Danke fürs zuschauen!
Ich hoffe das Video hat dir gefallen.
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Kontakt: [email protected]