Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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

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

Das Seminar findet in der »WeiberWirtschaft« in der Anklamer Str. 38 in Berlin-Mitte statt.

Fotos des Seminarraums in der Weiberwirtschaft Berlin. Fotos: Weiberwirtschaft

Der Eingang befindet sich im Durchgang vom 1. Innenhof in den 2. Innenhof rechts im Aufgang. Sie finden die Seminarräume im 4. OG. Ein Aufzug ist vorhanden.

Kaffee, Tee, kalte Getränke, Obst und Gebäck stehen Ihnen den ganzen Schulungstag über zur Verfügung. In der Mittagspause gehen Sie gemeinsam mit dem Dozenten und den anderen Teilnehmern in einem Restaurant in der Nähe des Seminarraums essen. Dort werden neben fleischhaltigen auch vegetarische und vegane Gerichte angeboten. Die Kosten sind im Seminarpreis enthalten.

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 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 öffentlichen Schulungen

  • Es war ein sehr interessantes, inspirierendes und gut erklärtes Seminar. Habe viel gelernt. Vielen Dank!

    Dezember 2019, Katja Mainzer, Projektleiterin Design, 3st kommunikation GmbH

  • Der Referent vermittelt den Seminarstoff verständlich und nachvollziehbar. Anweisungen und Übungen sind präzise und hilfreich. Top!

    Dezember 2019, Thomas Pienz, UX-Design, DATEV

  • Bestens! Verständlich, umfassend, ausführlich, humorvoll wurden wir upgedatet in Sachen »Modernes Webdesign für Grafik und CD«. Fühle mich jetzt bestens informiert! Danke

    Dezember 2019, Simone Meer, Diplom-Grafik-Designerin bei OnGoingMedia

  • Ich habe mich von Beginn an abgeholt gefühlt und viele neue Sachen erfahren sowie bekanntes vertieft. Dankeschön für die zwei aufschlussreichen Tage -- ich freue mich, alles Gelernte anzuwenden.

    Dezember 2019, Marleen Hollerbach, Web-/Mediendesignerin, iWelt AG

  • Danke für die 2 Tage Input und Inspiration. Der Funke ist innerhalb kurzer Zeit übergesprungen. Ich gehe mit einem positiven + energiegeladenen Eindruck in den Arbeitsalltag zurück und freue mich, die neuen Erkenntnisse in die neuen Projekte mit integrieren zu können.

    Dezember 2019, Rebekka Petri, Mediendesignerin, iWelt AG

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: