icon-arrow-lefticon-arrow

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 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

Voraussetzungen für sauberen CSS-Code

  • HTML-Semantik und Barrierearmut
  • 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

Jonas HellwigJonas Hellwig arbeitet als Web Designer, Video-Trainer, Fachbuchautor und Dozent in Berlin. Neben UX/UI-, Frontend- & Responsive Design hat er sich auf Workflow-Optimierungen im Design-Prozess spezialisiert und ist Gründer der Agentur kulturbanause® (kulturbanause.de). Auf blog.kulturbanause.de veröffentlicht er interessante Artikel, Tipps und Tutorials zum Thema Web Design. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Website-Projekten.


Kunden-Feedback zu unseren Inhouse-Schulungen

Das war ein tip-top Workshop mit dem @_kulturbanause heute. Ich würde ihn gern als Missionar zu allen Kunden dieser Welt schicken :)

August 2013, Carsten Fischer, triplesense Reply GmbH – Quelle

Der Workshop zu SVG-Grafiken war spannend, zukunftsweisend und in einem breiten Arbeitsumfeld bereichernd. Jonas Hellwig gibt einen umfassenden Einblick in Anwendungsgebiete und fokussiert gekonnt die individuell relevanten Schwerpunkte. Ein intensiver und wertvoller Lehrgang – besonders an der Schnittstelle zwischen Gestaltung und Entwicklung, der zu neuen Ansätzen motiviert und mir als Designer technische Möglichkeiten verständlich und zugänglich macht.

April 2017, Miriam Stepper, Grafik-Designerin, infoclick.ch

Zwei Tage mit großartigem Input - danke an Jonas. Es war die reine Freude jemandem zuzuhören, der unglaublich kompetent und mit vielen Beispielen und Praxiserfahrungen das umfangreiche Thema RWD so verständlich und interessant rüberbringt, dass wir gern noch mehr davon gehabt hätten. Wirklich fantastisch - wir empfehlen Euch sehr,  jederzeit. Vielen Dank auch für die umfangreiche Seminardokumentation.

April 2017, Friederike Kussin, Design und Internettechnik, Amt für Statistik Berlin-Brandenburg

Das Responsive-Training fanden wir klasse präsentiert und sehr praxisbezogen. Trotz der Themen-Agenda ist Jonas immer wieder auf individuelle und Projekt-bezogene Fragen eingegangen. Besonders gefallen hat uns die gut verständliche Zusammenführung der beiden Welten Design und Programmierung. Im Anschluss haben wir gleich unser erstes Projekt zu 100% durchziehen können.

Dezember 2014, Mathias Weber, Senior Project Manager, AP Design GmbH

Für mich das ideale Seminar um mich auf dem Gebiet des Responsive Design in der Theorie fit zu machen. Der Wissensanteil und Lerneffekt war sehr groß.

April 2017, Lars Zacharias, Business Analyst


Öffentliche Schulungen für Entwickler

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet:

diegruenen