Seminarkatalog

Du überarbeitest im Seminar eine bestehende Desktop-Seite zu einer mobilen Weboberfläche, deren Navigation, Bilder und Formulare auf kleinen und großen Displays funktionieren. Statt Breakpoints nach einzelnen Geräten zu verteilen, leitest du sie aus dem Inhalt und dem verfügbaren Platz ab. Du entwickelst flexible Seitenstrukturen, prüfst Touch-Ziele und Tastaturbedienung und misst, welche Ressourcen den Seitenaufbau oder die Interaktion bremsen. So fallen Layoutbrüche, unbedienbare Formulare und Performance-Probleme vor der Freigabe auf.

Media Queries steuern Anpassungen am Viewport, Container Queries reagieren auf den Platz einer Komponente. CSS Grid und Flexbox übernehmen unterschiedliche Layoutaufgaben, während responsive Bilder die benötigte Dateigröße an die Darstellung und das Gerät anpassen. DevTools und Lighthouse liefern Messwerte für LCP, INP und CLS. Übungen mit HTML, CSS und JavaScript zeigen, wie diese Techniken zusammenspielen, ohne die Seite mit unnötigem Code zu belasten.

Die Schulungen zu Webentwicklung und Webdesign bündeln passende Grundlagen und Vertiefungen. Wenn du zunächst responsive Layoutprinzipien festigen möchtest, bietet sich der Responsive Webdesign Kompaktkurs an. In kleinen Gruppen bleibt Zeit, eigene technische Anforderungen mit dem Dozenten zu besprechen. Nenne uns bei deiner Terminanfrage den eingesetzten Browser-, Framework- oder CMS-Stack, damit wir die passende Durchführung mit dir klären.

Mobile Nutzung und responsive Architektur

• Viewports und Geräteeigenschaften
• Mobile-First-CSS und Progressive Enhancement
• Breakpoints nach Inhaltsbedarf wählen
• Media Queries für Viewport-Anpassungen
• Container Queries für Komponenten

Flexible Seitenstrukturen mit HTML und CSS

• Semantische HTML-Strukturen
• Seitenlayouts mit CSS Grid
• Komponentenlayouts mit Flexbox
• Relative und dynamische CSS-Einheiten
• Fließende Typografie und Abstände
• Navigationen für kleine Displays

Responsive Inhalte und Medien

• Responsive Bilder mit srcset
• Bildauswahl mit sizes und picture
• Lazy Loading für Medien
• Skalierbare Icons und Grafiken
• Flexible Video-Einbettung
• Priorisierung mobiler Inhalte

Interaktion, Formulare und Barrierefreiheit

• Passende HTML-Eingabetypen
• Autocomplete und mobile Tastaturen
• Validierung und verständliche Fehlermeldungen
• Touch-Ziele nach WCAG 2.2
• Sichtbarer Tastaturfokus
• Pointer- und Tastatur-Events
• Mobile Menüs und Overlays

Performance und Qualitätssicherung

• LCP, INP und CLS messen
• Analysen mit DevTools und Lighthouse
• Rendering-Kosten im DOM
• CSS und JavaScript optimieren
• Bilder und Webfonts optimieren
• Cross-Browser- und Gerätetests

Frameworks und Praxisprojekt

• Responsive Komponenten mit Bootstrap
• Utility-Klassen mit Tailwind CSS
• Eigenes CSS und Frameworks kombinieren
• Wiederverwendbare Komponenten strukturieren
• Komponententests mit dem Storybook Komplettkurs vertiefen
• Desktop-Seite mobil überarbeiten
• Testergebnisse und Optimierungen dokumentieren

• Sichere Grundlagen in HTML und CSS
• Grundverständnis von JavaScript für interaktive Komponenten
• Erste Erfahrung mit Browser-DevTools von Vorteil
• Grundkenntnisse zu Navigation und Webformularen

• Webentwicklungsteams mit Verantwortung für responsive Websites
• Frontend-Entwickler mit HTML-, CSS- und JavaScript-Praxis
• UX- und UI-Designer mit technischem Grundverständnis
• CMS-, E-Commerce- und Marketing-Teams mit technischen Qualitätsaufgaben
• Projektteams mit Verantwortung für die Modernisierung Desktop-orientierter Websites

Lernformate

Unsere Seminare bieten dir maximale Flexibilität: Du kannst zwischen Live-Online und Vor Ort in unseren modernen Schulungszentren im D-A-CH Raum wählen. Beide Formate garantieren dir die gleiche hohe Qualität und interaktive Lernerfahrung.

Schulungsarten

Wir bieten dir verschiedene Schulungsarten: Offene Seminare, Firmenseminare für Teams und Inhouse-Schulungen direkt bei dir vor Ort. So findest du genau das Format, das zu deinen Bedürfnissen passt.

Aktuelle Software

In unseren offenen Kursen arbeiten wir mit der aktuellsten Software-Version. So lernst du direkt mit den Tools und Features, die du auch in deinem Arbeitsalltag verwendest - praxisnah und zukunftsorientiert. Bei Inhouse- und Firmenschulungen bestimmt ihr die Version.

D