Webtechnik für Interactive Media Designer

Als Teil des Fachs Interaction Grundlagen / Interface Design 1

Informationen Website-Projekt:

Abgabe: bis 17. Juni, auf der Wolke

Bewertungskriterien: Excel-File auf der Cloud

8. Tag

• Feedback-Formular ausfüllen

Projektziele

• Projekt abschliessen
  • Screencast aufnehmen und abgeben
  • alle Projektdateien abgeben

7. Tag

• Overlays / position absolute/relative (optional: fixed, sticky)
  • Beispiele zum herunterladen

Projektziele

• Overlay einbinden und gestalten

6. Tag

• Mikro-Animationen

Projektziele

• Website responsive gestalten
  • Handy-Ansicht sieht sauber aus
  • Inhalt sieht vor/nach Breakpoints gut aus
• Transition (Mikro-Animation) verwenden

5. Tag

• Responsive Design

Projektziele

• eigene Ideen umsetzen
• Website responsive gestalten
  • Handy-Ansicht sieht sauber aus
  • Inhalt sieht vor/nach Breakpoints gut aus

4. Tag

• Flexbox (Script)
• Layout-Methoden (Script)
• Übung (nur falls hilfreich): untersuche diese Webseiten mit dem Inspector, welches HTML-Element hat welche Rolle im Layout?

Projektziele

• setze Flexbox auf deiner Website ein
• lade den Zwischenstand in die Wolke

3. Tag

• Links stylen (Script)
• Übungen - finde die UX-Probleme (Zip-Datei zum herunterladen)

Projektziele

• habe einige Links im Inhalt deiner Website
• style die Links auf deiner Website mit möglichst allen Möglichkeiten aus obigem Script
• erstelle eine kurze Navigation

Optional

Eigene Website online stellen, kostenlos mit Github

2. Tag

• CSS-Grundlagen Aufgaben
• CSS-Grundlagen Script
• Farbe Script1 und Farbe Script2

Lernziele

1. Ich kann CSS lesen
2. Ich kann einige CSS-Regeln schreiben
3. Ich kann Farben im Web lesen und anwenden

Projektziele

1. Inhalte mit HTML ausgezeichnet
2. Erste Styles hinterlegt (bspw. Font & Farbe)

Abgabe

• Übung Buchstabensalat
• Zwischenstand Eigene Website

1. Tag

• Software bereit
• Inspektor kennenlernen
• HTML-Basics
• Wichtigste HTML-Tags
• Eigene Website: Inhalte zusammengetragen

Lernziele

1. Ich kann eine HTML-Datei erstellen und editieren.
2. Ich kann einen Text mit den wichtigsten HTML-Tags auszeichnen.

Projektziele

1. Inhalte gesammelt
2. Projekt-Ordner erstellt

Informationen

1. Lehrjahr (IMD2)
28. April - 23. Juni 2026
Dienstags von 08:30 - 11:45 Uhr
Pausen: nach Absprache, 10:00 - 10:20
im Zimmer G206

Abgabe-Datum: ?

Unterrichtet an der Schule für Gestaltung, Basel, von David Bopp.

Diese Website enthält Scripte und Übungen für das Fach Webtechnik.

Kontakt: david.bopp@edubs.ch