Das Portfolio fertigstellen

Über sechzehn Abschnitte sind die Teile einer Seite entstanden, jedes in seiner eigenen Synthese. Die Kopfzeile kam aus Abschnitt 9, das Kartenraster aus 10, das Kontaktformular aus 14, der Dunkelmodus aus 12. Hier stehen sie zum ersten Mal auf einer Seite. Es fehlen noch zwei Teile und eine Abnahme.

Ein paar Teile stehen hier bewusst einfacher da als in ihrer eigenen Lektion. Die Kopfzeile hat keinen inneren .kopf-inhalt mehr und läuft über die volle Breite. Das Formular kommt ohne die Button-Modifier aus seiner Lektion aus. Der Grund ist derselbe wie überall in diesem Kurs. Was geprüft wird, soll man in einer Prüfliste lesen können, und jede zusätzliche Hülle wäre eine weitere Zeile, die nichts mit der Aufgabe zu tun hat.

01 / 03Bild neben Text, und irgendwann darunter

<section class="ueber-mich">
  <img src="/lernen/media/arbeitsplatz-600.jpg" alt="Ein Schreibtisch vor einer dunkelgrünen Wand mit Notizbuch, Farn, Tasse und Laptop">

  <div>
    <p>Ich baue Webseiten und erkläre, wie das geht.</p>
    <p>In dieser schmalen Spalte liegt das Bild über dem Text. Geh ins Vollbild, dann rücken beide nebeneinander.</p>
  </div>
</section>

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

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.ueber-mich {
  display: flex;
  /* Die eine Zeile, die den Umbruch erlaubt. */
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.ueber-mich img {
  /* Wachsen darf es, schrumpfen auch, und unter
     260px hört beides auf. Das min-width: 0 aus
     9.6 gehört dazu: Ohne die Zeile bringt das
     Bild seine natürlichen 600px als Untergrenze
     mit, und die Zeile bricht viel zu spät um. */
  flex: 1 1 260px;
  min-width: 0;
  display: block;
  max-width: 100%;
  border-radius: 12px;
}

.ueber-mich div {
  flex: 1 1 260px;
}

.ueber-mich p {
  margin: 0 0 12px 0;
  max-width: 60ch;
}

“Über mich” ist eine Flexbox mit zwei Kindern und drei Zeilen. flex-wrap: wrap am Container erlaubt das Umbrechen, und flex: 1 1 260px an beiden Kindern legt fest, dass es bei 260 Pixeln passiert.

In dieser schmalen Spalte ist das längst passiert, das Bild liegt über dem Text. Stellst du im Vollbild 592 in der Viewport-Leiste ein, stehen beide nebeneinander und sind im Auskunftsstreifen je 260 breit. Eine Stufe kleiner, und die Zeile bricht. Die 592 sind zweimal 260 plus 24 Abstand plus die 48 Innenabstand des Body, und so kannst du jedes Mal selbst ausrechnen, an welcher Breite die Zeile bricht.

Das ist dasselbe Muster wie beim Kartenraster, nur mit zwei Elementen statt sechs. Eine Media Query braucht es nicht. Die Kinder merken selbst, wann es zu eng wird.

Am Bild steht noch eine vierte Zeile, und ohne sie stimmt die Rechnung nicht. min-width: 0 nimmt ihm die eingebaute Untergrenze aus Abschnitt 9. Ein Flex-Item wird von Haus aus nie schmaler als sein längster unteilbarer Inhalt, und bei einem Bild ist das seine natürliche Breite, hier 600 Pixel.

Ohne die Zeile bricht dieselbe Reihe erst zwischen 930 und 940 Pixeln um. Bei 1000 Pixeln steht dann ein 600 Pixel breites Bild neben einem 328 Pixel schmalen Text, obwohl beide dieselbe Basis tragen. Dieser Fehler sieht aus, als hätte flex nicht funktioniert.

<section class="ueber-mich">
  <img src="/lernen/media/arbeitsplatz-600.jpg" alt="Ein Schreibtisch vor einer dunkelgrünen Wand mit Notizbuch, Farn, Tasse und Laptop">

  <div>
    <p>Ich baue Webseiten und erkläre, wie das geht.</p>
    <p>Hier rückt nichts. Beide Spalten quetschen sich weiter, bis nichts mehr davon zu gebrauchen ist.</p>
  </div>
</section>

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

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.ueber-mich {
  display: flex;
  gap: 24px;
  align-items: center;
}

/* Ohne flex-wrap oben und ohne Mindestbreite hier
   schrumpfen beide Spalten immer weiter. Bei 320px
   ist das Bild ein schmaler Strich und der Text eine
   Buchstabensäule. */
.ueber-mich img {
  width: 50%;
  display: block;
  border-radius: 12px;
}

.ueber-mich div {
  width: 50%;
}

.ueber-mich p {
  margin: 0 0 12px 0;
}

Ohne die beiden Zeilen schrumpfen beide Spalten einfach weiter. Bei 320 Pixeln ist das Bild nur noch ein schmaler Rest und der Text eine Säule aus einzelnen Wörtern. Damit kann niemand mehr etwas anfangen.

02 / 03Die Fußzeile, die unten bleibt

<header class="kopf">Kopfzeile</header>

<main class="inhalt">
  <p>Wenig Inhalt. Die Fußzeile klebt trotzdem am unteren Rand statt in der Mitte zu hängen.</p>
</main>

<footer class="fuss">Fußzeile</footer>

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

body {
  /* Der Körper ist so hoch wie das Fenster und
     stapelt seine drei Teile. */
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.kopf {
  padding: 16px 24px;
  color: #fafafa;
  background-color: #18181b;
}

.inhalt {
  /* Der mittlere Teil nimmt den ganzen Rest. */
  flex: 1;
  padding: 24px;
}

.fuss {
  padding: 16px 24px;
  font-size: 14px;
  color: #52525b;
  background-color: #f4f4f5;
}

Der Klassiker aus Abschnitt 9 ist die Fußzeile, die bei wenig Inhalt in der Mitte des Bildschirms hängt, mit Weiß darunter. Der Körper wird zur Spalten-Flexbox mit min-height: 100dvh, und der mittlere Teil bekommt flex: 1. Vier Zeilen.

dvh ist auf dem Handy die ehrlichere Angabe als vh. Dort fährt die Adressleiste beim Scrollen ein und aus, und vh meint die Höhe ohne sie.

03 / 03Die Abnahme

Wenn alles steht, kommt die Abnahme, und die findet jedes Mal etwas. Vier Durchgänge, zusammen zehn Minuten.

1. Einmal ohne Maus. Mit der Tabulatortaste geht es von oben nach unten durch die ganze Seite. Dabei muss jederzeit zu sehen sein, wo der Fokus steht, und jedes Ziel muss erreichbar bleiben. Fehlt hier etwas, merkst du es beim Bauen nicht, denn da benutzt du die Maus und bekommst den Fokusring nie zu Gesicht. Das geht auch hier. Klickst du einmal in die Seite der Aufgabe, wandert der Fokus mit jedem Tabulator durch sie hindurch, vom Logo über die Navigation zu den Buttons.

2. Einmal auf 400 Pixel, dann auf 320. Die 400 sind der Button Handy in der Viewport-Leiste und zugleich die zweite Prüfbreite. Die 320 sind die schmalste Breite, mit der man rechnen muss, und die kommt von Hand in die Leiste. Nichts darf waagerecht überlaufen, kein Text darf abgeschnitten sein, und jedes Ziel muss noch groß genug zum Antippen sein.

3. Einmal die Schrift auf 200 Prozent. Und zwar über die Einstellung Schriftgröße, nicht über den Zoom. Der Zoom skaliert alles mit, auch Pixelwerte, und deckt deshalb gar nichts auf. Die Schriftgröße lässt px stehen und vergrößert nur, was in rem oder em notiert ist. Wer seine Abstände in rem gesetzt hat, sieht eine Seite, die mitwächst. Wer sie in px gesetzt hat, sieht Text, der aus seinen Kästen läuft. In den Aufgaben dieses Kurses stehen sie in Pixeln, damit jeder dieselben Zahlen sieht wie die Prüfliste, auch wer seine Schrift größer eingestellt hat. In der eigenen Datei schreibe ich sie als Erstes um. Ausprobieren kannst du es schon hier, denn die Einstellung des Browsers wirkt bis in die Seite im Reiter „Browser“ hinein. Ihre Wurzelschrift geht dabei gemessen von 16 auf 32 Pixel.

4. Einmal im Dunkelmodus. Dafür wird das Betriebssystem umgeschaltet, und dann geht es noch einmal durch die Seite. Gesucht sind Stellen mit fest notierten Farben, die nicht mitgehen, meistens Rahmen und Schatten.

In der Aufgabe stehen alle Einzelteile gestaltet da, zu einer Seite zusammengesetzt sind sie noch nicht.