3 basic responsive CSS/SCSS Layouts für Anfänger/Beginner [Tutorial/Deutsch] 

Super Video vielen Dank wie immer ;)

Danke das es wieder einige Basics sind die sehr Praxisnahe gestaltet sind. Bitte weiter so.

Großartiges Tutorial !!

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.

Sehr starkes Turtolial

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

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?

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?

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

wiso ist der header in der main drine und nicht außerhalb?

Warum funktioniert das mit dem $-Zeichen bei mir nicht in VS. Er zeigt das beim Nachcoden nicht an, wie bei dir

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.

Challenge: Das gleiche ohne CSS-Präprozessor 😆👍

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?