Part 8: Tailwind CSS Tutorial Feature Section für Marketing Landingpage

In diesem YouTube-Video zeigt euch Roland, wie ihr eine Feature-Section im Sulu CMS mithilfe der Best Practices aus dem Tailwind UI Kit implementieren könnt. Im heutigen Tutorial geht es darum, wie ihr eine Feature-Section im Sulu CMS einrichten könnt, die direkt für Redakteure verfügbar ist. Dabei nutzen wir Tailwind CSS aus dem Tailwind UI Kit, um ein optimales Design umzusetzen.
Roland arbeitet momentan an der TESTIFY-Website und zeigt euch, wie ihr eine Feature-Section implementieren könnt. Wir wählen das Tablet UI Kit für Best Practices aus und entscheiden uns für ein einfaches 3-Spalten-Layout mit großen Icons. Roland verwendet PHPStorm und zeigt euch die Verwendung von Live Templates, um effizient zu arbeiten und erstellt eine XML-Datei "LP.xml" für das Content-Element. Die Konfiguration wird in Symphony umgesetzt und integriert die Feature-Section. In der Symphony-Konfiguration wird Tailwind und Blocks hinzugefügt. Die Feature-Section wird mithilfe von XML-Dateien und Live Templates erstellt.

Folgt dem Kanal und aktiviert die Glocke um nichts mehr zu verpassen!

00:00 Intro Tailwind CSS Tutorial auf deutsch mit Roland Golla
00:47 Lokale Docker Web Development Umgebung im Sulu CMS
01:18 Tailwind UI Kit als HTML Markup Best Practice für Accessibility Webdesign
02:18 PhpStorm Live Templates für Symfony Config XML Files
09:25 Twig Template mit If Statement und For Loop für Content Items
15:09 Debugging HTML Markup in Twig Templates mit Tailwind CSS Klassen
16:41 Sulu Link zu interner Seite mit Display Text
18:58 NPM run Watch für den Webpack Build mit Tailwind Config für Symfony Projekte
19:11 Redakteur Editor im Admin Interface von einem Content Management System
22:41 Refatoring Tailwind CSS HTML Section für Feature Section Icons
25:36 Fazit Tailwind CSS Feature Section aus dem UI Kit in Sulu Symfony CMS implementieren

ChatGPT Playlist:
https://www.youtube.com/watch?v=Rfh8DSpRYIM&list=PLKrKzhBjw2Y9WAmajKpaE8mzQ2UpY1UYu

Cypress.IO Live Coding Tutorial Playlist:
https://www.youtube.com/watch?v=mb_PTxDeJKI&list=PLKrKzhBjw2Y9ceCxO3ollOc4eIVPAjiHs

Vim Playlist:
https://www.youtube.com/playlist?list=PLKrKzhBjw2Y-9sCNpvbg3BY9v4JRc6fgn

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Hier geht es zu unseren Social-Media-Kanälen:

► Patreon: https://patreon.com/nevercodealone
► Twitter: https://twitter.com/nevercodealone
► Instagram: https://www.instagram.com/nevercodealone/
► LinkedIn: https://www.linkedin.com/company/never-code-alone/
► Facebook: https://www.facebook.com/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: roland@nevercodealone.de

Видео Part 8: Tailwind CSS Tutorial Feature Section für Marketing Landingpage канала Never Code Alone