UI/UX-Webdesign Frontend mit CPUX-Zertifikat

Wer im Webbereich tätig werden möchte und dabei sowohl programmieren als auch methodisch nutzerzentriert gestalten können soll, findet in diesem Kurs eine ungewöhnlich vollständige Kombination: Frontend-Entwicklung mit HTML5, CSS3 und JavaScript auf der einen Seite, und die gezielte Vorbereitung auf die externe CPUX-F-Prüfung des UXQB auf der anderen. Das CPUX-F-Zertifikat (Certified Professional for Usability and User Experience – Foundation Level) ist ein international anerkannter Nachweis für Usability- und UX-Kompetenz — und dieser Kurs schafft die Brücke zwischen dem handwerklichen Umsetzen von Websites und dem methodischen Verständnis dafür, warum bestimmte Lösungen für Nutzerinnen und Nutzer funktionieren.

HTML5 — Struktur, Semantik und Inhaltselemente Die Webentwicklung beginnt mit der Sprache, die den Inhalt einer Seite beschreibt. HTML5 bringt eine reiche Semantik mit, die weit über einfache Tags hinausgeht: Seitenstruktur, Inhaltstypen, eingebettete Medien und Formulare. Wer HTML5 versteht, legt das Fundament für alle weiteren Frontend-Schichten.

• Dokumentstruktur: DOCTYPE, Head-Elemente, Metatags, Zeichenkodierung
• Semantische Strukturelemente: header, main, section, article, aside, footer
• Textauszeichnung, Hyperlinks, Anker und interne Navigation
• Bilder einbinden: img, figure, picture-Element für responsive Bildquellen
• Audio und Video nativ einbetten und mit Untertiteln versehen
• Tabellenstruktur für tabellarische Daten (nicht für Layouts)
• Formulare: input-Typen, Validierung, Labels, fieldset und legend

CSS3 — Gestaltung, Layouts und Responsive Design Sobald die HTML-Struktur steht, bestimmt CSS das visuelle Erscheinungsbild — und mit modernen CSS3-Techniken lassen sich komplexe Layouts ohne Hilfsmittel realisieren. Dieser Block vermittelt die gesamte Gestaltungsebene vom Box-Modell bis zu responsiven Multi-Spalten-Layouts.

• Das Box-Modell: margin, padding, border, box-sizing
• Selektoren, Spezifität und Vererbung — das Kaskadensystem verstehen
• Flexbox für eindimensionale Layouts: flex-direction, align-items, justify-content
• CSS Grid für zweidimensionale Seitenstruktur: grid-template, grid-area, gap
• Media Queries und Breakpoints für mobile-first Responsive Design
• CSS-Variablen und Custom Properties für wartbare Stilregeln
• Übergänge und Animationen mit transition und @keyframes

JavaScript — Interaktivität und DOM-Manipulation JavaScript macht Websites lebendig. In diesem Block wird JavaScript nicht als abstraktes Programmierprojekt behandelt, sondern direkt am DOM: Seitenelemente ansprechen, Nutzereingaben verarbeiten, Zustände verwalten.

• Variablen, Datentypen und Operatoren im JavaScript-Kontext
• Kontrollstrukturen: Bedingungen, Schleifen, Funktionen
• DOM-Selektion und -Manipulation: getElementById, querySelector, classList
• Event-Handling: click, input, submit, keydown
• Formulardaten clientseitig validieren und strukturiert verarbeiten
• Grundlagen des asynchronen Programmierens: fetch, Promises, async/await
• Fehlersuche mit Browser-DevTools: Console, Netzwerk-Tab, Breakpoints

CPUX-F — Usability und User Experience nach UXQB-Standard Der vierte Schwerpunkt des Kurses widmet sich der Theorie und Methodik nutzerzentrierter Gestaltung, wie sie das UXQB im Foundation-Curriculum definiert. Dieser Block macht diesen Kurs einzigartig unter Frontend-Weiterbildungen: Sie verstehen nicht nur, wie man eine Seite baut, sondern warum sie für Nutzerinnen und Nutzer funktionieren oder scheitern muss.

• Definition und Grundbegriffe: Usability, User Experience, nutzerzentrierter Gestaltungsprozess
• Nutzungskontext beschreiben und dokumentieren
• Nutzeranforderungen erheben, strukturieren und priorisieren
• Gestaltungslösungen konzipieren und bewerten
• Inspektionsmethoden: heuristische Evaluation, kognitive Durchläufe
• Benutzertests: Planung, Moderation, Auswertung und Dokumentation
• Accessibility als integraler Bestandteil von Usability

Dieser Kurs schließt mit der eigenverantwortlichen Umsetzung eines Portfolio-Webprojekts: eine mehrsprachige, responsive und barrierefrei zugängliche Website, die sowohl technische Frontend-Kompetenz als auch angewandtes UX-Denken demonstriert.

Der Kurs richtet sich an Personen, die im Webbereich tätig werden möchten und sowohl die technische als auch die methodisch-konzeptionelle Seite abdecken wollen.

• Quereinsteiger ohne Vorkenntnisse in Webentwicklung oder UX, die einen strukturierten Einstieg suchen
• Personen, die gezielt das CPUX-F-Zertifikat anstreben und den Kurs als strukturierte Vorbereitung nutzen möchten
• Grafikdesigner oder Mediengestalter, die ihre Skills um Code-Kompetenz erweitern wollen
• Berufswechsler, die im digitalen Produktumfeld als Frontend-Developer oder UX Engineer tätig werden möchten
• Fachkräfte, die ihre bestehenden IT-Kenntnisse um nutzerzentrierte Methodik und Web-Standards ergänzen wollen

Der Kurs verbindet täglich betreute Unterrichtsphasen mit eigenverantwortlicher Code-Praxis. Neue Konzepte werden zunächst erklärt und demonstriert; anschließend setzen Teilnehmende sie in eigenen Übungsaufgaben und Projekten um. Das Frontend-Handwerk lebt vom wiederholten Anwenden: Schreiben, Testen, Fehler finden, verbessern. Für den CPUX-F-Anteil werden Lernkarten, Übungsaufgaben und kommentierte Beispiele aus der UXQB-Syllabus-Literatur genutzt. Die Kombination aus Coding-Übungen und Methodik-Lernen macht abwechslungsreiche Einheiten möglich.

Die Weiterbildung ist als mehrwöchiger Vollzeitkurs strukturiert, der täglich Unterricht und betreute Übungszeiten umfasst. Je nach Anbieter variieren Format (Präsenz oder Online) und genaue Stundenzahl. Konsultieren Sie den jeweiligen Anbieter für aktuelle Terminangebote und Kursvolumen.

Nach Kursabschluss erhalten Sie ein trägerinternes Zertifikat, das Ihre erworbenen Frontend- und UX-Kompetenzen dokumentiert. Darüber hinaus bereitet der Kurs auf die externe CPUX-F-Prüfung des UXQB vor. Die CPUX-F-Zertifizierung (Certified Professional for Usability and User Experience – Foundation Level) ist international in der Usability- und UX-Community anerkannt und wird von akkreditierten UXQB-Testcentern vergeben. Die Prüfungsgebühr sollte im Vorfeld mit dem Anbieter geklärt werden.

Frontend-Entwickler, die zugleich UX-Methodik beherrschen, sind auf dem Arbeitsmarkt vergleichsweise selten — und entsprechend gefragt. Wer aus einem Kurs hervorgeht und sowohl barrierefreien HTML-Code schreiben als auch eine heuristische Evaluation durchführen kann, besetzt eine Schnittstellenposition, die in kleinen Webagenturen genauso wertvoll ist wie in Product-Teams großer Unternehmen. Das CPUX-F-Zertifikat des UXQB ist dabei kein bloßes Kursabzeichen, sondern ein extern validierter Nachweis von Grundkompetenz in nutzerzentrierter Gestaltung. Es ist Teil einer aufbauenden UXQB-Zertifizierungsstruktur und kann als Basis für weiterführende Spezialisierungen genutzt werden — etwa im Bereich User Research, Interaction Design oder Usability Engineering. Wer diesen Kurs abschließt, kann ein Portfolio-Webprojekt vorweisen, das technisch sauber umgesetzt, responsiv, barrierefrei und UX-methodisch begründet ist. Das ist ein konkretes Gesprächsthema im Vorstellungsgespräch — und ein Ausdruck dafür, dass man sowohl bauen als auch begründen kann.