Bau dir was

Das Portfolio aus diesem Kurs gehört Mario, die Projekte darin sind seine. Das eigentliche Ziel sind aber Seiten, die du selbst brauchst. Was auf deinem Rechner entsteht, kann ich von hier aus nicht prüfen, und ich tue auch nicht so, deshalb hat diese Lektion keine Aufgabe. Sie sammelt Ideen, die mit dem Kurs schon gehen, und zeigt, wie man so eine Seite angeht.

01 / 04Wie man eine eigene Seite angeht

Am Anfang steht nicht die erste Regel, sondern die Entscheidung, welche Werte es überhaupt geben soll, also eine Abstandsskala, ein paar Schriftgrößen und Farben nach ihrer Rolle, wie in Abschnitt 5. Wer die Tokens oben stehen hat, fragt danach bei jeder Zahl nur noch, welche Stufe gemeint ist.

Dann kommt das Layout, von außen nach innen wie in Abschnitt 11, also erst die großen Bereiche, dann was in ihnen passiert, dann die einzelne Komponente, zuletzt Zustände und Fokusringe. Die Datei liegt dabei auf dem eigenen Rechner und ist in Layer geordnet, beides wie am Anfang dieses Abschnitts.

Am Ende nehme ich jede Seite auf dieselbe Art ab wie das Portfolio, einmal mit der Tastatur durch, einmal auf 320 Pixel schmal, einmal die Schrift im Browser auf 200 Prozent und einmal im Dunkelmodus.

02 / 04Das Portfolio mit deinem Namen

<header class="kopf">Lena Kraus</header>

<article class="projekt">
  <h3>Fahrradkarte</h3>
  <p>Alle Radwege der Stadt auf einer Karte, mit Steigungen.</p>
</article>

/* Nur der Token-Block ist neu. Die Regeln darunter
   stehen so da wie im Portfolio aus 16.5. */
:root {
  --abstand-xs: 4px;
  --abstand-m: 16px;
  --abstand-l: 24px;
  --radius-m: 12px;
  --farbe-text: #1c1917;
  --farbe-gedaempft: #57534e;
  --farbe-flaeche: #ffffff;
  --farbe-linie: #d6d3d1;
  --farbe-dunkel: #134e4a;
  --farbe-auf-dunkel: #f0fdfa;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: var(--farbe-text);
}

.kopf {
  padding: var(--abstand-m) var(--abstand-l);
  font-weight: 700;
  color: var(--farbe-auf-dunkel);
  background-color: var(--farbe-dunkel);
}

.projekt {
  max-width: 380px;
  margin: var(--abstand-l);
  padding: var(--abstand-l);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-m);
  background-color: var(--farbe-flaeche);
}

.projekt h3 {
  margin: 0 0 var(--abstand-xs) 0;
}

.projekt p {
  margin: 0;
  color: var(--farbe-gedaempft);
}

Die naheliegendste Idee ist die Seite aus 16.5 mit deinem Namen, deinen Projekten und deinen Farben. Das Markup nimmst du mit, die Texte schreibst du neu, und im Token-Block stellst du ein paar Werte um. Im Beispiel sind es die Farbrollen, aus dem dunklen Grau der Kopfzeile wird ein Petrol, aus den kühlen Grautönen warme. Keine Regel darunter ist angefasst, und die Seite sieht trotzdem anders aus.

Projekte, die es noch nicht gibt, lasse ich weg. Drei echte Karten sind besser als sechs ausgedachte, und das Raster aus Abschnitt 10 kommt mit drei genauso gut zurecht.

03 / 04Die Rezeptseite aus dem HTML-Kurs

<article class="rezept">
  <h1>Linsensuppe</h1>
  <p class="einleitung">Rote Linsen, fertig in zwanzig Minuten.</p>

  <h2>Zutaten</h2>
  <ul class="zutaten">
    <li>250 g rote Linsen</li>
    <li>1 Zwiebel</li>
    <li>1 Liter Gemüsebrühe</li>
    <li>1 Teelöffel Kreuzkümmel</li>
  </ul>

  <h2>Zubereitung</h2>
  <ol class="schritte">
    <li>Die Zwiebel würfeln und glasig dünsten.</li>
    <li>Linsen und Brühe dazugeben und zwanzig Minuten köcheln lassen.</li>
    <li>Mit Kreuzkümmel abschmecken und fein pürieren.</li>
  </ol>
</article>

body {
  margin: 0;
  padding: 24px;
  font-family: Georgia, serif;
  line-height: 1.6;
  color: #292524;
  background-color: #fafaf9;
}

/* Eine Lesebreite in Zeichen, wie in 6.6. */
.rezept {
  max-width: 60ch;
  margin-inline: auto;
}

.rezept h2 {
  margin: 32px 0 8px 0;
  font-size: 20px;
  color: #b45309;
}

.einleitung {
  font-size: 20px;
  color: #57534e;
}

/* Die Zutaten verteilen sich selbst auf so viele
   Spalten, wie hineinpassen, wie in 10.2. */
.zutaten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 4px 24px;
  padding: 0;
  list-style: none;
}

.schritte li {
  margin-bottom: 8px;
}

Wer den HTML-Kurs gemacht hat, hat dort eine Rezeptseite gebaut, sauber gegliedert und ohne eine Zeile CSS. Sie ist ein gutes zweites Projekt, weil ihr Aufbau ein anderer ist als beim Portfolio, mit einem langen Text statt Karten, Zutaten als Liste und der Zubereitung als nummerierten Schritten. Im Beispiel bekommt sie eine Lesebreite in Zeichen, eine Schrift mit Serifen und Zutaten, die sich selbst auf Spalten verteilen.

04 / 04Weitere Ideen

Eine Seite für deinen Verein mit den Trainingszeiten als Tabelle, die auf dem Telefon waagerecht scrollt wie in Abschnitt 14. Eine Linksammlung zu einem Thema, das dich interessiert, als Raster aus Karten. Eine Visitenkarte als einzelne Seite, nur Hero, ein paar Sätze und das Kontaktformular aus dem Portfolio.

Danach kommt noch der Test zu diesem Abschnitt, und dann hast du CSS durch.