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

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

Toll erklärt und ganz viel Wissen vermittelt. Jonas bringt die Dinge auf den Punkt und man kann sehr leicht folgen.

Mai 2017, Kerstin Müller, mueller macht web

Vielen Dank für das tolle Seminar. Hat mir viel gebracht. Für das Anwenden wäre noch so eine Art Prio-Liste cool.

November 2016, Thomas Mohr, Projekteiter HMI, UX, UI (SCA Part Of Atlas Copco Group)

Meine Erwartungen an den Kurs wurden zu 100% erfüllt. Jonas schafft es einfach komplexe Dinge kurzweilig und gut verständlich zu vermitteln. Am besten hat mir die »gelebte Flexibilität« bei den Themen gefallen. Durch die überschaubare Anzahl an Teilnehmern war viel Raum für Fragen da und es wurde nicht einfach die Agenda nach Plan herunter gespult. Danke für zwei tolle Tage, ich komme wieder – keine Frage ☺

November 2017, Holger Neuner, Inhaber 47GradNord – Agentur für Internetlösungen

Ihr Kommentar zu diesem Termin

Ihr Kommentar zu diesem Termin

Bei Fragen, Anregungen oder Kritik zu diesem Termin, nutzen Sie bitte das Kommentar-Formular.

Ihr Kommentar wird überprüft bevor er auf der Website erscheint. Nicht themenrelevante Beiträge werden gelöscht.

Für diesen Termin anmelden

Wenn Sie sich für »CSS-Layouts – Responsive Websites mit Grid, Flexbox und Co. (2 Tage)« am 21.11.2018 – 22.11.2018 in Berlin anmelden möchten, füllen Sie bitte das folgende Anmeldeformular sorgfältig aus. Wir verwenden diese Angaben für die Rechnung. Sie erhalten eine Kopie Ihrer Angaben per E-Mail.

Bitte beachten Sie, dass das Seminar nur stattfindet, wenn die Mindestteilnehmerzahl erreicht wird. Wir informieren Sie, sobald die Veranstaltung garantiert stattfindet – spätestens 30 Tage vor dem Termin. Sie erhalten die Rechnung sowie weitere Infos zur Veranstaltung ebenfalls kurz vor dem Termin.

Details zu unserem Rabattsystem finden Sie hier.

Ihre Anfrage wird verschlüsselt an uns übermittelt. Sie erklären sich damit einverstanden, dass wir Ihre Angaben zur Beantwortung Ihrer Anfrage verwenden dürfen. Hier finden Sie Infos zum Datenschutz.

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: