Eine Website coden

Heute geht es darum, eine kleine Website zu machen. Sie besteht aus zwei Seiten.

• eine Übersichtsseite (index.html)
• eine Detailseite (detail.html)
• stylesheet (style.css)
• ein Bilderordner

Am Ende sollten die Schriftgrössen und Abstände eingestellt sein und es sollte einen Breakpoint von Mobile auf Desktop geben. Du arbeitest dazu im Texteditor und im Browser (Dev Tools).

Ziele

• Repetition Grundlagen HTML/CSS
• Vertiefung Box Model (margin, padding)
• Erste Kontakte mit Flex und Grid.

Inputs heute

1. Input einen Google Font einbinden
2. Input Einstellen der Schriftgrössen mit CSS
3. Input Media Queries (Breakpoint)
4. Input Grid und Flex, was ist das? (Nachmittag)

Es gibt nur zu Beginn eine Übung zu zweit. Du kannst dich aber gerne auch für die Übrigen Tasks mit einem Gspänli zusammentun und zu zweit coden. Z.B. indem ihr das Live Share Plugin für Visual Studio Code ausprobiert (nehmt euch ruhig Zeit dafür). Statt Breakout Sessions in Zoom könnt ihr in Discord auch Voice Calls machen.

Googlen

Es ist normal, nicht alles zu wissen. Auch erfahrene Programmierer*innen verbringen viel Zeit mit Googlen und Nachschlagen. Mit zunehmender Erfahrung suchst du zielgerichteter und kennst einschlägige Websites wie das Mozilla Developer Network MDN, CSS Tricks und STack Overflow. Also Kopf hoch!

Kommentare in Programmiersprachen

In Programmiersprachen heissen Zeilen und Abschnitte, die nicht interpretiert/ausgeführt werden Kommentare. So kannst du Notizen in deinen Code schreiben oder Elemente «deaktivieren» anstatt sie zu löschen.

In HTML beginnen Kommentare mit <!-- und enden mit -->. Was dazwischen steht, wird nicht gerendert.

Die meisten Texteditoren haben ein Tastaturkürzel, die eine Zeile oder einen ausgewählten Bereich kommentieren, bzw. entkommentieren. In VSC ist es wahrscheinlich cmd shift 6 (du findest den Shortcut im Menü «Bearbeiten»).

Kommentare in CSS: /* background: yellow; */

Und – vollständigkeitshalber – Kommentare in JavaScript // console.log('hi!') und in Python # print('hi!').

Text mit CSS formatieren

Hier eine Reihe von CSS-Eigenschaften, mit denen Du Text formatieren kannst.

Schriftfamilie

font-family: 'helvetica neue', arial, sans-serif;

Schriftfamilien-Namen mit Abständen werden in Anführungszeichen gesetzt: 'helvetica neue'.

Es können mehrere Namen angegeben werden (sog. ‘Fallback’). Auf einem System ohne Helvetica wird Arial benutzt, ist auch von dieser Schriftfamilie kein Font verfügbar, wird eine beliebige Serifenlose verwendet.

Schriftgrösse und Zeilenhöhe

Die Schriftgrösse kann in verschiedenen Masseinheiten angegeben werden. Üblich sind Pixel px und rem.

«Durchschuss» als solches lässt sich am Screen nicht einfügen (die Bleiplättchen würden den Monitor beschädigen), definiert wird stattdessen die Zeilenhöhe. Es kann ein Wert in Pixeln angegeben werden, besser ist aber ein Faktor ohne Massangabe, der sich auf die Schriftgrösse bezieht.

font-size: 24px;
line-height: 1.25;

In diesem Beispiel beträgt die Zeilenhöhe 1.25 × 24 px = 30px.

em und rem

Die Masseinheiten em und rem stehen für das Schriftgeviert und werden ausgehend von einer Basisgrösse errechnet. Bei rem ist es die Schriftgrösse des Selektors :root, bei em die des nächsten übergeordneten Elements, das eine definierte Schriftgrösse hat (fehleranfällig).

TL;DR – Verwende rem, nicht em!

:root {
    font-size: 100%; /* Browser default */
    line-height: 1.3;
}

h1 { font-size: 1.75rem; }  /* 28px */

h2 { font-size: 1.375rem; } /* 22px */

p  { font-size: 0.875rem; } /* 14px */

@media (min-width: 700px) { /* Breakpoint, siehe unten */
    :root { font-size: 150%; }
}

Mit diesen Masseinheiten kannst du aufeinander abgestimmte Schriftgrössen definieren. Um das ganze System an verschiedene Ausgabegeräte oder Screen-Grössen anzupassen, reicht es, einen einzigen Grundwert anzupassen und alle Schriftgrössen werden proportional skaliert.

Im Beispiel oben ist der letzte Abschnit eine ‘Media Query’ (siehe unten): Das sind Regeln, die nur unter bestimmten bedingungen gelten, hier z.B. für Bildschirme, die breiter als 700 Pixel sind.

Punkt

Die Einheit Punkt pt gibt es auch in CSS. Sie ist ca. ein Viertel grösser als ein Pixel und entspricht dem typographischen Punkt (1/72 Zoll). Ob ein Screen entsprechend geeicht ist, ist nicht gewährleistet. Darum solltest du Einheiten wie Punkt und Millimeter nur für Print-Stylesheets einsetzen.

Verwirrenderweise sprechen auch iOS-App Developer von Punkt, meinen damit aber eine Einheit, die gleich gross wie ein CSS-Pixel ist 🤯. Damit soll eine Verwechselung mit den eigentlich im Gerät eingebauten Device-Pixel vermieden werden, deren Anzahl bei gleicher Breite je nach Gerät stark variieren kann. So sind die Bildschirme von iPhone 6 bis iPhone X 375 CSS-Pixel breit, enthalten aber auf der Horizontalen in Wirklichkeit zwischen 750 und 1242 «Gerätepixel».

Fun Fact: Unter Andoid Devs heisst die Einheit wiederum dp.

Schriftgewicht, -schnitt etc.

font-weight: normal;
font-weight: bold;

Oder, wenn es genug Schnitte gibt, in 100er-Schritten:

font-weight: 300; /* light */

font-weight: 600; /* semibold */

font-weight: 900; /* black */

Für Experten: Welchem Schriftgewicht welche Zahl zugeordnet wird, kannst du mit der @font-face Regel einstellen.

Die nachfolgenden Eigenschaften brauchen keine Erläuterung:

font-style: italic;
text-transform: uppercase;

Ausrichtung und Einzug

text-indent: 2rem;
text-align: center; /* oder left, right, justify */

Margin und Padding

Jedes Block-Element (das sind die, die vor- und nachher einen Umbruch machen), haben einen Abstand nach aussen (margin) und einen nach innen (padding). Dies gilt auch im Zusammenhang mit Grid und Flex.

Diese Abstände können einzeln definiert werden:

margin-top: 10px;
margin-bottom: 50px;
margin-left: 0;
margin-right: 50px;

Oder paarweise: Zuerst den Abstand nach unten und oben, dann den Seitlichen.

margin: 20px auto;

In diesem Beispiel wird der Abstand nach links und rechts als auto angegeben: Dadurch wird ein Element eingemittet.

Es geht auch zu dritt (nach oben, links/rechts, nach unten).

margin: 0 auto 50px;

Oder zu viert (oben, rechts, unten, links):

margin: 10px 0 50px 200px;

Wenn es auf jede Seite gleich viel ist, reicht ein einziger Wert:

padding: 15px;

Den Bereich zwischen Aussen- und Innenabstand kannst du mit einer Hintergrundfarbe (background: papayawhip;) oder einem Rand (border: 1px solid fuchisa) sichtbar machen.

Flexbox

Mit display: flex entsteht in einem HTML-Element eine Achse, an der du die Children dieses Elements ausrichten kannst.

Eine Möglichkeit, ein Element mit der ID #content auch bei wechselnder Viewport-Grösse einzumitten:

body {
  height: 100vh;
  display: flex;
}

#content {
    margin: auto;
}

Die Achse, die mit display: flex erzeugt wird, kann horizontal verlaufen flex-direction: row; (default) oder vertikal flex-direction: column;.

Die im Flex- Elemente kannst du mit der Eigenschaft justify-content entlang der Hauptachse anordnen und mit align-items auf der quer zur Hauptachse verlaufenden sekundären Achse.

Hier ein Beispiel, wie du die Elemente in <body> gleichmässig auf der Vertikalen verteilen und in der Spalte einmitten kannst:

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-igems: center;
}

Flexbox Lernen

• Fürs Erste reicht es, das Prinzip der zwei Achsen zu verstehen.
• Der Trick mit dem Einmitten ist auch noch nützlich.
• Wenn du es genauer wissen möchtest, kannst du einmal Flexboxfroggy spielen.

CSS Grid

(Das musst du nicht am Tag dieses Coding-Workshops lesen, es könnte aber bei der Mondrian-Hausaufgabe helfen.)

Seit 2017 bietet CSS die Möglichkeit, ein HTML-Element zu Rastern. Das heisst, es wird in eine bestimmte Anzahl Spalten aufgeteilt. Alle HTML-Elemente, die im gerasterten Element enthalten sind, werden in diese Spalten abgefüllt. Wenn keine Rasterzeilen definiert sind, ergibt sich die Höhe der Zeilen von alleine (durch die Höhe des höchsten Elements in einer Zeile).

#my-grid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-gap: 20px;
}

In diesem Beispiel werden zwei gleich breite Spalten erzeugt, dazwischen eine 20px breite Lücke.

Als Werte können Pixel, Prozente und alle anderen gebräuchlichen Einheiten verwendet werden. Interessant ist die Einheit fr (‘fraction’). Sie unterteilt auf einfache Weise den verfügbaren Platz in aufeinander abgestimmte Grössenverhältnisse:

grid-template-rows: 1fr 2fr 3fr; – drei Spalten im Verhältnis 1:2:3.

grid-template-rows: 1fr 2fr 1fr; – die mittlere Spalte ist so breit wie die Linke und die Rechte zusammen.

grid-template-rows: 2fr 2fr 4fr; – das Gleiche wie grid-template-rows: 1fr 1fr 2fr; 😉

Media Queries (Breakpoints)

In deinem Stylesheet kannst du Regeln abhängig davon machen, ob das Ausgabegerät bestimmte Bedingungen erfüllt. Die häufigste Anwendung dürfte das Abfragen der Viewport-Breite sein.

:root {
    font-size: 100%;
    line-height: 1.2;
}

@media (min-width: 700px) {
    :root {
      font-size: 200%;
      line-height: 1.4;
    }
}

Beachte, dass es hier eine Verschachtelung von geschweiften Klammern gibt. Typischer Fehler: die letzte Klammer vergessen.

In diesem Beispiel wird eine Basis-Schriftgrösse festgelegt, die mit den Einstellungen des Browsers übereinstimmt. Für Screens, die breiter als 700px sind, soll die Basisgrösse doppelt so gross wie die im Browser eingestellte sein (führwahr ein kühnes Unterfangen).

Links

• Flexboxfroggy ist ein Spiel, um Flexbox zu lernen.
• MDN, Basic concepts of flexbox
• A Complete Guide to Flexbox bei CSS-Tricks bietet eine bebilderte Übersicht zum Nachschlagen.
• CSS Grid Garden ist ein Spiel, um CSS Grid zu lernen.
• Grid by Example ist Rachel Andrews Website, um Grid zu lernen. Es gibt viele kurze Videos und Beispiele.
• A Complete Guide to Grid bei CSS-Tricks – dasselbe für CSS Grid.
• MDN, Using media queries
• MDN, CSS Grid Layout

Hausaufgaben

• Das VS Code Plugin «Live Share» installieren. Damit kann ich meinen Editor mit der ganzen Klasse share oder Einzelnen direkt im Editor helfen.
  • Anleitung Benutzung
  • Wenn du keinen Microsoft Account hast (warum auch?) brauchst du einen bei GitHub.
• Mindestens einen Responsive Mondiran Coden.
  • Es wird auch hier wieder Videos geben.