Zum Inhalt springen
Schulung · cSBK

Storybook Komplettkurs

UI-Komponenten isoliert entwickeln, dokumentieren und automatisiert in Front-End-Workflows absichern

  • Storybook-Setup für Front-End-Projekte
  • Stories mit Args und Controls
  • Komponenten-Dokumentation mit Docs
  • 2 Tage
  • Grundlagen
  • Online
Storybook Komplettkurs
  • Garantierte Termine Diese Termine finden statt
  • Online Live per Videokonferenz
  • max. 8 Teilnehmerinnen und Teilnehmer pro Gruppe
  • Keine Vorkasse Rechnung nach dem Seminar
Ergebnis

Das nimmst du mit

  • Storybook-Setup für Front-End-Projekte
  • Stories mit Args und Controls
  • Komponenten-Dokumentation mit Docs
  • Visual Tests mit Chromatic
  • CI/CD-Einbindung für Storybooks
Für wen

Passt das zu dir?

Damit du den Tag wirklich mitnimmst, lohnt sich ein kurzer Abgleich.

Richtig für dich, wenn

  • Front-End-Entwicklerinnen und Front-End-Entwickler mit React-, Vue- oder Angular-Projekten
  • App-Entwicklerinnen und App-Entwickler mit komponentenbasierten UI-Architekturen
  • UX- und Design-System-Teams, die Komponenten dokumentieren und abstimmen
  • QA- und Test-Engineers, die UI-Regressionen früher im Entwicklungsprozess prüfen

Das bringst du mit

  • Sichere Kenntnisse in TypeScript
  • Erfahrung mit React, Vue oder Angular
  • Grundlagen in HTML, CSS und komponentenbasierter Front-End-Entwicklung
  • Erste Berührungspunkte mit Testing-Tools wie Vitest, Cypress oder Playwright hilfreich
  • Für App-Projekte sind Kenntnisse aus dem Flutter Apps mit Dart Grundkurs eine sinnvolle Ergänzung, aber keine Voraussetzung
Ablauf

Dein Lernweg

  1. Tag 1: Setup, Stories und Dokumentation

    Der erste Tag behandelt die Rolle von Storybook in komponentenbasierten Front-End-Architekturen, die Installation in bestehenden Projekten und den Aufbau einer wartbaren Story-Struktur.

    • Einordnung von Storybook im Entwicklungsprozess
    • Installation und Framework-Konfiguration
    • Stories für Komponentenvarianten erstellen
    • Args, Controls, Actions und Parameter einsetzen
    • Dokumentation mit Docs und MDX strukturieren
  2. Tag 2: Tests, Add-ons und CI/CD

    Der zweite Tag vertieft Testing, Automatisierung und Erweiterung. Im Mittelpunkt stehen Visual Tests, Interaction-Tests, Accessibility-Checks sowie der Einsatz von Storybook in Build-, Review- und Deployment-Prozessen.

    • Visual Tests mit Chromatic einrichten
    • Interaction-Tests und Component Tests ausführen
    • Accessibility-Checks in Stories nutzen
    • Storybook-Builds in CI/CD integrieren
    • Add-ons auswählen und Konfiguration pflegen
So läuft es ab

Klarheit von Anfang an

Format, Ablauf und alles, was schon enthalten ist. Keine Überraschungen, nur Fokus auf dein Ergebnis.

Format
  • Live-OnlineInteraktiv per Videokonferenz, von überall
Zeiten
  • Montag09:00 bis 16:00 Uhr
Dauer

2 Tage

Kompakt aufgebaut, damit du schnell ins Tun kommst.

Gruppengröße

max. 8

Kleine Gruppe, damit genug Raum für deine Fragen bleibt.

Methodik
  • Fachliche Einführung mit direktem Bezug zu Front-End-Architekturen
  • Live-Coding am durchgängigen Schulungsprojekt
  • Hands-on Labs zur Erstellung, Dokumentation und Prüfung von Stories
  • Gemeinsame Analyse typischer Projektstrukturen und Add-on-Entscheidungen
  • Übungen zur CI/CD-Einbindung und Auswertung von Testergebnissen

Das ist immer dabei

  • Ausführliche Schulungsunterlagen und Praxisbeispiele
  • Teilnahmezertifikat
  • Übungsumgebungen und Beispieldaten
  • Nachbetreuung per E-Mail nach dem Seminar
04 Termine

Sichere dir deinen Platz

Wähle den Termin, der zu dir passt. Online live dabei oder vor Ort, ganz wie es für dich passt.

  • 22. Oktober 2026 bis 23. Oktober 2026 Live-Online
    Garantie
    Preis auf Anfrage
    Platz sichern
  • 07. Januar 2027 bis 08. Januar 2027 Live-Online
    Preis auf Anfrage
    Platz sichern
  • 25. Februar 2027 bis 26. Februar 2027 Live-Online
    Preis auf Anfrage
    Platz sichern
  • 29. April 2027 bis 30. April 2027 Live-Online
    Preis auf Anfrage
    Platz sichern
  • 22. Juli 2027 bis 23. Juli 2027 Live-Online
    Preis auf Anfrage
    Platz sichern
  • Erfahrene IT-Trainer aus der Praxis
  • Keine Vorkasse, Rechnung nach dem Seminar
  • Kostenfreie Umbuchung bis 14 Tage vor Start
Für Teams und Unternehmen

Lieber das ganze Team?

Bring dieses Seminar zu euch ins Haus oder lass uns ein Programm bauen, das genau auf euer Unternehmen passt.

Firmen-Seminar

Ein individuelles Programm, das wir auf eure Ziele zuschneiden.

  • Frei kombinierbare Module aus unserem Themenkatalog
  • Skalierbar von der Kleingruppe bis zur ganzen Belegschaft
  • Begleitung über mehrere Termine hinweg möglich
Persönlich für dich da

Deine IT-Schulungen München-Expertinnen und -Experten

Du hast Fragen zu Inhalten, Terminen oder einer passenden Lösung für dein Team? Wir beraten dich gern, bevor du buchst. Direkt, ohne Umwege.

Antwort in der Regel am selben Werktag

Dein cmt-Team München

Beratung zu IT-Weiterbildung

Fragen und Antworten zu Storybook Komplettkurs

Was lerne ich in der Storybook Schulung?

Du lernst, Storybook in ein Front-End-Projekt zu integrieren, Stories für UI-Komponenten zu schreiben, Varianten über Args und Controls abzubilden, Dokumentation zu erstellen und Tests in Entwicklungs- und CI/CD-Prozesse einzubinden.

Ist der Storybook Komplettkurs an ein bestimmtes Framework gebunden?

Nein. Der Kurs ist für komponentenbasierte Front-End-Projekte mit React, Vue oder Angular ausgelegt. Die Beispiele und Übungen orientieren sich an den Voraussetzungen der Gruppe und zeigen übertragbare Storybook-Konzepte.

Welche Vorkenntnisse brauche ich für Storybook?

Wichtig sind gute TypeScript-Kenntnisse und Erfahrung mit mindestens einem modernen Front-End-Framework. Grundwissen zu HTML, CSS und Komponentenarchitektur erleichtert den Einstieg deutlich.

Werden auch Tests mit Storybook behandelt?

Ja. Behandelt werden Visual Tests mit Chromatic, Interaction-Tests, Accessibility-Checks und die Einbindung automatisierter Prüfungen in CI/CD-Workflows. Dabei steht der sinnvolle Einsatz im Entwicklungsalltag im Mittelpunkt.

Eignet sich Storybook auch für Design-Systeme?

Ja. Storybook eignet sich besonders, um Komponenten, Zustände, Varianten und Nutzungsregeln eines Design-Systems sichtbar zu machen. Für die konzeptionelle Struktur von Websites und Navigationsräumen passt ergänzend der Website Usability und Informationsarchitektur Workshop.

Hilft Storybook bei mobilen Benutzeroberflächen?

Storybook unterstützt die Prüfung von Komponenten in unterschiedlichen Viewports und Zuständen. Wenn du mobile Layouts und Bedienkonzepte vertiefen möchtest, ist die Schulung Webseiten für mobile Endgeräte eine passende Ergänzung.

Bereit?

Bring dein Team mit Storybook Komplettkurs weiter

Wir beraten dich unverbindlich zur passenden Schulungsform: offenes Seminar, Inhouse oder individuell zugeschnitten.

Storybook Komplettkurs

Nächster Termin: 22. Oktober 2026 · Online

ab1.090 €netto