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

Heute bauen wir drei einfach CSS (SCSS) Layouts nach die jeder mal bauen muss und dabei erkläre ich alles was für Anfänger dabei relevant ist.

Diesen Channel etwas Supporten?

Fragen oder Probleme? Werde Teil der Community! (Kostenlos)

Unterstütze den Channel:

Kapitel:
00:00 Einleitung
01:02 Setup
01:26 Single Page - Demo
01:49 Single Page - Code
09:25 Basic Blog - Demo
10:06 Basic Blog - HTML
12:19 SCSS Mixins (Media Querys)
15:07 Basic Blog - CSS
25:52 Basic Shop - Demo
26:56 Basic Shop - HTML
28:43 Basic Shop CSS
37:04 Ende

Links aus dem Video:

#Tutorial #CSS #WebDesignLernen

Meine Social Media Seiten:

Copyright by Johannes Schiel / Unleashed Design

[myyty]

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.

[michaelreuter]

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

[od]

Hallo zusammen, leider finde ich die standard Entwicklungsumgebung Einrichtung nicht. Sollte iwo unter dem Video sein. Danke

[Chrizzonator]

Super Video vielen Dank wie immer ;) <3

[nbotz]

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

[patrick-aka-patski]

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

[christianachleitner]

Ich habe mal eine Frage: <Main> ist vor allem für den Hauptcontent oder? Sollte <header> darum eigentlich außerhalb von main liegen, oder liege da falsch?

[ralfambuhl]

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?

[Sebastian-zscp]

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?

[asensiodias]

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

[Sebastian-zscp]

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

[groovebird]

Im ersten Beispiel ist es unnötig flexbox für <main> zu verwenden, da das Verhalten per default schon so ist. Da muss man gar nix angeben.

[Linuxdirk]

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

[musicfan]

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?