HTML & CSS – Fortgeschrittene Techniken

In dieser Schulung vertiefen wir vorhandene HTML/CSS-Kenntnisse. Wir beschäftigen uns u.a. mit Responsive Design, anspruchsvolleren Layouts und interessanten Gestaltungseffekten. Nach dem Hands-On-Prinzip zeigen wir, wie benutzerfreundliche und robuste Websites erstellen werden.

Kurzbeschreibung

Aufbauend auf soliden Grundkenntnissen werden Sie in diesem Workshop die Prinzipien von CSS anhand diverser in sich abgeschlossener Übungen erarbeiten. Sie vertiefen Ihr Wissen über Positionierung, Layoutmodelle, Typografie und Gestaltung, lernen neue Selektoren, Animationsmöglichkeiten und Workflow-Konzepte kennen und bekommen zahlreiche Tools und Tricks gezeigt, die Ihnen die tägliche Arbeit spürbar erleichtern werden. Und um auch für die Zukunft gewappnet zu sein, werfen Sie einen Blick auf die spannendsten experimentellen CSS-Funktionen.

Inhalte der HTML- & CSS-Schulung

Wir erstellen für jede Schulung eine maßgeschneiderte Agenda. Die hier gelisteten Themen werden häufig gewünscht bzw. sind aus unserer Sicht relevant. Nach dem Vorab-Gespräch werden die Themen und Schwerpunkte individuell auf das jeweilige Team bzw. Projekt angepasst.

• Positionierung und Layoutmodelle
  • Die Kaskade verstehen
  • Floats und Positionierungen verstehen
  • Display Inline-Block
  • Display-Table
  • Content Choreography
  • Das Grid Layout Module
  • Flexbox
  • Die Box-Modelle von CSS
• CSS Selektoren
  • Attribut-Selektoren
  • Kind- und Geschwister-Selektoren
  • Nth-Of-Selektoren
  • Der Target-Selektor
  • CSS4-Selektoren
• Farbe, Gestaltung und Effekte
  • Komplexe Verläufe
  • Muster mit CSS
  • Komplexe Hintergrundgestaltung mit CSS
  • Schatten
  • Data-URIs und Code-generierte Grafiken
  • Shapes
  • Blend Modes
  • Filter
  • Counter
  • Berechnungen mit CSS
  • CSS-Variablen
  • Animationen mit CSS
  • 3D & 2D-Transformationen
  • Webfonts und Icon-Fonts
  • SVG-Animationen
• Media Types und Media Queries
  • Druckausgaben
  • Responsive Design
  • Mobile First
• Workflow und CSS-Konzepte
  • CSS Spezifität
  • Das SMACSS-Konzept
  • Das DRY-Konzept
  • ACSS – Atomic CSS
  • Sass und SCSS
  • CSS Feature Queries & Modernizr
  • Media Queries und Element Queries

Voraussetzungen der Teilnehmer

HTML- und CSS-Kenntnisse werden vorausgesetzt. Die einzelnen Übungen werden gemeinsam im Code-Editor erarbeitet, daher sind solide EDV-Kenntnisse ebenfalls Bedingung für dieses Seminar.

Dozent: Jonas Hellwig