Webdesign & Webentwicklung, UX/UI
KI-Webentwicklung III: UI-Design, GitHub-Workflows, SEO und KI-optimierte Webapps
Vom ersten Prototyp zur professionellen Webapp: mit React, KI-Agenten und eingespielten Entwicklungs-Workflows.
In diesem vierwöchigen Kurs bauen Sie auf Ihren TypeScript-Kenntnissen auf und entwickeln Anwendungen mit React, der meistgenutzten Bibliothek für interaktive Benutzeroberflächen, die auch in Projekten wie WordPress oder Next.js steckt. Sie teilen Anwendungen in Komponenten auf, laden mit TanStack Query und Router dynamische Inhalte aus Online-Schnittstellen und stylen mit Tailwind CSS. Layouts und Komponenten aus Figma setzen Sie mit KI-Unterstützung im Code um, und mit Base UI entstehen auch komplexe Oberflächen barrierefrei.
Ein zweiter Schwerpunkt ist die Arbeit mit KI-Agenten. Sie geben der KI über eine Agents.md feste Vorgaben für Ihr Projekt, erweitern sie mit Skills und verbinden sie über das Model Context Protocol mit externen Programmen und Diensten. Zum Schluss bereiten Sie Ihre Anwendungen für das agentische Web vor: Mit dem WebMCP-Protokoll lassen sie sich direkt von KI-Agenten bedienen.
Lerninhalte
- Einführung fortgeschrittene Werkzeuge für Webentwicklung, u.a. Bibliotheken und Werkzeuge aus dem NPM-Verzeichnis nutzen, mit Biome eigenen und KI-generierten Code einheitlich formatieren und schreiben, eigene NPM-Skripte schreiben
- Sicherheitsrisiken bei Verwendung von fremden Code und KI minimieren
- Installation von React als meistgenutzten Bibliothek für interaktive User Interfaces
- Grundlagen der React-Syntax JSX in Verbindung mit TypeScript
- Komplexe Anwendung mit React-Komponenten übersichtlich aufteilen, mit Props flexibel und mit State interaktive machen
- Mit TanStack Query und Router Single Page Applications (SPA) umsetzen und dynamische Inhalte aus Online-Schnittstellen darstellen
- KI mit Vorgaben (Agents.md) und eigenen sowie aus Verzeichnissen installierten Skills erweitern und anleiten
- KI-Agenten konfigurieren und effektiv nutzen, um Komponenten und Funktionen mit KI zu erzeugen, zu testen und anzupassen
- KI mit Hilfe des Model Context Protocol (MCP) an externe und selbst geschriebene Programme und Dienste verbinden
- Versionsverwaltung mit GIT und GitHub selbst, im Team und mit KI nutzen
- Anwendungen mit Tailwind-CSS und Design.md einfach, performant und KI-freundlich stylen und für Verwendung mit Designwerkzeugen wie Figma konfigurieren
- Mit Hilfe von KI in Figma erstellte Layouts und Komponenten im Code umsetzen
- Grundlagen barrierefreie Webentwicklung
- Komplexe User Interfaces mit Base UI barrierefrei umsetzen
- Websites und Apps für das agentische Web vorbereiten: Inhalte optimal zugänglich machen und Anwendungen mit Hilfe des WebMCP-Protokolls durch KI-Agenten bedienbar machen
Ihr erlerntes Wissen werden Sie in praktischen Projekten, Übungen oder Fallstudien mit fachlicher Unterstützung anwenden. Teil der Weiterbildungen bei cimdata sind die flexiblen Übungsphasen. Dank unserer Lernform „cimlive“ können unsere Teilnehmenden als Teil eines virtuellen Klassenraumes auch individuelle und eigenständige Lernprozesse umsetzen. Dadurch können Sie ortsunabhängig und flexibel lernen und haben gleichzeitig unsere Dozierenden in digitaler Nähe.
Lernziel
Nach dem Kurs entwickeln Sie eigenständig eine Single Page Application mit React und TypeScript, die Daten aus Schnittstellen lädt und barrierefrei bedienbar ist. Sie richten ein Projekt so ein, dass KI-Agenten nach Ihren Vorgaben Komponenten erzeugen, testen und anpassen, und prüfen deren Ergebnisse. Fremden und KI-generierten Code bewerten Sie auf Sicherheitsrisiken und halten ihn mit Formatierungsregeln einheitlich. Änderungen verwalten Sie mit Git und GitHub, allein und im Team.
Zielgruppe
Die Zielgruppe sind Personen, die sich gezielt für eine Stelle als Frontend-Entwickler:in oder im Bereich KI-gestützter Webentwicklung qualifizieren wollen und bereits solides Wissen zu HTML, CSS, JavaScript/TypeScript mitbringen.
Vorkenntnisse
Grundlegende Computerkenntnisse sowie Kenntnisse in HTML5, CSS3 sowie JavaScript/Typescript sind erforderlich.
Förderung
Fördermöglichkeiten sind mit Bildungsgutschein SGB II und SGB III sowie durch Rentenversicherungsträger (DRV), Berufsgenossenschaften (BG) und den Berufsförderungsdienst der Bundeswehr möglich. Darüber hinaus können Förderungen mit der Bildungsprämie sowie den regionalen Bildungschecks erfolgen.
Marktchancen
Der Arbeitsmarkt für Webentwickler:innen wächst, verändert aber
gleichzeitig sein Anforderungsprofil grundlegend. Das U.S. Bureau of
Labor Statistics prognostiziert für Web Developer und Digital Designer
ein Beschäftigungswachstum von 13 Prozent zwischen 2022 und 2032.
Treiber dieser Entwicklung ist vor allem die Integration von KI: Mehr
als 60 Prozent der Fachkräfte erwarten, dass KI ihre Kernaufgaben
innerhalb der nächsten fünf Jahre verändert.
Die
Nachfrage nach KI-Kompetenzen im Web-Development wächst um über 30
Prozent jährlich. Das schlägt sich auch im Gehalt nieder:
Entwickler:innen mit KI-Kenntnissen verdienen 15 bis 20 Prozent mehr als
Kolleg:innen ohne diese Qualifikation. Zugleich könnten laut WEF rund
die Hälfte der heutigen Arbeitsaufgaben bis 2030 automatisiert werden.
Betroffen
sind vor allem repetitive Tätigkeiten. Die Frontend-Entwicklung
statischer Seiten, automatisiertes Testing und einfaches
Content-Management lassen sich zunehmend durch KI-Tools abbilden. Was
bleibt, sind Kompetenzen, die KI nicht ersetzt: UX-Design mit echtem
Verständnis für menschliches Verhalten, strategische Entscheidungen,
kreatives Problemlösen sowie Fragen von Ethik und Barrierefreiheit.
Parallel
entstehen neue Berufsrollen. Dazu zählen AI Integration Specialists,
Automation Engineers, datengetriebene UX-Designer:innen und KI-gestützte
Security Developer. Gefragt sind dafür konkrete Fähigkeiten wie Python
und JavaScript, Grundlagen des maschinellen Lernens, Datenmanagement,
KI-Frameworks wie TensorFlow oder PyTorch sowie Cloud-Plattformen wie
AWS und Microsoft Azure.
Den größten KI-bedingten
Bedarf an Webentwickler:innen verzeichnen vier Branchen: E-Commerce,
Healthcare Technology, Financial Services und der Bereich Smart Cities.
Für Berufseinsteiger:innen und Umschulende ist das eine günstige
Ausgangslage, weil sie direkt auf dem neuen Kompetenzniveau aufsetzen
können. Wer Webentwicklung heute mit KI-Kompetenz verbindet,
qualifiziert sich für einen Markt, der wächst und gleichzeitig neue
Spezialisierungen schafft.
