Seminar: CSS für Webanwendungen

In diesem Workshop lernen Dev-Teams, wie einzelne Komponenten und responsive Layouts mit modernem CSS umgesetzt werden. Der Fokus liegt klar auf den typischen Anforderungen in der Umsetzung von WebApps. Wir arbeiten nah am Webstandard und besprechen die Probleme, die durch den Einsatz von Frameworks entstehen können.

Kurzbeschreibung

Das Layout einer Web-App stellen die Anwendungsentwicklung vor zahlreiche Herausforderungen. Einzelne Komponenten müssen entwickelt werden, ohne dass der Code Konflikte mit anderen Bereichen der Anwendung auslöst. Komplexe Layouts mit aufklappbaren oder scrollbaren Bereichen und zahlreichen Zuständen müssen passgenau für alle Displaygrößen und Eingabearten gestaltet werden. Umfangreiche Tabellen und Formulare gilt es benutzerfreundlich darzustellen und das alles bei sehr dynamischen Datensätzen und tendenziell zu wenig Platz auf dem Display.

Unser Workshop zum Thema »CSS für Webanwendungen« richtet sich an die Zielgruppe der Anwendungsentwickler*innen, die sich mit der Aufgabe konfrontiert sehen eine Web-Application mit HTML und CSS zu gestalten. Häufig geschieht dies auf Grundlage eines oder mehrerer sich bereits im Einsatz befindender Frameworks.

Der Schwerpunkt der Schulung liegt auf der praktischem Umsetzung des Layouts und einzelner Komponenten mittels modernem HTML/CSS. Angefangen bei notwendigen Grundlagen, bis hin zu modernen Layout-Techniken, lernen Sie alles was notwendig ist um ein anspruchsvolles Layout fehlerfrei und zielsicher in den Browser zu bringen. In diesem Zusammenhang werden auch Themen wie Barrierefreiheit, Browserkompatibilität, CSS-Namenskonzepte, Präprozessoren, Progressive Enhancement sowie notwendige gestalterische und konzeptionelle Grundlagen behandelt.

Das Ziel des Workshops besteht schwerpunktmäßig darin, relevante HTML- und CSS-Techniken praktisch zu erlernen. Darüber hinaus soll auch ein allgemeiner Überblick geschaffen werden, was einen Blick auf die angrenzenden Disziplinen einschließt.

Agenda: CSS für Web-Applications

Wir erstellen für jede Schulung eine maßgeschneiderte Agenda. Die hier gelisteten Themen werden häufig gewünscht bzw. sind aus unserer Sicht relevant. Nach dem Vorab-Gespräch werden die Themen und Schwerpunkte individuell auf das jeweilige Team bzw. Projekt angepasst.

Voraussetzungen für sauberen CSS-Code

• HTML-Semantik und Barrierefreiheit
• CSS Spezifität
• CSS-Selektoren
• Das CSS Box-Modell
• Positionierung mit CSS
  • position
  • float
  • Block-, Inline- & Inline-Block-Elemente

Workflow und Best Practises

• CSS-Methodologien (BEM, ITCSS, OOCSS etc.)
• Style Scoping
• Build-Prozesse und hilfreiche Tools
• Präprozessoren (z.B. Sass)
• CSS Variablen
• Browsersupport
• Progressive Enhancement
• Feature Detection mit @supports
• SVG
• Atomic Design, Design Systeme & Co.
• UI-Kits und Component Libraries

Responsive Web Design (RWD)

• Konzepte und RWD-Basics
• Media Queries
• Mobile First vs. Desktop First
• Viewport-Einstellungen
• Interaction Type Media Queries
• Breakpoints für Komponenten
• Responsive Design ohne Media Queries
• Flexible Typografie
  • Schrifteinheiten verstehen (em, rem etc.)
  • Variable Fonts
• Flexibilität erreichen (vh, vw, calc() etc.)

CSS Layoutmodelle

• Abgrenzung von echten CSS-Layoutmodellen zu Grid-Frameworks (Bootstrap und Co.)
• Flexbox
  • Grundlagen und Konzepte
  • Übungen anhand eines Praxisprojekts
• CSS Grid
  • Grundlagen und Konzepte
  • Übungen anhand eines Praxisprojekts

Flexible Komponenten & Layouts

• Tabellen
• Formulare
• Dialoge und Modals
• Icon- und Icon-Systeme
• Scrolling
• Zustände und Varianten organisieren
• Umgang mit bestehenden Komponenten
• Theming und Skinning

Dozent: Jonas Hellwig