Danke für die Einblicke. Meine Lieblingsversprecher waren "flexiert" und "Brainpoints". hehe Habe noch nie gesehen, dass die Bereiche im CSS Code so ineinander verschachtelt werden. Aber funktioniert.
In CSS werden die Bereiche auch nicht so verschachtelt, sondern ausschließlich innerhalb in Sass/SCSS. Letzteres wird hinterher dann zu CSS kompiliert, wo das Nesting dann wieder aufgehoben bzw. entsprechend aufgelöst wird (in dem die einzelnen Klassen generiert werden). Nicht das jemand auf die Idee kommt, es auch so in CSS zu definieren. ;)
Danke freut mich wenn es gefällt, es werden immer wieder einige Basics kommen jedoch wird hier immer eine Mischung aus Komplexen, Mittleren und Beginner Themen erscheinen :)
Sehr gut, schnell erklärt aber alles wichtige drin. Gutes Update für mich, der sich mit diesen responsive Elementen noch nicht auseinander gesetzt hat. Fazit: lass dich nicht austricksen vom Fool Screen :D
Habe ich mich gerade auch gefragt. Auf w3schools habe ich jedoch gelesen, dass keine wiederholenden Elemente im Main sein sollten. Somit wäre ein Header, den man auf mehreren Seiten nutzt darin nicht vorgesehen. Wie aber gesagt, erlaubt HTML ja an sich viel. Semantisch darf der header auch im main stehen. Kann mich aber auch irren, korrigiert mich gern. Dennoch gutes Video mal wieder, weiter so!
@@groovebird812 Nein solche Elemente meinte ich auch nicht. Zitat von W3Schools: The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Besten Dank für das tolle Video, genau was ich als eher Anfänger brauche. Eine Frage habe ich zu Demo 1: Wenn ich bei "article" die min-height auf 100vh stelle werden die Sections nicht mehr alle dargestellt. Ich kann nicht alle hoch und runter scrollen. Ganz verfügbar sind noch zwei und der dritte nur noch halb und der vierte ganz weg. Was könnte da das Problem sein?
Von der Semantik her würde ich sowohl den primären Header und Footer außerhalb von Main definieren. Innerhalb von Main kommen dann ausschließlich die eigentlichen Inhalte (Content) der Seite. In Sass/SCSS solltest du zudem statt @import eher @forward und @use (je nachdem) verwenden. Die Definitionen zum Zentrieren der Artikel können zudem mithilfe der CSS min-function verkürzt werden. Der Effekt ist letztendlich derselbe, nur dass du dir einiges an Schreibarbeit ersparst. article { width: min(90%, 100rem); margin-inline: auto; } Zu guter Letzt sollte man möglichst vermeiden, sich ständig zu wiederholen (Don't repeat yourself) in dem man immer wieder die gleichen CSS "Eigenschaften-Paare" definiert. Ich würde für die Positionierung also eine eigene Klasse anlegen, die dann auf sämtliche Bereiche in denen es gewünscht angewendet wird. In deinem Fall z.B. eine Klasse .flex zusammen mit einem Modifier. Vorteil: Dein CSS wird nicht unnötig aufgebläht, ist somit schlanker und bleibt insgesamt übersichtlicher. Alternativ gleich ein passendes flex/grid-Mixin innerhalb von Sass/SCSS. Neben meiner konstruktiven Kritik dennoch ein Daumen hoch, da sich dieses Tutorial ja explizit an Anfänger richtet. Von daher sehe ich es nicht so wild, wenn auf solche Dinge (noch) nicht geachtet wird. Trotzdem wollte ich kurz darauf aufmerksam machen, damit es der ein oder andere vielleicht für die Zukunft im Hinterkopf behält. In CSS (SCSS) gibt es ja bekanntlich mehrere Wege, die nach "Rom" bzw. als Ziel führen. Von daher sollte mein Kommentar nur als eine kurze, konstruktive Randnotiz verstanden werden. LG Patrick
@@UnleashedDesign Also, ich glaube bei den Media Querys könntest du durchaus etwas Code sparen. Statt das für jede Definition erneut zu kopieren, einfach einmal am Ende der CSS-Datei definieren und dann die jeweiligen Definitionen da gesammelt jeweils für die verschiedenen Breiten anpassen.
@@groovebird812 Wäre es bei größeren Projekten nicht gerade sinnvoll, es NICHT so zu machen, damit das eigentliche Design und die Responsive-Funktionalität sauber getrennt sind?
@@Linuxdirk für mich wäre das nicht mehr so übersichtlich. Wenn man jeweils an der betreffenden Stelle gleich den Media Query schreibt weiß man immer was wozu gehört und muss nicht so in der Datei hin und herspringen. Falls die Datei später komprimiert wird fallen die vielen Meda Query Notierungen eh nicht mehr so ins Gewicht. Mit SCSS kann man auch direkt in die geschweiften Klammern den Query schreiben. Aber es hat ja auch jeder andere Präferenzen
Absolut, aber wie ich da auch sagte, ich schreibe es hier immer gerne aus weil das Video an absolute Beginner geht sollte man wissen warum Flex Sicht so verhält
Ich raste aus...ich habe das Tutorial jetzt min. 8x von A-Z mitgecoded und es funktioniert nicht. Jetzt habe ich deinen Code kopiert und in meine html/css Dateien eingebaut uns es funktioniert immer noch nicht. So doof kann ich doch eigentlich gar nicht sein, oder doch?
Hmmm so weiß ich leider nicht genau wo das Problem ist, hast du den eine IDE für Sass bzw. Scss ? Weil hier wenn du z.B. den Code von Codepen 1:1 Kopierst wird es nicht funktionieren weil deine index.html deine CSS nicht kennt und der Code aus der style.scss nicht einfach genutzt werden kann. Dieser muss erst zu .css werden. Hierfür habe ich aber ein Tutorial das auch verlinkt ist das sollte dir helfen :)
@@UnleashedDesign danke für den Tipp. Da werde ich mal mein Glück versuchen. Aber auch wenn das so nicht rüber gekommen ist: Danke für deine tollen Videos.
![Magnetische Paralax UI der neue Frontend Trend 2022! [Deutsch/Tutorial]](http://i.ytimg.com/vi/j7qE1nUpdTU/mqdefault.jpg)
![Magnetische Paralax UI der neue Frontend Trend 2022! [Deutsch/Tutorial]](/img/tr.png)
![CSS Grid Einfach erklärt! Die Zukunft des CSS Layouts. [TUTORIAL]](http://i.ytimg.com/vi/Xj_sIK6-A_Q/mqdefault.jpg)
![CSS3 Grid/Flex Layout richtig nutzen! [TUTORIAL]](http://i.ytimg.com/vi/sB-ooIXFTjg/mqdefault.jpg)
Danke für die Einblicke. Meine Lieblingsversprecher waren "flexiert" und "Brainpoints". hehe
Habe noch nie gesehen, dass die Bereiche im CSS Code so ineinander verschachtelt werden. Aber funktioniert.
In CSS werden die Bereiche auch nicht so verschachtelt, sondern ausschließlich innerhalb in Sass/SCSS. Letzteres wird hinterher dann zu CSS kompiliert, wo das Nesting dann wieder aufgehoben bzw. entsprechend aufgelöst wird (in dem die einzelnen Klassen generiert werden). Nicht das jemand auf die Idee kommt, es auch so in CSS zu definieren. ;)
Danke das es wieder einige Basics sind die sehr Praxisnahe gestaltet sind. Bitte weiter so.
Danke freut mich wenn es gefällt, es werden immer wieder einige Basics kommen jedoch wird hier immer eine Mischung aus Komplexen, Mittleren und Beginner Themen erscheinen :)
Sehr starkes Turtolial
Großartiges Tutorial !!
Danke freut mich wenn es gefällt :)
Super Video vielen Dank wie immer ;)
Danke freut mich wenn dir das Video gefällt :)
Sehr gut, schnell erklärt aber alles wichtige drin. Gutes Update für mich, der sich mit diesen responsive Elementen noch nicht auseinander gesetzt hat. Fazit: lass dich nicht austricksen vom Fool Screen :D
Danke freut mich wenn es dir gefallen hat und weiter helfen konnte :)
hast du den Browser vorher schon reset gemacht , schon ab der 0Min das nicht mit aufgenommen oder wieso hast du kein Margen und padding im Browser?
Ich habe mal eine Frage: ist vor allem für den Hauptcontent oder? Sollte darum eigentlich außerhalb von main liegen, oder liege da falsch?
Habe ich mich gerade auch gefragt. Auf w3schools habe ich jedoch gelesen, dass keine wiederholenden Elemente im Main sein sollten. Somit wäre ein Header, den man auf mehreren Seiten nutzt darin nicht vorgesehen. Wie aber gesagt, erlaubt HTML ja an sich viel. Semantisch darf der header auch im main stehen. Kann mich aber auch irren, korrigiert mich gern.
Dennoch gutes Video mal wieder, weiter so!
@@Envalee wenn keine wiederholenden Elemente dort stehen dürften, wären ja auch die sections nicht erlaubt. Kann ich mr nicht vorstellen.
@@groovebird812 Nein solche Elemente meinte ich auch nicht.
Zitat von W3Schools:
The content inside the element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
Besten Dank für das tolle Video, genau was ich als eher Anfänger brauche. Eine Frage habe ich zu Demo 1: Wenn ich bei "article" die min-height auf 100vh stelle werden die Sections nicht mehr alle dargestellt. Ich kann nicht alle hoch und runter scrollen. Ganz verfügbar sind noch zwei und der dritte nur noch halb und der vierte ganz weg. Was könnte da das Problem sein?
Hallo zusammen, leider finde ich die standard Entwicklungsumgebung Einrichtung nicht. Sollte iwo unter dem Video sein. Danke
Von der Semantik her würde ich sowohl den primären Header und Footer außerhalb von Main definieren. Innerhalb von Main kommen dann ausschließlich die eigentlichen Inhalte (Content) der Seite. In Sass/SCSS solltest du zudem statt @import eher @forward und @use (je nachdem) verwenden. Die Definitionen zum Zentrieren der Artikel können zudem mithilfe der CSS min-function verkürzt werden. Der Effekt ist letztendlich derselbe, nur dass du dir einiges an Schreibarbeit ersparst.
article { width: min(90%, 100rem); margin-inline: auto; }
Zu guter Letzt sollte man möglichst vermeiden, sich ständig zu wiederholen (Don't repeat yourself) in dem man immer wieder die gleichen CSS "Eigenschaften-Paare" definiert. Ich würde für die Positionierung also eine eigene Klasse anlegen, die dann auf sämtliche Bereiche in denen es gewünscht angewendet wird. In deinem Fall z.B. eine Klasse .flex zusammen mit einem Modifier. Vorteil: Dein CSS wird nicht unnötig aufgebläht, ist somit schlanker und bleibt insgesamt übersichtlicher. Alternativ gleich ein passendes flex/grid-Mixin innerhalb von Sass/SCSS.
Neben meiner konstruktiven Kritik dennoch ein Daumen hoch, da sich dieses Tutorial ja explizit an Anfänger richtet. Von daher sehe ich es nicht so wild, wenn auf solche Dinge (noch) nicht geachtet wird. Trotzdem wollte ich kurz darauf aufmerksam machen, damit es der ein oder andere vielleicht für die Zukunft im Hinterkopf behält. In CSS (SCSS) gibt es ja bekanntlich mehrere Wege, die nach "Rom" bzw. als Ziel führen. Von daher sollte mein Kommentar nur als eine kurze, konstruktive Randnotiz verstanden werden.
LG Patrick
Challenge: Das gleiche ohne CSS-Präprozessor 😆👍
Das ist keine Challenge ;) das klappte ohne Probleme ist nur etwas mehr Code :)
@@UnleashedDesign Also, ich glaube bei den Media Querys könntest du durchaus etwas Code sparen. Statt das für jede Definition erneut zu kopieren, einfach einmal am Ende der CSS-Datei definieren und dann die jeweiligen Definitionen da gesammelt jeweils für die verschiedenen Breiten anpassen.
@@Linuxdirk bei größeren Projekten macht es durchaus Sinn es so wie im Video zu machen.
@@groovebird812 Wäre es bei größeren Projekten nicht gerade sinnvoll, es NICHT so zu machen, damit das eigentliche Design und die Responsive-Funktionalität sauber getrennt sind?
@@Linuxdirk für mich wäre das nicht mehr so übersichtlich. Wenn man jeweils an der betreffenden Stelle gleich den Media Query schreibt weiß man immer was wozu gehört und muss nicht so in der Datei hin und herspringen. Falls die Datei später komprimiert wird fallen die vielen Meda Query Notierungen eh nicht mehr so ins Gewicht. Mit SCSS kann man auch direkt in die geschweiften Klammern den Query schreiben. Aber es hat ja auch jeder andere Präferenzen
Warum funktioniert das mit dem $-Zeichen bei mir nicht in VS. Er zeigt das beim Nachcoden nicht an, wie bei dir
wiso ist der header in der main drine und nicht außerhalb?
Im ersten Beispiel ist es unnötig flexbox für zu verwenden, da das Verhalten per default schon so ist. Da muss man gar nix angeben.
Absolut, aber wie ich da auch sagte, ich schreibe es hier immer gerne aus weil das Video an absolute Beginner geht sollte man wissen warum Flex Sicht so verhält
Wenn der Footer auch bei kurzen Seiteninhalten ganz unten sein soll, kann das mit Flexbox einfacher realisiert werden mit "footer {margin-top: auto}".
@@UnleashedDesign stimmt, trotzdem aber cooles Video. Sollte keine Kritik sein :)
Ich raste aus...ich habe das Tutorial jetzt min. 8x von A-Z mitgecoded und es funktioniert nicht. Jetzt habe ich deinen Code kopiert und in meine html/css Dateien eingebaut uns es funktioniert immer noch nicht. So doof kann ich doch eigentlich gar nicht sein, oder doch?
Hmmm so weiß ich leider nicht genau wo das Problem ist, hast du den eine IDE für Sass bzw. Scss ? Weil hier wenn du z.B. den Code von Codepen 1:1 Kopierst wird es nicht funktionieren weil deine index.html deine CSS nicht kennt und der Code aus der style.scss nicht einfach genutzt werden kann. Dieser muss erst zu .css werden. Hierfür habe ich aber ein Tutorial das auch verlinkt ist das sollte dir helfen :)
@@UnleashedDesign danke für den Tipp. Da werde ich mal mein Glück versuchen. Aber auch wenn das so nicht rüber gekommen ist: Danke für deine tollen Videos.