Become a Web Professional – Get Certified!

Prüfung Certified Web Designer

Certified Web Designer

125 €

Fällig bei der Anmeldung zur Prüfung. Unsere Prüfungen sind nach EU-Recht von der Umsatzsteuer befreit.

Übersicht

Online-Prüfung mit Zertifizierung zum Certified Web Designer (Zertifizierte/r Webdesigner/in)

In dieser Online-Prüfung können Sie zeigen, dass Sie fit in der professionellen Gestaltung von Webseiten mit Hilfe von HTML5, CSS und Bootstrap sind. Bei Bestehen der Prüfung stellen wir Ihnen das international gültige Zertifikat Certified Web Designer aus. In jedem Fall erhalten Sie als Nachweis für Ihre Prüfung auch ein Prüfungszeugnis.

Die Prüfung basiert auf dem offiziellen Ausbildungs- und Trainings-Curriculum von Webmasters Europe e.V.

Anzahl der Fragen 40
Maximale Dauer 1 Stunde 10 Minuten
Bestehensgrenze 57%
Gültigkeitsdauer 3 Jahre

Übungsklausur

Die kostenlose Übungsklausur gibt Ihnen einen Eindruck von der Prüfung (Art der Fragestellung und Schwierigkeitsgrad). Sie ist jedoch nicht als Prüfungsvorbereitung geeignet, da sie nur wenige Beispielfragen enthält.

Übungsklausur starten

Kursangebote

Ein breites Kursangebot zur Weiterbildung und Prüfungsvorbereitung bieten unsere Autorisierten Trainingscenter an.

Themenbereiche und Lernziele

In der Prüfung werden folgende Themenbereiche bzw. Lernziele abgedeckt:

HTML5

  • Den Begriff Hypertext definieren und das Prinzip von Auszeichnungssprachen im Allgemeinen und von HTML im besonderen erläutern.
  • Die Aufgaben der HTML-Strukturierung von anderen Techniken wie CSS oder JavaScript abgrenzen.
  • Die Geschichte und Entwicklung der Hypertext Markup Language und deren Standards grob skizzieren und auf dieser Grundlage Konsequenzen für die praktische Arbeit als Webdesigner und -entwickler ziehen.
  • Unterschiede und Besonderheiten dieser Standards benennen, um z. B. Gründe für die unterschiedliche Darstellung von Webseiten in verschiedenen Web-Browsern anzugeben.
  • Die Aufgaben des World Wide Web Consortium (W3C) benennen.
  • Die gängigen Webbrowser, ihre Rendering Engines und deren Besonderheiten benennen.
  • gängige Tools und Editoren zur HTML-Erstellung benennen und deren Features unterscheiden.
  • Das Grundgerüst einer HTML-Seite erstellen.
  • Verschiedene Zeichenkodierungen unterscheiden und die für den jeweiligen Zweck geeignete auswählen und korrekt anwenden.
  • Die reservierten Zeichen aufzählen und sie mit der korrekten Syntax maskieren.
  • Kommentare mit der korrekten Syntax in HTML-Seiten einfügen.
  • Die Verzeichnisstruktur einer Website auf dem Webserver nachbilden.
  • Block- und Inline-Elemente und deren Eigenschaften unterscheiden.
  • Physische und logische Tags zur Textauszeichnung unterscheiden.
  • Texte in Absätze, Überschriften, Fett- und Kursivschnitte gliedern.
  • Die unterschiedlichen Listen-Typen von HTML aufzählen und erzeugen.
  • Die grundlegende Funktionsweise der Einbindung von Bildern in HTML erläutern.
  • Die geeigneten Dateiformate aufzählen und deren Unterschiede erläutern.
  • Bilder mit relativen und absoluten Pfadangaben referenzieren.
  • Hyperlinks mit relativen und absoluten Pfadangaben sowie korrekten targets definieren.
  • Links zu bestimmten Stellen einer Webseite (Anker) definieren.
  • Imagemaps erzeugen.
  • Syntaktisch korrekte Tabellen in HTML erzeugen, ggf. mit korrekten Tabellenbeschriftungen und -überschriften.
  • Tabellenzellen korrekt verbinden.
  • Ein HTML-Formular konfigurieren.
  • Empfänger, Versand- und Kodierungsmethode festlegen.
  • Einzelne Formularelemente erzeugen, das für den jeweiligen Zweck geeignete auswählen und korrekt beschriften.
  • Formularfelder mit Namen und IDs eindeutig identifizieren.
  • Formularfelder als Pflichtfelder kennzeichnen.
  • Formulare mit Hilfe von fieldsets gliedern.
  • Die Steuerung von Formularen mit der Tastatur ermöglichen.
  • Externe Dokumente mittels iFrames in HTML-Seiten einbinden.
  • Die von unterschiedlichen Browsern unterstützten Videoformate unterscheiden.
  • Die Begriffe Video-Containerformat und Video-Codec definieren.
  • Tools zur Konvertierung von Videos nennen.
  • Videos in Websites einbinden, sodass sie von jedem HTML5-fähigen Browser dargestellt werden können.
  • Videos mit unterschiedlichen Eigenschaften wie Steuerleiste, Autostart, Endlosschleife, Posterframe und Alternativinhalt versehen.
  • Aufbau und allgemeine Syntax von Meta-Tags benennen.
  • Die wichtigsten Meta-Tags für Suchmaschinen und Browser erzeugen.

Responsive Webdesign mit CSS 3

  • CSS-Regeln (Selektoren, Eigenschaften, Werte) syntaktisch korrekt anwenden.
  • Die Problematik von Vendor Specific Prefixes erläutern und diese bei Bedarf korrekt anwenden.
  • CSS-Vorgaben korrekt einbinden (auslagern in externe Dateien, im HTML-Head oder als Inline-Styles).
  • Das RGB-Farbmodell erläutern.
  • Das Prinzip und den Aufbau hexadezimaler Farbkodierung erklären.
  • Farben mit dezimalen RGB- und RGBA-Werten zuweisen.
  • Globale CSS-Vorgaben für HTML-Dokumente definieren und die Standard-Browser- Styles überschreiben.
  • Eigenschaften auf mehrere Elemente gleichzeitig anwenden.
  • Das Vererbungsprinzip erläutern.
  • Texte mit Schriftart, Schriftgröße, Textfarbe, Zeilenabstand und anderen Eigenschaften formatieren.
  • Die in CSS verfügbaren Maßeinheiten benennen und die jeweils geeignete auswählen.
  • Verschiedene Zustände für Hyperlinks und andere Elemente definieren (Pseudoklassen :hover, :active etc.).
  • Verschiedene Pseudo-Elemente (z. B. ::before und ::after) und Pseudoklassen (z. B. :checked, :first-child, :not( ), :target) benennen und diese sinnvoll sowie syntaktisch korrekt anwenden.
  • Hintergrundfarben für verschiedene Elemente definieren.
  • Hintergrundbilder einbinden und mit verschiedenen Eigenschaften wie Kachelmuster, Position und Größe versehen.
  • Farbverläufe für unterschiedliche Browser korrekt definieren.
  • Das CSS-Box-Modell erläutern.
  • Konturen, Konturstärke, Randstil und Konturfarbe festlegen.
  • Innen- und Außenabstände (margin, padding) definieren.
  • Das float-Attribut erläutern und sinnvoll einsetzen.
  • Elementen exakte Werte für Breite und Höhe zuweisen.
  • Übersatz definieren.
  • Entscheiden, wann Klassen oder IDs notwendig sind, und diese in HTML und CSS syntaktisch korrekt definieren.
  • Container-Elemente positionieren und damit Layouts erzeugen.
  • Zwischen statischer, relativer, absoluter und fixierter Positionierung differenzieren.
  • Die für den jeweiligen Zweck geeignete Positionierungsmethode auswählen.
  • Die Anzeigeart display von Elementen ändern.
  • Rollovers für Buttons und Links mit Hilfe von Sprites definieren.
  • Effekte wie Schatten und abgerundete Ecken erzeugen.
  • Das Konzept von Web Fonts erläutern und diese produktiv und browserübergreifend einsetzen.
  • Spaltensatz definieren.
  • Die in CSS verfügbaren Transformationen, Filter, Mischmodi und Masken benennen und diese mit der korrekten Syntax gezielt anwenden.
  • Animations-Keyframes definieren.
  • Animationen einem Element mit den gewünschten Optionen zuweisen.
  • Timing Functions für Animationen sinnvoll und syntaktisch korrekt anwenden.
  • Das Responsive-Design-Paradigma erläutern.
  • Den Viewport von Mobilgeräten anpassen.
  • Fluid Content und Flexible Images im Layout sinnvoll einsetzen.
  • Sinnvolle Breakpoints für Media Queries wählen und setzen.
  • Mit Media Queries Layoutalternativen für unterschiedliche Geräte definieren.
  • Die Einsatzzwecke dynamischer Berechnungen mit calc( ) erläutern und entscheiden, wann diese gegenüber festen Wertzuweisungen zu bevorzugen sind.
  • Attributen calc-Werte syntaktisch korrekt zuweisen.
  • Die Vorteile von CSS-Variablen benennen und erläutern, wann diese sinnvoll sind.
  • CSS-Variablen korrekt definieren und CSS-Eigenschaften als Werte zuweisen.

UI/UX-Design: Website-Konzeption & Usability

  • Das Konzept des Leitmotivs erläutern und Beispiele nennen.
  • Ein Leitmotiv für ein Webprojekt entwickeln.
  • Den Begriff Informationsarchitektur erläutern und von dem Begriff der Navigationsarchitektur abgrenzen.
  • Verschiedene grundlegende Formen von Informationsarchitekturen benennen und erläutern.
  • Die Informationsarchitektur für beliebige Websites und Web-Anwendungen planen und visualisieren.
  • Die verschiedenen Content-Elemente einer Webanwendung (Text, Bilder, Videos, Multimedia, User Generated Content) planen und dazu jeweils geeignete Techniken der Visualisierung einsetzen.
  • Gängige Quellen für Text-, Bild- und Videomaterial benennen.
  • Den Begriff User Generated Content erläutern und ein Konzept für die Gewinnung desselben erstellen.
  • Typische Prozesse innerhalb von Web-Anwendungen wie z. B. ein Registrierungs- oder Kaufprozess planen und diese visualisieren.
  • Gängige Möglichkeiten der Personalisierung aufzählen, erläutern und Beispiele nennen.
  • Den Begriff Interface Design definieren.
  • Die Aufgaben und Ziele von Interfaces im allgemeinen und eines Web-Interfaces im besonderen aufzählen.
  • Die Entwicklung digitaler Interfaces grob skizzieren.
  • Den Begriff Navigationsarchitektur erläutern.
  • Navigationsarchitekturen konzipieren und erstellen.
  • Die Vorteile von Gestaltungsrastern erläutern und die Techniken zu deren Erstellung benennen.
  • Gestaltgesetze und -prinzipien nennen und erläutern.
  • Die Grundlagen der Farbpsychologie benennen.
  • Farbtheorien und Farbmodelle unterscheiden.
  • Verschiedene Farbschemata unterscheiden und die geeigneten auswählen.
  • Die Besonderheiten der Typographie für Websites aufzählen.
  • Die wichtigsten Schriftarten unterscheiden und zwischen ihnen wählen.
  • Gängige typographische Begriffe erläutern.
  • Die Besonderheiten des Schreibens für das Web benennen.
  • Ein Tonalitätskonzept erstellen.
  • Geeignete Bilder für Websites auswählen und gezielt platzieren.
  • Technische Faktoren wie die Bildschirmauflösung in die Planung und Konzeption einbeziehen.
  • Den Begriff Usability definieren.
  • Die Bedeutung und die Konsequenzen der Usability von Websites benennen.
  • Die häufigsten Usability-Probleme im Web benennen.
  • Einfache Usability-Tests planen, durchführen und auswerten.
  • Den Begriff Barrierefreiheit definieren und erläutern.
  • Beschreiben, auf was konkret bei der Realisierung barrierefreier Websites und Webanwendungen geachtet werden muss.

SCSS und Bootstrap 4

  • Erklären, was CSS-Preprocessors sind und wie sie eingesetzt werden.
  • Die Vorteile von CSS-Preprocessors und insbesondere Sass gegenüber reinem CSS benennen.
  • Einen geeigneten SCSS-Compiler auswählen und in einen bestehenden Workflow integrieren.
  • Einen SCSS-Compiler konfigurieren.
  • Sass-Variablen korrekt definieren und zuweisen.
  • Sass-Kalkulationen mit Variablen effizient einsetzen und korrekt durchführen.
  • Sass-Color-Functions verwenden.
  • Erkennen, wann Sass-Variablen interpoliert werden müssen.
  • Sass-Variablen syntaktisch korrekt interpolieren und konkatenieren.
  • Sass-Loops nutzbringend einsetzen.
  • Nested Rules in Sass sinnvoll und syntaktisch korrekt einsetzen.
  • Mixins in Sass sinnvoll und syntaktisch korrekt einsetzen.
  • Erkennen, wann parametrische Mixins sinnvoll sind, und diese ggf. verwenden.
  • Default-Werte für Mixins verwenden, wenn diese sinnvoll erscheinen.
  • Sass-Regeln in sinnvolle Partials aufteilen und korrekt importieren.
  • Eine geeignete Verzeichnisstruktur für Sass-Partials anlegen.
  • Das Prinzip sowie die Vor- und Nachteile von Frontend-Frameworks erklären.
  • Das Bootstrap-SCSS und -JS korrekt und sinnvoll in Webprojekte einbinden.
  • Die Funktionsweise des Bootstrap-Klassensystems erläutern.
  • Erklären, wann und wo Bootstrap-Klassen sinnvoll sind, oder wo besser eigene CSS-Regeln verwendet werden sollten.
  • Weblayouts mit dem von Bootstrap vorgegebenen Klassensystem erstellen.
  • Das responsive Grid-System von Bootstrap erklären und gewinnbringend nutzen.
  • Texte mit Bootstrap formatieren.
  • Mit Bootstrap responsive Navigationen erstellen.
  • Zusätzlich gewünschte/benötigte Bootstrap-Components und -Utilities in der Dokumentation auf getbootstrap.com/docs nachschlagen und sinnvoll und korrekt verwenden.
  • Bootstrap-Defaults mit Hilfe von SCSS sinnvoll und syntaktisch korrekt anpassen durch Überschreiben der Variablen und Mixins.
  • Bootstrap-Layouts durch eigenes (S)CSS ergänzen und erweitern.