Gerade habe ich meinen jüngsten HTML/CSS-Einführungskurs an der Zürcher Hochschule der Künste beendet. Teilnehmer waren elf ausgesprochen freundliche Erstsemestler, die die Grundlagen der Webgestaltung erlernen sollten. Es gab keine nennenswerten Vorkenntnisse in der Materie, also konnte ich – wie immer – relativ frei agieren. Und anders als in den letzten Jahren wollte ich diesmal etwas Neues ausprobieren.

Was, wenn man jeglichen historischen Ballast ignoriert, und nur die neuesten und tollsten Praktiken lehrt? Ein bisschen Zen in den Unterricht (und meinen eigenen Kopf) bringen, auch wenn es nicht 100% praxisnah ist?

Ich habe das mal gemacht:

• nur die neuesten Browserversionen
• keine Float-Layouts, nur Flexbox-basierte Konstruktionen
• Mobile First in Entwurf und Umsetzung
• vollfluides CSS (möglichst alle Breitenangaben in Prozent)
• Responsive Breakpoints für den zweiten Kursabschnitt aufheben

Ich kann sagen, dass das soweit ganz gut geklappt hat! Das Konzept, dass die mobile Nutzung einer Website heute viel wichtiger ist als die Desktop-Nutzung, musste kaum erklärt werden – das erschließt sich Menschen mit Anfang 20 von alleine.

Wenn man HTML und CSS komplett neu lernt, so ist eine anfängliche Beschränkung auf eher lineare Mobile-First-Layouts eine hilfreiche Sache, denn besonders komplexe Gestaltung ist hier kaum möglich – von daher konnten die Kursteilnehmer ihre Scribbles meist erfolgreich und ohne größere Schwierigkeiten umsetzen. Für viel Freude sorgte dann am letzten Tag der finale Check des Layouts auf dem eigenen Smartphone – umgesetzt über MAMP und Zugriff per lokaler IP-Adresse im ZHdK-WLAN.

In nur 3 Tagen konnte ich die Grundlagen von modernem HTML/CSS rüberbringen. In meinen früheren Kursen ging recht viel Zeit für komplizierte Erläuterungen von schwer verständlichem Layoutverhalten drauf, u.a. bei Floats, Clearing, Selfclearing. Klar, manche Dinge wie absolute Positionierung in Kontextelementen oder Prozentangaben im vertikalen Padding, sind nach wie vor starker Tobak für Anfänger, aber man muss natürlich auch realistisch sein – CSS ist nicht einfach!

Insgesamt bin ich sehr zufrieden, wie selbstverständlich das Konzept einer unbekannten Viewportgröße aufgenommen wurde, und wie nett die Entwürfe teilweise geworden sind. Das mache ich jetzt immer so.

Wen es interessiert: Die Studierenden bekamen drei verschiedene Briefings mit ein paar vorbereiteten Assets zur Auswahl: Die Webpräsenz einer Glamrock-Band, das Tagebuch einer Weltreise und die Produktwebsite eines neuartigen Sneaker-Modells. Alle drei Aufgaben wurden etwa gleich oft gewählt :-)