CSS-Layouts – Responsive Websites mit Grid, Flexbox und Co.
Von Jonas Unser Workshop mit dem Schwerpunkt der CSS Layout-Architektur vermittelt Frontend-Designern und -Entwicklern einen umfassenden Überblick über neue und etablierte Layout-Techniken.
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%);undleft: -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 undflow-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
Voraussetzungen & Zielgruppe
Sie sollten bereits Erfahrungen im Schreiben von HTML und CSS mitbringen, da wir uns um die konkrete Anwendung der o.g. Techniken kümmern möchten.
Damit Sie die Übungen live mitmachen können, benötigen Sie ein eigenes Notebook mit einem Code-Editor ihrer Wahl sowie einen modernen Browser in neuester Version. Der Dozent verwendet in der Schulung Google Chrome sowie den kostenlosen Editor »Brackets« (brackets.io)
Die Sprache des Seminars ist Deutsch. Die Schulungsunterlagen werden ebenfalls in deutscher Sprache bereitgestellt.
Veranstaltungsort & Verpflegung
[info_location_weiberwirtschaft_berlin]
[info_catering]
Dozent
Jonas Hellwig ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
Kunden-Feedback zu unseren öffentlichen Schulungen
[testimonials kategorie=“Oeffentliche Schulung“ posts_per_page=“5″ slider=“true“]
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.