Hab dir nun schon bei einigen Videos über die Schulter geguckt und bin begeistert von deinem Fachwissen und von deiner klugen Art der Wissensvermittlung. Ganz herzlichen Dank! ❤️
Sehr gut und verständlich erklärt, obwohl ich das alles schon weiss, habe ich es mir bis zum Ende angeschaut, man weiss ja nie was man noch lernen kann :)
Vielen Dank für den Vergleich der beiden CSS-Frameworks Tailwind und Bootstrap. Was unerwähnt blieb, sind die Javascript Komponenten, die in Bootstrap vorhanden sind, wie Modal, Popover, Dropdowns etc. die sehr schnell benötigte Funktionalitäten bereitstellen und eine Seite zum Leben erwecken.
Danke, das war einer der besten Erklärungen für den Vergleich. Es bringt mehr Klarheiten was man will und welche Möglichkeiten man nutzen kann. Noch mal vielen Dank.
Sehr guter Vergleich! Bin momentan ein echter Tailwind Fan, finde es einfach super. Man muss nicht so viel CSS selbst schreiben, hat aber doch fast die volle Kontrolle
Das Argument hinkt...du schreibst genauso viel CSS nur dass du zb. statt "style: background-color: orange;" ein class="bg-color-orange" in den Dom reinschreibst.... ich find es super unübersichtlich. Der Code wird richtig heftig zugemüllt. Genau um das zu verhindern hat man eigene CSS Files um Struktur und Design zu separieren.
@@Meinungsmacher ist am Ende natürlich immer eine Präferenzfrage. Allerdings hast dsu mit tailwind zum einen bereits ein fixes design system mit festgelegten, sinnvollen Werten (bspw. für verschiedene margins oder Farben etc.) zum anderen kannst du meiner Erfahrung nach einfach viel schneller damit Prototypen, weil du einfach direkt im markup alles runterschreiben kannst, ohne nochmal extra für jede component ein eigenes css / scss file anzulegen, Gedanken über selectoren zu machen und Einheiten etc. auszuknoblen. Momentan bin ich auch eher wieder Fan von eigenen Design Systemen mit scss / css, aber tailwind macht trotzdem sehr vieles leichter
Vielen Dank , das Video hat mir sehr geholfen und es genau das was mich gerade beschäftigt.. Meine Meinung zu Bootstrap und Tailwind , mir gefallen einfach nicht die Klassen die man dort ein trägt weil das wirklich sehr unübersichtlich ist . Ich arbeite mit CSS und BEM Schreibweise zum Beispiel header > header_container >header-h2 > header-p . Meiner Meinung nach um es übersichtlicher zu halten, sollte man auch scss benutzen, der Vorteil man kann Direkt den Media Query rein schreiben in das css, nach dem kompilieren ist in deiner css datei alles schön untereinander. eine Tolle Sache
Danke, du konntest mir sehr helfen. Ich komme von Dreamweaver, bin jetzt auf Pinegrow umgestiegen und stand vor der Wahl, wie ich meine alten eigenen Seiten modernisiere.
Ich verwende für Webprojekte fast nur noch Bootstrap. Aber ich habe mich dazu über Jahre auch einarbeiten müssen. In der Bootstrap-Doku wird beschrieben wie das anpassen kannst. Dazu musst man sich dann mit SCSS, Webpack, JS und den Bootstrap-Modulen auskennen, aber das kommt mit der Zeit. Irgendwann ist man genauso schnell, als ob man nur eine CSS-Datei anlegen würde um da etwas CSS zu schreiben. Man kann das Bootstrap Design zu 100% komfortabel ändern. Tailwind nutzte ich bisher zwar nicht, es macht mich auch etwas skeptisch wenn man den Code hinterher wieder abändern soll. Bei vielen Klassen zu einem Element fehlt mir da die Übersichtlichkeit, was ich schon bei Bootstrap manchmal Grenzwertig finde. Mit normalen CSS muss man sich als Frontend-Entwickler sowieso auskennen, den das Wissen über CSS ist dann für Bootstrap und Tailwind wichtig.
Ein Hobbyentwickler der "sein" Projekt lange pflegt und hegt meinetwegen Vanilla CSS. Aber wenn mehrere Entwickler ein längeres Projekt bauen und pflegen sollen dann ist Tailwind auf jeden Fall empfehlenswert - weil halt Doku und Struktur da ist. Und für die schnelle Nummer mit weniger Aufwand und weniger Einflussmöglichkeit: Bootstrap. Vanilla CSS ist eigentlich nur für das Lernen wichtig oder für wirklich simple Projekte. Ausnahmen sind HTML Emails. Die sollten das CSS eingebettet haben (schon aus Datenschutzgründen) und da würde ich zu Vanilla CSS neigen.
So viel weiß ich auch nicht. Ungenutztes Wissen verblasst nach einer Zeit und ich muss mir wieder alles anlesen wenn ich es brauche. Das immer und immer wieder xD
Mit CSS kannst du leider nur via Media Queries auf Portrait oder Landscape reagieren, es aber nicht fixieren. Das kannst du nur auf dem Endgerät selbst einstellen.
Frage: Wie machst du das, dass du auf der linken Seite die Browser-Vorschau hast? Ist dazu einfach nur einer deiner Browser geöffnet? Oder ist das in VSC implementiert?
Tja. Ich wollte meine Seite jetzt mit Pinegrow anhand einer Taiwind-Vorlage neu erstellen und bekomme aber in Pinegrow dieses Design Panel nicht angezeigt, auch nicht die Floating Tools. Scheinbar muss man zusätzlich den Tailwind Editor kaufen.
Tut mir leid, ich verwende Pinegrow nicht und kann dir nicht weiterhelfen. Vllt. gibst du Visual Studio Code eine Chance. Der ist Kostenlos und es gibt für alles auch kostenlose Erweiterungen die man benutzen kann.
@@ProgrammierenMario Danke dir. Ich wollte halt weder den Code zu Fuß schreiben noch wieder eine Menge Geld ausgeben. Also vlt doch Bootstrap-Vorlage aus Pinegrow oder eine der generellen Vorlagen in Pinegrow. VSC ist schon klasse nach dem bisschen, was ich bisher gemacht habe.
Die Idee von Tailwind ist nicht schlecht, aber sie koennten fuer vieles dann auch style="" verwenden koennen, denn oftmals sind die css klassen einfach nur 200 Dinge mehr die man im Kurzzeitgedaechtnis haben muss. Klar gibts Vorteile ... im Endeffekt denke ich das man auch sein eigenes Utility Toolkits schreiben sollte wenn man diesen Weg geht.
Ich habe mich vor vielen Jahren für Bootstrap entschieden, da mein Thema wichtiger war als der Weg an das Ziel. Zudem lässt sich das Bootstrap danach anpassen.
Der Vergleich dreht sich zwischen den beiden CSS Frameworks und normalen CSS. WordPress ist ein CMS - Content Management System. Ein Backend System mit dem man Content pflegt, Seiten erstellt usw...
@@ProgrammierenMario Ok, und wie würdest Du das im Vergleich zu tailwind sehen? Ist es für Anfänger (auch damit man einiges lernt) besser / leichter) alles mit tailwind zu machen anstatt mit Dingen wie WordPress?
@@benjaminschmidt586 WordPress und Tailwind sind absolut 2 verschiedene Paar Schuhe, denn WordPress hat per se relativ wenig mit css zu tun, also ich sehe WordPress in diesem Video an dem absolut falschen Ort
für mich ist auf jeden Fall ein Nachteil von bootstrap und tailwind, dass es so viele Abkürzungen gibt. ich weiß nicht, ob ich mir die alle merken könnte
Hallo Leertaste ;-) Das wäre aber nur ein temporärer Nachteil. Die Klassen und Elemente prägen sich nach und nach automatisch ein bei ständiger Verwendung. Ist ja auch bei nativem CSS und den ganzen Eigenschaften auch nicht anders :)
Nun etwas CSS Kenntnisse sollte man da schon mitbringen. Ansonsten kann man sich vermutlich nicht so richtig vorstellen was die einzelnen Klassen bei Tailwind machen. Aber natürlich kann man sich auch so zurechtfinden. Die Doku ist sehr gut und alles wird auf der Website mit Beispielen gezeigt. Ich würde sagen letztendlich ist es egal. Hängt wie immer von den eigenen Vorlieben und den Zielen ab ;)
@@ProgrammierenMario OK, danke für denen Input. Grundsätzlich geht es mir darum, dass ich nicht die ganzen grundlegenden dinge neu "erfinden" muss und in Klassen erzeugen muss. Nutze hauptsächlich das GridSystem von Tailwind. Ist zwar grundsätzlich erstmal etwas anders zu verstehen als grundlegende grid videos, da man immer 1fr anlegt, aber mit dem col-span kommt man dann doch ganz gut zurecht. Denke es ist eine gute Sache. Und wenn man eigenes erstellen möchte hat man dazu ja auch in der Tailwind.css die Möglichkeit, oder würdest Du hierzu eigene css Dateien zusätzlich einbinden?
Wenn zusätzliche Klassen nicht zwingend notwendig sind und du mit den Tailwind Boardmitteln alles erreichen kannst, so ist doch alles Schick. Und wenn dir die col-span klassen nicht reichen kannst du diese ja super über die config erweitern oder anpassen.
Es gibt keine dumme Fragen. Du kannst gerne so viel Fragen stellen wie du möchtest. Zu deiner Frage: Schreibe in VS Code in der HTML Datei ein Ausrufezeichen danach drückst du direkt einmal die Tabulatortaste. Happy Coding!
Dir gefällt das Video und möchtest mehr Vergleichsvideos dieser Art? Dann gib dem Video doch einen Daumen nach oben! 👍😀
Hab dir nun schon bei einigen Videos über die Schulter geguckt und bin begeistert von deinem Fachwissen und von deiner klugen Art der Wissensvermittlung. Ganz herzlichen Dank! ❤️
Vielen lieben Dank für dein Feedback ✌️🙂
Sehr gut die Unterschiede und Vorteile jeder Lösung erklärt.👍
Vielen Dank 🙏 Was verwendest du für dein aktuelles Projekt?
@@ProgrammierenMario Für interne Projekte bootstrap und vuetify. Tailwind werde ich mir definitiv aber Mal anschauen.
Kann es nur empfehlen. Lässt sich super in jedem Projekt integrieren ✌️
Herzlichen Dank für den ausführlichen Vergleich!
✌️🙂
Danke!
Vielen herzlichen Dank :)
Sehr gute und anschauliche Erklärung. Hast es auf den Punkt getroffen, Danke!
Vielen Dank für das schöne Feedback ✌️🙂
Sehr gut und verständlich erklärt, obwohl ich das alles schon weiss, habe ich es mir bis zum Ende angeschaut, man weiss ja nie was man noch lernen kann :)
Freut mich, danke! :)
Vielen Dank für den Vergleich der beiden CSS-Frameworks Tailwind und Bootstrap. Was unerwähnt blieb, sind die Javascript Komponenten, die in Bootstrap vorhanden sind, wie Modal, Popover, Dropdowns etc. die sehr schnell benötigte Funktionalitäten bereitstellen und eine Seite zum Leben erwecken.
Hatte ich nicht? Ist schon etwas her das Tutorial. 😅
@@ProgrammierenMario Ja, kann man auch an der Frisur sehen. Waren arg kurz, die Haare. Jetzt wohl wieder besser 😇
Danke, das war einer der besten Erklärungen für den Vergleich. Es bringt mehr Klarheiten was man will und welche Möglichkeiten man nutzen kann. Noch mal vielen Dank.
Herzlichen Dank für dein Feedback ✌️🙂
Sehr guter Vergleich! Bin momentan ein echter Tailwind Fan, finde es einfach super. Man muss nicht so viel CSS selbst schreiben, hat aber doch fast die volle Kontrolle
Besten Dank! Ja mir persönlich gefällt das auch sehr gut. Besonders die Kombiniermöglichkeiten mit den Breakpoint Prefixes find ich extrem hilfreich.
@@ProgrammierenMario ja das stimmt. Macht es ziemlich einfach responsive Seiten zu kreieren
Das Argument hinkt...du schreibst genauso viel CSS nur dass du zb. statt "style: background-color: orange;" ein class="bg-color-orange" in den Dom reinschreibst.... ich find es super unübersichtlich. Der Code wird richtig heftig zugemüllt. Genau um das zu verhindern hat man eigene CSS Files um Struktur und Design zu separieren.
@@Meinungsmacher ist am Ende natürlich immer eine Präferenzfrage. Allerdings hast dsu mit tailwind zum einen bereits ein fixes design system mit festgelegten, sinnvollen Werten (bspw. für verschiedene margins oder Farben etc.) zum anderen kannst du meiner Erfahrung nach einfach viel schneller damit Prototypen, weil du einfach direkt im markup alles runterschreiben kannst, ohne nochmal extra für jede component ein eigenes css / scss file anzulegen, Gedanken über selectoren zu machen und Einheiten etc. auszuknoblen.
Momentan bin ich auch eher wieder Fan von eigenen Design Systemen mit scss / css, aber tailwind macht trotzdem sehr vieles leichter
Vielen Dank , das Video hat mir sehr geholfen und es genau das was mich gerade beschäftigt.. Meine Meinung zu Bootstrap und Tailwind , mir gefallen einfach nicht die Klassen die man dort ein trägt weil das wirklich sehr unübersichtlich ist . Ich arbeite mit CSS und BEM Schreibweise zum Beispiel header > header_container >header-h2 > header-p . Meiner Meinung nach um es übersichtlicher zu halten, sollte man auch scss benutzen, der Vorteil man kann Direkt den Media Query rein schreiben in das css, nach dem kompilieren ist in deiner css datei alles schön untereinander. eine Tolle Sache
Danke, du konntest mir sehr helfen. Ich komme von Dreamweaver, bin jetzt auf Pinegrow umgestiegen und stand vor der Wahl, wie ich meine alten eigenen Seiten modernisiere.
Freut mich immer wenn ich helfen kann ✌️🙂
Klar & Deutlich 👍💥👍💥👍
Gern geschehen ✌🙂
Ich verwende für Webprojekte fast nur noch Bootstrap. Aber ich habe mich dazu über Jahre auch einarbeiten müssen. In der Bootstrap-Doku wird beschrieben wie das anpassen kannst. Dazu musst man sich dann mit SCSS, Webpack, JS und den Bootstrap-Modulen auskennen, aber das kommt mit der Zeit. Irgendwann ist man genauso schnell, als ob man nur eine CSS-Datei anlegen würde um da etwas CSS zu schreiben. Man kann das Bootstrap Design zu 100% komfortabel ändern.
Tailwind nutzte ich bisher zwar nicht, es macht mich auch etwas skeptisch wenn man den Code hinterher wieder abändern soll. Bei vielen Klassen zu einem Element fehlt mir da die Übersichtlichkeit, was ich schon bei Bootstrap manchmal Grenzwertig finde.
Mit normalen CSS muss man sich als Frontend-Entwickler sowieso auskennen, den das Wissen über CSS ist dann für Bootstrap und Tailwind wichtig.
Vielen Dank für dein Feedback. :)
Ein Hobbyentwickler der "sein" Projekt lange pflegt und hegt meinetwegen Vanilla CSS. Aber wenn mehrere Entwickler ein längeres Projekt bauen und pflegen sollen dann ist Tailwind auf jeden Fall empfehlenswert - weil halt Doku und Struktur da ist. Und für die schnelle Nummer mit weniger Aufwand und weniger Einflussmöglichkeit: Bootstrap.
Vanilla CSS ist eigentlich nur für das Lernen wichtig oder für wirklich simple Projekte.
Ausnahmen sind HTML Emails. Die sollten das CSS eingebettet haben (schon aus Datenschutzgründen) und da würde ich zu Vanilla CSS neigen.
Vielen Dank für deine Ergänzungen! Wünsche dir ein schönes Wochenende :)
Coole Geschichte, viel Interessantes, ich hätte gerne auch dein Wissen. Grüsse Dany
So viel weiß ich auch nicht. Ungenutztes Wissen verblasst nach einer Zeit und ich muss mir wieder alles anlesen wenn ich es brauche. Das immer und immer wieder xD
@@ProgrammierenMario sehr bescheidenen
danke für alles Mario. Doch eine Frage: Wie kann ich meine WebApp auf Portrait fixieren?
Mit CSS kannst du leider nur via Media Queries auf Portrait oder Landscape reagieren, es aber nicht fixieren. Das kannst du nur auf dem Endgerät selbst einstellen.
@@ProgrammierenMario danke für die rasche Antwort. Ein hohes Lob für deine hervorragenden und aufschlussreichen Totorials!
Herzlichen Dank ✌️🙂
Frage: Wie machst du das, dass du auf der linken Seite die Browser-Vorschau hast? Ist dazu einfach nur einer deiner Browser geöffnet? Oder ist das in VSC implementiert?
Das ist einfach nur der Browser den ich daneben positioniert habe.
Tja. Ich wollte meine Seite jetzt mit Pinegrow anhand einer Taiwind-Vorlage neu erstellen und bekomme aber in Pinegrow dieses Design Panel nicht angezeigt, auch nicht die Floating Tools. Scheinbar muss man zusätzlich den Tailwind Editor kaufen.
Tut mir leid, ich verwende Pinegrow nicht und kann dir nicht weiterhelfen. Vllt. gibst du Visual Studio Code eine Chance. Der ist Kostenlos und es gibt für alles auch kostenlose Erweiterungen die man benutzen kann.
@@ProgrammierenMario Danke dir. Ich wollte halt weder den Code zu Fuß schreiben noch wieder eine Menge Geld ausgeben. Also vlt doch Bootstrap-Vorlage aus Pinegrow oder eine der generellen Vorlagen in Pinegrow. VSC ist schon klasse nach dem bisschen, was ich bisher gemacht habe.
Die Idee von Tailwind ist nicht schlecht, aber sie koennten fuer vieles dann auch style="" verwenden koennen, denn oftmals sind die css klassen einfach nur 200 Dinge mehr die man im Kurzzeitgedaechtnis haben muss. Klar gibts Vorteile ... im Endeffekt denke ich das man auch sein eigenes Utility Toolkits schreiben sollte wenn man diesen Weg geht.
Hallo Lothar, weil du "eigene Utility Toolkits" ansprichst! Da kannst du gerne nächsten Freitag mal reinschauen. Da kommt ein Tutorial zu dem Thema ;)
Mit dem CSS Grid und neuen Methoden zum HTML Text zusammenzusetzen kann ich jetzt sagen das beides so was von 2005 ist.
Was war 2005? Schon wieder so ewig her. 😅
Ich habe mich vor vielen Jahren für Bootstrap entschieden, da mein Thema wichtiger war als der Weg an das Ziel. Zudem lässt sich das Bootstrap danach anpassen.
Letztendlich kannst du mit allem deine Projekte umsetzen. Spielt am Ende keine wirkliche Rolle.
Heute ist auch Pizza 🙂
✌️🙂
In welchem Vergleich steht denn hier WordPress?
Kenne jetzt wirklich nur tailwind von dir.
Der Vergleich dreht sich zwischen den beiden CSS Frameworks und normalen CSS. WordPress ist ein CMS - Content Management System. Ein Backend System mit dem man Content pflegt, Seiten erstellt usw...
@@ProgrammierenMario
Ok, und wie würdest Du das im Vergleich zu tailwind sehen? Ist es für Anfänger (auch damit man einiges lernt) besser / leichter) alles mit tailwind zu machen anstatt mit Dingen wie WordPress?
@@benjaminschmidt586 WordPress und Tailwind sind absolut 2 verschiedene Paar Schuhe, denn WordPress hat per se relativ wenig mit css zu tun, also ich sehe WordPress in diesem Video an dem absolut falschen Ort
Hallo, wie heisst denn der Editor? Cooles Video, Danke :)
Hallo Lars, ich verwende den Visual Studio Code. Hab dazu auch paar Videos: th-cam.com/play/PLnqycjkeRGqmlJvXkxqSvIynlxaiKecPN.html
Grüße ✌️🙂
@@ProgrammierenMario ja perfekt, danke dir... starte gerade als UI/UXer ein bisschen mit den Sachen, macht voll Spaß :)
Ja es gibt heutzutage echt gute Tools mit denen man es aushalten kann. Früher hatte man leider nicht so die Vielfalt 😂
für mich ist auf jeden Fall ein Nachteil von bootstrap und tailwind, dass es so viele Abkürzungen gibt. ich weiß nicht, ob ich mir die alle merken könnte
Hallo Leertaste ;-)
Das wäre aber nur ein temporärer Nachteil. Die Klassen und Elemente prägen sich nach und nach automatisch ein bei ständiger Verwendung. Ist ja auch bei nativem CSS und den ganzen Eigenschaften auch nicht anders :)
Bist Du der Meinung, dass man als Anfänger durchaus auf Tailwind zurückgreifen sollte / kann?
Finde die vorgefertigten Klassen natürlich top.
Nun etwas CSS Kenntnisse sollte man da schon mitbringen. Ansonsten kann man sich vermutlich nicht so richtig vorstellen was die einzelnen Klassen bei Tailwind machen. Aber natürlich kann man sich auch so zurechtfinden. Die Doku ist sehr gut und alles wird auf der Website mit Beispielen gezeigt. Ich würde sagen letztendlich ist es egal. Hängt wie immer von den eigenen Vorlieben und den Zielen ab ;)
@@ProgrammierenMario OK, danke für denen Input.
Grundsätzlich geht es mir darum, dass ich nicht die ganzen grundlegenden dinge neu "erfinden" muss und in Klassen erzeugen muss.
Nutze hauptsächlich das GridSystem von Tailwind.
Ist zwar grundsätzlich erstmal etwas anders zu verstehen als grundlegende grid videos, da man immer 1fr anlegt, aber mit dem col-span kommt man dann doch ganz gut zurecht.
Denke es ist eine gute Sache.
Und wenn man eigenes erstellen möchte hat man dazu ja auch in der Tailwind.css die Möglichkeit, oder würdest Du hierzu eigene css Dateien zusätzlich einbinden?
Wenn zusätzliche Klassen nicht zwingend notwendig sind und du mit den Tailwind Boardmitteln alles erreichen kannst, so ist doch alles Schick. Und wenn dir die col-span klassen nicht reichen kannst du diese ja super über die config erweitern oder anpassen.
Jeden Tag ist Pizzatag!
Richtig! ;)
Kannst Du auch eine Empfehlung zu einem Projekt abgeben dass du dir z.B. in XD anschaust? Selbstverständlich nicht umsonst.
Was genau meinst du mit Empfehlung? Um Projekte umzusetzen fehlt mir aktuell leider die Zeit 🤷♂️
Mal eine sicher ganz dumme Frage. Du spricht in Sekunde 72 "wir legen uns ein Grundgerüst an" ... und schon ist es da. Wie geht das?
Es gibt keine dumme Fragen. Du kannst gerne so viel Fragen stellen wie du möchtest.
Zu deiner Frage: Schreibe in VS Code in der HTML Datei ein Ausrufezeichen danach drückst du direkt einmal die Tabulatortaste. Happy Coding!
Pizza Tag! 😂
Jo, schmecken lassen 😄
Jeder Tag ist Pizza Tag!
:)
Nach 2 sek. aus gemacht . Bitte lern hochdeutsch!
Ach ja? Wozu denn?