Ich werde hier Stück für Stück meine Learnings für meine eigene Webseite dokumentieren.

Meine Webseite

#

Ordnerstruktur

#

Die ìndex.html ist der Einstiegspunkt einer Webseite¹.

/my-project
│
├── /css
│   └── style.css
├── /images
│   └── logo.png
├── /js
│   └── script.js
├── index.html
└── README.md

CSS

#

Box-Modell

#

Das Box-Modell besteht aus vier Schichten²:

• Content = Inhalt
• Padding = Innenabstand
• Border= Rahmen
• Margin = Aussenabstand

Nachfolgender Code sollte idealerweise in jedem CSS verwendet werden³.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

• border-box = ?

Flexboxen

#

nav {
  display: flex;
  justify-content: space-between;
}

• display: flex; = Aktiviert die Flexboxen
• justify-content: space-between; = Erstes Element ist ganz am Anfang und letztes ganz am Ende. Die restlichen Elemente werde auf der Achse verteilt ⁴.

Quellen

#