Storybook Komplettkurs
UI-Komponenten isoliert entwickeln, dokumentieren und automatisiert in Front-End-Workflows absichern
Die wichtigsten Themen
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
Überblick Präsentation im PDF-Format · Zugriff auf ein GitHub-Repository mit Übungsaufgaben und Schulungsprojekt · Visual Studio Code · Aktuelle Node.js-Version · Front-End-Projekt mit React, Vue oder Angular
Komponenten visuell entwickeln, testen und dokumentieren
Storybook unterstützt Front-End-Teams dabei, UI-Komponenten isoliert vom Anwendungskontext zu entwickeln, unterschiedliche Zustände nachvollziehbar abzubilden und die Zusammenarbeit zwischen Entwicklung, Design und Qualitätssicherung zu verbessern. Im Storybook Komplettkurs arbeitest du mit Stories, Add-ons, Dokumentation, Tests und CI/CD-Integration, damit Komponenten nicht nur funktionieren, sondern auch dauerhaft wartbar bleiben.
Der Kurs richtet sich an Entwicklerinnen und Entwickler, die Storybook in bestehenden React-, Vue- oder Angular-Projekten einsetzen oder eine belastbare Grundlage für Component-Driven Development schaffen möchten. Dabei geht es nicht nur um die Installation, sondern auch um sinnvolle Story-Strukturen, Args und Controls, Dokumentationsseiten, visuelle Regressionstests, Interaction-Tests und den Einsatz in Build- und Review-Prozessen. Für Teams mit stärkerem UX- und Strukturanspruch ergänzt der Website Usability und Informationsarchitektur Workshop die technische Komponentenarbeit um konzeptionelle Aspekte.
Live-Coding, Übungen und ein durchgängiges Schulungsprojekt sorgen dafür, dass die Inhalte direkt auf reale Front-End-Workflows übertragbar sind. Wer Komponenten zusätzlich für unterschiedliche Viewports und Layout-Anforderungen plant, findet im Responsive Webdesign Kompaktkurs eine passende Ergänzung.
Schulungsunterlagen:
- Präsentation im PDF-Format
- Zugriff auf ein GitHub-Repository mit Übungsaufgaben und Schulungsprojekt
Schulungsumgebung:
- Visual Studio Code
- Aktuelle Node.js-Version
- Front-End-Projekt mit React, Vue oder Angular
Die Themen Rolle im Front-End-Workflow · Installation in bestehenden Projekten · Framework-spezifische Konfiguration · Ordnerstruktur und Story-Organisation · Aufbau von Component Stories · Args, Controls und Parameter...
Storybook-Grundlagen und Projekt-Setup
- Rolle im Front-End-Workflow
- Installation in bestehenden Projekten
- Framework-spezifische Konfiguration
- Ordnerstruktur und Story-Organisation
Stories, Varianten und Interaktion
- Aufbau von Component Stories
- Args, Controls und Parameter
- Komponentenzustände und Varianten
- Interaktive Stories mit Actions
- Mocking von Daten und Events
Dokumentation und Design-System-Arbeit
- Automatische Docs-Seiten
- MDX für ergänzende Inhalte
- Komponentenbeschreibung und Usage Notes
- Add-ons für Design-Workflows
Testing mit Storybook
- Interaction-Tests in Stories
- Component Tests mit Vitest
- Accessibility-Checks im Storybook
- Visual Tests mit Chromatic
- Snapshot-Vergleiche und Regressionen
CI/CD, Build und Deployment
- Storybook-Build für Pipelines
- Automatisierte Testläufe in CI/CD
- Review-Workflows für Pull Requests
- Deployment der Storybook-Dokumentation
Erweiterung und Wartbarkeit
- Add-on-Auswahl für Projektanforderungen
- Theming und UI-Anpassungen
- Wiederverwendbare Preview-Konfiguration
- Pflege langlebiger Story-Strukturen
Zielgruppe
- 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 lernst du
- Sicherer Aufbau und Betrieb einer Storybook-Umgebung in bestehenden Front-End-Projekten
- Komponentenvarianten mit Stories, Args und Controls nachvollziehbar abbilden
- Wartbare Dokumentation für UI-Komponenten und Design-Systeme erstellen
- Visual Tests, Interaction-Tests und Accessibility-Checks gezielt einsetzen
- Storybook-Builds und Tests in CI/CD-Workflows integrieren
So arbeiten wir
- 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
Empfohlene Vorkenntnisse
- 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
Dein Fahrplan
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
Organisatorisches
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.
Uhrzeiten
09:00-16:00 Uhr
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.
Deine Vorteile
Zufriedenheitsgarantie
Wir sind von unserer Qualität überzeugt. Sollte ein Training einmal nicht deinen Erwartungen entsprechen, bieten wir dir an, den Kurs kostenlos zu wiederholen oder ein anderes Training zu besuchen. Ohne Risiko, ohne Diskussion.
Inklusivleistungen
Deine Teilnahme beinhaltet: Schulungsmaterial, Zertifikat, Verpflegung (bei Präsenzveranstaltungen) und persönliche Betreuung durch unsere Trainer und unser Orga-Team. Alles aus einer Hand - keine versteckten Kosten.
Lernen von Experten
Unsere Trainer sind zertifizierte und erfahrene Profis mit jahrelanger Berufserfahrung. Sie vermitteln dir in den Kursen nicht nur theoretisches Wissen, sondern teilen ihre Erfahrungen aus realen Projekten und helfen dir, das Gelernte direkt in deiner täglichen Arbeit anzuwenden. Das ist kein Werbeversprechen, sondern unser Anspruch. Am besten siehst du das in unseren Bewertungen, z.B. auch bei Google.
Keine Vorkasse
Du zahlst erst nach dem Seminar. Keine Vorkasse, keine Vorauszahlung - so kannst du sicher sein, dass du nur für das bezahlst, was du auch wirklich erhalten hast. Die Rechnung erhältst du erst nach Kursbeginn.
Max. 8 Teilnehmende
Wir setzen auf kleine Gruppen, damit du die Aufmerksamkeit bekommst, die du verdienst. So haben wir mehr Zeit für deine individuellen Fragen und können gezielt auf deine Bedürfnisse eingehen.
Termine & Buchung
Vor Ort
Online
Nicht der passende Termin dabei?
Wir finden eine Lösung: anderer Termin, mehrere Teilnehmer, Inhouse-Schulung oder individuelle Beratung.
Lieber gleich das ganze Team schulen?
Diese Schulung gibt es auch exklusiv für dein Unternehmen, bei euch vor Ort, an unseren Standorten oder Live-Online. Inhalte und Termine nach Maß.
Inhouse-Schulung
Wir kommen zu euch: diese Schulung maßgeschneidert in euren Räumen, für Unternehmen und Behörden.
- Inhalte exakt auf euch zugeschnitten
- Termine nach euren Bedürfnissen
- Günstiger ab mehreren Teilnehmern
- Vertraute Umgebung, kein Reiseaufwand
Firmen-Seminar
Exklusiv für dein Team an einem unserer Standorte oder Live-Online, individuell angepasst.
- Geschlossene Gruppe aus eurem Haus
- Individuelle Terminplanung
- An unseren Standorten oder Live-Online
- Angepasste Inhalte
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.
Weitere häufig gestellte Fragen und Antworten findest du in den FAQs .
Passende Schulungen nach dem Kurs
Ähnliche Kurse
Flutter Apps mit Dart - Grundkurs
LimeSurvey - Anwendertraining Teil 1 (Grundlagen)
Responsive Webdesign - Kompaktkurs
Website Usability und Informationsarchitektur Workshop
Flutter Apps mit Dart - Aufbaukurs
Unser Qualitätsversprechen: Wissen, das in der Praxis funktioniert
Aus der Praxis für die Praxis
Schluss mit theoretischem Ballast. Wir trainieren dich für reale IT-Herausforderungen, nicht für Multiple-Choice-Tests. Unsere Trainer vermitteln dir genau das Wissen, das am nächsten Montagmorgen im Job wirklich funktioniert.
Individuell statt "Schema F"
Deine Fragen passen nicht ins Standard-Skript? Bei uns schon. Wir verzichten auf starre Lehrpläne und geben deinen konkreten Projekt-Fragen Raum. Unsere Trainer passen die Inhalte flexibel an das an, was dich und dein Team aktuell weiterbringt.
Maximale Freiheit: Remote oder vor Ort
Lerne so, wie es in deinen Alltag passt - ohne Reise-Stress und Zeitverlust. Egal ob remote, hybrid oder präsent vor Ort: Wir garantieren dir ein nahtloses und effektives Lernerlebnis, egal von wo du dich zuschaltest.
Mit Zufriedenheitsgarantie
Wir sind von unserer Qualität überzeugt - und wollen, dass du es auch bist. Sollte ein Training einmal nicht deinen Erwartungen entsprechen, bieten wir dir an, den Kurs kostenlos zu wiederholen oder ein anderes Training zu besuchen. Ohne Risiko, ohne Diskussion.
Über 20.000 Unternehmen und Behörden vertrauen auf uns
