CSS-Variablen

Bootstrap-Grundlagen: Webseiten mit Grid, Utility-Klassen und Komponenten gestalten

Bootstrap ist ein CSS-Framework mit einem Raster für Layouts, Hilfsklassen für Abstände und Farben sowie fertigen Komponenten wie Navigationsleisten, Tabellen und Formularen. Am Beispiel der Abfahrtsanzeige für den Flurmonitor lernst Du, Bootstrap per CDN, WebJar und npm einzubinden, ein Layout mit Containern, Zeilen, Spalten und Breakpoints zu bauen, Utility-Klassen und Komponenten zu nutzen und Bootstrap über CSS-Variablen anzupassen, ohne die Bibliothek zu ändern. Zum Schluss: wo Bootstrap bei der Barrierefreiheit hilft und wo Du selbst nacharbeiten musst.

CSS-Grundlagen: Webseiten gestalten mit Selektoren, Box-Modell, Flexbox und Grid

CSS legt fest, wie eine Webseite aussieht: Schriften, Farben, Abstände und die Anordnung der Bereiche. Am Beispiel der Abfahrtsanzeige für einen Flurmonitor lernst Du, wie Du ein Stylesheet einbindest, Elemente mit Selektoren auswählst und vorhersagst, welche Regel sich durchsetzt. Du berechnest Maße mit dem Box-Modell, wählst passende Einheiten und Farben mit ausreichendem Kontrast und baust ein Layout mit Flexbox und Grid, das sich per Media Query an einen hochkant montierten Monitor anpasst.