icon-arrow-lefticon-arrow

Kurzbeschreibung

Die Möglichkeiten mit geringem Aufwand responsive und semantisch korrekte Weblayouts zu erstellen waren nie vielfältiger als heute. Neuere Techniken wie CSS Grid und Flexbox ergänzen etablierte Lösungen wie die Positionierung mittels float, die display-Eigenschaft oder die CSS transform-Eigenschaft. Und man muss sich nicht einmal für eine Layouttechnik entscheiden: Moderne CSS-Layouts nutzen verschiedene Techniken in Kombination und machen sich die Stärken der jeweiligen Ansätze zunutze. Somit entstehen flexible Komponenten und robuste Layouts die auf jeder Bildschirmgrösse eine gute Figur abgeben.

In diesem Workshop werden Sie anhand zahlreicher, in sich abgeschlossener Übungen einzelne Website-Komponenten sowie ganze Seitenlayouts entwickeln. Der Fokus liegt hierbei  stärker auf der (responsiven) Architektur des Layouts und weniger auf der ästhetisch detaillierten Ausgestaltung mit Verläufen, Farben, Icons etc.  Nach diesem Workshop sind sie in der Lage angelieferte Layouts schnell und solide umzusetzen, schnelle Klick-Dummies herzustellen und bestehende Websites Stück für Stück zu modernisieren.

Wir klären im Rahmen der Schulung u.a. Fragen wie diese:

  • Was ist der Unterschied zwischen einem Inline-Block- und einem Block-Element?
  • Woran orientieren sich absolut positionierte Elemente?
  • Was ist der Unterschied zwischen translateX(-100%); und left: -100%;?
  • Für welche Eigenschaften steht die Kurzschreibweise flex: 1;?
  • Welches Layout entsteht mit grid-template-rows: repeat(3, minmax(min-content, 500px));?

Darüber hinaus erhalten Sie detaillierte Schulungsunterlagen zu allen behandelten Themen.


Agenda des CSS-Layout-Workshops

  • Block- ,Inline- & Inline-Block-Elemente verstehen und einsetzen
  • Floating, float-Basierte Layouts und flow-root
  • Das CSS-Boxmodell verstehen und manipulieren – box-sizing, background-clip & Co.
  • Die CSS display-Eigenschaft verstehen und einsetzen
  • Die CSS position-Eigenschaft verstehen und einsetzen
  • Responsive Layouts mit und ohne Media Queries erstellen
  • Layout mit klassenbasierte CSS-Gestaltungsrastern aufbauen (aka. Bootstrap-Grid)
  • Layouts und Komponenten mit Flexbox aufbauen
  • Layouts und Komponenten mit CSS Grid aufbauen
  • Moderne Layouttechniken (Flexbox, Grid etc.) kombinieren
  • Die transform-Eigenschaft verstehen und einsetzen
  • Mit CSS Shapes das Floating-Verhalten optimieren
  • neue Einheiten und Funktionen kennenlernen: vh/vw, minmax(), calc(), display:contents; …
  • CSS-Selektoren und Methodologien

Dozent

Jonas HellwigJonas Hellwig arbeitet als Web Designer, Video-Trainer, Fachbuchautor und Dozent in Berlin. Neben UX/UI-, Frontend- & Responsive Design hat er sich auf WordPress und Workflow-Optimierungen im Web Design 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 Veranstaltungen zum Thema Webdesign anzutreffen und unterstützt Digitalagenturen und Unternehmen bei der Planung und bei der technischen Umsetzung von Web-Projekten.


Kunden-Feedback zu unseren öffentlichen Schulungen

Das hat sich gelohnt: Workshop von @_kulturbanause zu »modernem #Webdesign« bei der @medienplantage. #StrukturvorDesign

Dezember 2014, Rainer Klute, @rainerklute – Quelle

Vielen Dank für zwei spannende Tage Input und Austausch. Jonas leitet die Seminare hochpräzise und aufmerksam, er geht jederzeit flexibel und geduldig auf wirklich alle Fragen ein und findet einen passenden Lösungsweg. Besonders wertvoll für mich, ist Jonas' spürbar große persönliche Leidenschaft für einerseits die Optimierung der komplexen Thematik selbst, aber vor allem auch die Lehre – eine ehrliche Begeisterung, die sich auf die Teilnehmer überträgt und konzentriertes Arbeiten auf hohem Niveau garantiert. Ein Seminar, das man mit fundiertem Wissen vom Jetzt bis in die nahe Zukunft verlässt und einer großen Freude direkt loszulegen.

November 2016, Miriam Stepper, Art Director, infoklick.ch

Das war so ein tolles Seminar. Einfach nur klasse. Vielen Vielen Dank !!!

Oktober 2015, Detlef Heese, Geschäftsleitung & Diplom Designer, Hasegold GmbH

Das Seminar „Responsive Webdesign“ am Freitag war eine echte Erleuchtung. Jonas Hellwig hat die Schulung gut strukturiert, zugänglich gestaltet und keine Fragen offengelassen.

Dezember 2014, Marco Sablotzki – Quelle

Dieser interessante Workshop gehalten von Jonas Hellwig (kulturbanause.de) brachte viele neue Erkenntnisse in Sachen Workflow im Response Webdesign.

Juli 2014, Nina Evers – Quelle


Zur Schulung »CSS Layouts« vergleichbare öffentliche Termine

Alle öffentlichen Schulungen anzeigen

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