dozent.net
Projekt anfragen
Info

CSS3 Grundlagen und modernes Webdesign

Dieses Seminar fokussiert sich in zwei Tagen auf die visuelle Gestaltung von Webseiten mit Cascading Style Sheets (CSS). Du lernst das Box-Modell, Typografie, moderne Layout-Konzepte wie Flexbox und CSS Grid, Übergänge und Animationen sowie die Prinzipien des Responsive Webdesigns für mobile und Desktop-Ansichten.

Für wen ist dieses Seminar

Webentwickler, Frontend-Designer und UI/UX-Interessierte.

Das Angebot richtet sich an Unternehmen, Behörden und Selbstständige.

Was du mitbringen solltest

Solide HTML-Grundkenntnisse, etwa aus HTML5 Struktur und Semantik.

Detaillierte Inhalte

CSS-Grundlagen und Selektoren

  • Einbindung von CSS (Inline, Internal, External)
  • Syntax und Aufbau von CSS-Regeln
  • Selektoren: Typ, Klasse, ID, Universal- und Attributselektoren
  • Kombinatoren (Nachfahren, Kinder, Geschwister) und Pseudoklassen (:hover, :nth-child)
  • Die Kaskade, Spezifität und Vererbung (Das "C" in CSS)

Box-Modell und Typografie

  • Das CSS Box-Modell im Detail (Content, Padding, Border, Margin)
  • Steuerung des Box-Verhaltens (box-sizing: border-box)
  • Schriftarten einbinden (Web Fonts, Google Fonts)
  • Textformatierung, Zeilenabstand, Ausrichtung und Schatten (text-shadow, box-shadow)
  • Flüssige Typografie mit clamp()

Positionierung und Layout

  • Element-Flow: display (block, inline, inline-block, none)
  • Positionierung: static, relative, absolute, fixed, sticky
  • Umgang mit Überläufen (overflow) und Z-Index
  • Logische Eigenschaften (margin-inline, padding-block) für mehrsprachige und richtungsunabhängige Layouts

Moderne Layouts: Flexbox

  • Grundlagen des Flexible Box Module
  • Flex-Container und Flex-Items
  • Ausrichtung und Verteilung von Platz (justify-content, align-items, flex-wrap)

Moderne Layouts: CSS Grid

  • Einführung in zweidimensionale Layouts
  • Rasteraufbau: grid-template-columns, grid-template-rows
  • Platzierung von Elementen auf dem Grid
  • Kombination von Grid und Flexbox

Übergänge und Animationen

  • Sanfte Zustandswechsel mit transition
  • Keyframe-Animationen mit @keyframes

Moderne Selektoren und Cascade Layers

  • Kompaktere Selektoren mit :has(), :is() und :where()
  • Spezifitätskontrolle mit Cascade Layers (@layer)
  • Natives CSS-Nesting

Responsive Design und Media Queries

  • Mobile-First vs. Desktop-First Ansatz
  • Breakpoints definieren mit @media-Regeln
  • Container Queries (@container) als Ergänzung zu klassischen Media Queries
  • Flexible Bilder (max-width: 100%) und fließende Layouts
  • CSS-Variablen (Custom Properties) für Theme-Steuerung (z. B. Dark Mode)

Nutzerpräferenzen berücksichtigen

  • Automatisches Dark Mode mit prefers-color-scheme
  • Reduzierte Bewegungseffekte mit prefers-reduced-motion (Barrierefreiheit)

Dauer: 2 Tage

Was du danach kannst

  • Layouts mit Flexbox und CSS Grid zielgerichtet einsetzen
  • Responsive Design mobile-first mit Media Queries und Container Queries umsetzen
  • Übergänge und Animationen mit transition und @keyframes gestalten
  • Moderne Selektoren (:has(), :is(), :where()) und Cascade Layers nutzen
  • Flüssige Typografie mit clamp() und logische Eigenschaften einsetzen
  • Theming mit CSS-Variablen und Nutzerpräferenzen (Dark Mode, reduzierte Bewegung) umsetzen

Verwandte Seminare

Dein Dozent

Frank Glück schult seit mehr als 30 Jahren und programmiert seit fast 40 Jahren. Seit 1999 ist er auch als Dozent für die GFU tätig. Er schult modernes, wartungsarmes CSS ohne überladene Dritt-Frameworks.

Häufige Fragen (FAQ)

Wann verwendet man Flexbox und wann CSS Grid?

Flexbox ist ideal für eindimensionale Layouts (Zeile ODER Spalte, wie Navigationen oder Button-Leisten). CSS Grid ist für zweidimensionale Layouts (gleichzeitige Zeilen- und Spaltenstruktur ganzer Seitenbereiche) konzipiert. Beide Systeme ergänzen sich in modernen Web-Layouts perfekt.

Was bedeutet Mobile-First im modernen Webdesign?

Beim Mobile-First-Ansatz wird das Basis-CSS für kleine Smartphone-Displays optimiert. Über progressive @media (min-width: ...)-Regeln werden Layouts für Tablets und Desktops gezielt erweitert, was Ladezeiten minimiert und die mobile Usability maximiert.

Wie erleichtern CSS Custom Properties (Variablen) das Theming?

Mit CSS-Variablen (var(--color-primary)) lassen sich Farbwelten, Abstände und Dark-Mode-Themes zentral steuern. Eine Änderung des Wertes an der Wurzel (:root) aktualisiert das gesamte Erscheinungsbild verzögerungsfrei im Browser.

Individuell anfragen

Individuell anfragen