Übungen

Die Übungen aus den Unterlagen verbinden Code, Gestaltung und Produktanalyse.

Übung 1: Portfolio-Seite anpassen

Ausgangspunkt ist eine einfache Portfolio-Seite mit:

• Header
• Navigation
• About-Me-Bereich
• Portfolio-Karten
• Kontaktbereich

Aufgaben:

1. Ersetze My Portfolio durch deinen Namen.
2. Ändere den Text im About-Me-Bereich.
3. Ergänze ein viertes Portfolio-Projekt.
4. Tausche ein Bild aus.
5. Ändere die Hintergrundfarbe des Headers.
6. Ändere die Schriftfarbe der Überschrift.
7. Passe Buttons an.
8. Vergrößere den About-Me-Text.
9. Prüfe die Seite im Browser mit Developer Tools.

Übung 2: "Just add a button"

Die Button-Übung zeigt, dass ein Button sehr unterschiedliche Komplexität haben kann:

• einfacher Button mit alert
• Button, der dynamisch Seiteninhalt erzeugt
• Button, der Quizdaten von einer API lädt

Analysiere:

• Welche HTML-Elemente werden gebraucht?
• Welche CSS-Regeln gestalten den Button?
• Welche JavaScript-Events werden verwendet?
• Welche Funktion ist am einfachsten?
• Wo entsteht die meiste Komplexität?

Übung 3: Digitales Produkt analysieren

Wähle eine App, Webseite oder Software, die du häufig nutzt.

Beantworte:

• Warum nutzt du das Produkt?
• Ist es einfach zu bedienen?
• Ist es intuitiv?
• Welche Features magst du?
• Welche Features stören?
• Welche Features fehlen?
• Wer ist die Zielgruppe?

Beispiele aus den Unterlagen:

• Discord
• Instagram
• Pinterest
• Microsoft Teams
• WebUntis
• WhatsApp

Übung 4: UX-Faktoren prüfen

Bewerte ein Produkt nach den sieben UX-Faktoren:

Übung 5: Accessibility-Test mit Tastatur

Wähle eine häufig genutzte Webseite. Nutze keine Maus und kein Touchpad.

Aufgaben:

1. Navigiere mit Tab.
2. Gehe mit Shift + Tab zurück.
3. Öffne einen Link mit Enter.
4. Fülle ein Formular aus.
5. Navigiere durch ein Menü.
6. Interagiere mit einem Video, Modal oder einer anderen Komponente.

Beantworte:

• Wo bleibst du hängen?
• Siehst du immer, welches Element fokussiert ist?
• Sind Linktexte verständlich?
• Funktionieren alle wichtigen Aktionen?

Übung 6: Seite barriereärmer machen

Verbessere eine bestehende HTML-Seite:

• sinnvolle alt-Texte ergänzen
• Überschriftenhierarchie prüfen
• Buttontexte beschreibend machen
• Farbkontraste prüfen
• Formulare mit Labels versehen
• Tastaturbedienung testen
• Layout konsistenter machen