Über das Skriptum, den Unterricht, und das Modul "HTML & CSS"

Über die letzten Monate habe ich gemerkt, dass der Unterricht für das Modul "HTML & CSS" nicht gleich funktioniert, wie "Mobile Devices" & "Frontend Advanced", daher habe ich beschlossen den Unterricht anders aufzubauen und in diesem Schwung einige Updates zu entwickeln, die das Skriptum in seiner Gesamtheit betreffen, aber zuerst eine Auflistung der Probleme, auf die ich gestoßen bin:

Probleme mit dem aktuellen Unterricht

  • Probleme lösen: Neueinsteiger brauchen mehr als nur praktische Beispiele und Theorie, sondern in erster Linie brauchen sie die Möglichkeit eigenständig Probleme zu lösen. Der bisherige Ansatz, im Unterricht den Inhalt des Skriptums mit praktischen Beispielen zu untermauern ist da fehlgeschlagen, weil die besprochenen Konzepte noch nie Probleme waren, die den Studenten untergekommen sind.
  • Eigenständigkeit und Lösungsorientierung: Zwei der wichtigsten Softskills, nicht nur als Kriterium für Professionalität, sondern auch für die eigene mentale Gesundheit als Teil der Webindustrie. Studenten sind bereits mit diesen Fähigkeiten in den Unterricht kommen, profitierten bis jetzt gut davon, jene die diese allerdings noch nicht kultiviert haben, hatten große Probleme und fühlten sich oft komplett alleingelassen.
  • Selbstüberprüfung: Ich habe den Studenten zu wenig Möglichkeiten geboten, ihren Wissensstand einzusehen, in dem sie sich selbst prüfen können (zBsp. durch Quizzes die sie selbst wiederholen können). Die Herausforderung hier wird es sein, auch für die praktische Anwendung der Fähigkeiten Überprüfungsmöglichkeiten zu finden.
  • Natur der Thematik: Das Problem mit HTML und CSS ist, dass beide Konzepte in einer kleinen Einheit erklärt werden können, es ist schnell erlernt, aber sobald man in die Tiefe gehen möchte, offenbart sich ein Rattenschwanz an Hintergrundinformationen und Konzepten, die erst verstanden werden müssen, bis man weiterkommt. Als simples Beispiel float. Erklärt man die Eigenschaft mit, “das schiebt das Element auf die Seite”, so ist das visuell richtig, aber faktisch falsch. Dann muss man das Konzept des Flows erklären, Clearing & Box-Collapsing sowie Overflow.
  • Kreativität: Development ist Kreativität, egal ob im Backend oder im Frontend. Wer nicht kreativ ist, bringt es nicht weit. Damit ist nicht die Fähigkeit gemeint, etwas außergewöhnlich zu machen, sondern etwas zu “kreieren”. Wer kreativ ist, kreiert. Der Unterricht soll diese Fähigkeit der Studenten fördern und fordern. Das Problem daran ist, dass zu viel kreativer Freiraum in Stasis endet. Einfach nur zu sagen “Entwickelt irgendeine Website!” ist zu ungenau. Constraints fördern Kreativität!
  • Aufgabentrennung von Einheit und Skriptum: Zuweit war die Einheit die praktische Variante des entsprechenden Eintrags im Skriptum, weil ich der Meinung bin (das hat sich auch nachwievor nicht geändert), dass niemand bestraft werden soll, weil er ein anderer Lerntyp ist und mit Frontalunterricht nicht klar kommt, grundsätzlich eher autodidaktisch veranlagt ist oder einfach aus welchen Gründen auch sonst, nicht am Unterricht teilnehmen kann. Für HTML und CSS muss ich jedoch eine ganz klare Trennung einführen, weil es nicht genug ist die 2½ Stunden nur die Theorie zu untermalen. Zukünftig ist die Theorie die Grundlage für die Einheit. Die Einheit selbst wird nur aus praktischen Übungen bestehen, wie auch immer die dann aussehen.

Ich sehe in dieser Auflistung die Kernprobleme. Diese haben dann zu Folgeproblemen geführt: Motivationslosigkeit, Frust, Abwendung von der Thematik (“Mich interessiert Frontend einfach nicht so…”) und natürlich am problematischsten, die Unfähigkeit das Gelernte anzuwenden.

Updates für den Unterricht

Folgende Dinge ändern sich zukünftig generell an meinem Unterricht, als TL;DR:

  • Pro Einheit wird ein Student bestimmt, der die Einheit schriftlich zusammenfasst, diese Zusammenfassung wird in den Slack-Channel der Klasse gepostet (Unitlog).
  • Ein Slack Team (saefrontend.slack.com) wird erstellt, mit privaten und public channels für Klassen, Module und Workshops.
  • Wiederholbare Quizzes für die Theorie hinter dem Skriptum werden über das Canvas-Tool erstellt.
  • Github-Projekte und Codepen-Beispiele werden mit dem Skriptum über die entsprechenden Einheiten verknüpft.
  • Codepen - Pens werden zukünftig für Codebeispiele verwendet und direkt in den Einheiten im Skriptum eingebunden
  • Resources sammelt alle Codepen, Github sowie zusätzliche, externe Inhalte, die im Unterricht Verwendung finden.
  • Mini-Sprints markieren Einheiten, in denen Studenten eigenständig, praktisch Arbeiten.
  • Teil von Mini-Sprints sind Briefings & Retro.
  • Projektarbeiten außerhalb der SAE-Zeiten sind zukünftig auch möglich.
  • In Peer-Reviews korrigieren die Studenten ihren code gegenseitig, angesetzt außerhalb des Unterrichts.
  • Tutorials sind praktische Anleitungen und Übungen.
  • Live-Coding dank Browser Sync.
  • Das Skriptum wird print friendly gemacht.
  • Visuelle Updates um die Lesbarkeit zu verbessern.

Das Ganze nun ausführlicher, für die die gerne lesen.

Aktive Einbindung in den Unterricht

Studenten werden zukünftig aktiv in die Gestaltung des Unterrichts eingebunden, über mehrere Wege, abhängig vom Modul.

Unitlogs

Pro Einheit wird eine Studentin bestimmt, der dafür zuständig ist, die Unterrichtseinheit mitzuschreiben und zusammenzufassen. Wie das passiert, was da draufsteht, ist der Studentin selbst überlassen. Diese Zusammenfassung, das Unitlog (Unit == Einheit und Log, ich weiß, sehr clever 🌚) wird dann allen übrigen Studenten zur Verfügung gestellt. Die Studentin ist auch dafür verantwortlich, fehlenden oder früher gehenden / später kommenden Studenten zu Vermitteln, was sie verpasst haben.

Mini-Sprints

Manche Einheiten werden als eigenständige, praktische Einheiten abgehalten, Mini-Sprints. Diese unterscheiden sich dadurch, dass die Studenten durch einen agile-ähnlichen Prozess begleitet werden, in dem sie innerhalb von einer oder mehreren Einheiten zu einem selbst gewählten Ergebnis kommen sollen. Beispielsweise gebe Ich ihnen vor, dass sie eine kleine Website zum Thema “Obst” machen sollen, die Studenten entscheiden aber selbst, wie groß diese Website werden soll, ob es ein Kontaktformular gibt, wie viel Design gemacht werden muss, etc.

Den Studenten steht es auch frei, zu entscheiden wie und ob sie kollaborieren. Wenn sie einzeln, oder in Teams arbeiten wollen, oder ob die gemeinsam in verschiedenen Rollen-Teams arbeiten wollen (also HTML-Team, CSS-Team, Design-Team, etc…).

Mini-Sprints können innerhalb einer Einheit aubgehalten werden und nur eine Stunde dauern, oder auch über das ganze Modul ausgebreitet werden. Jeder Mini-Sprint beinhaltet Briefings, sowie ein Retro.

Briefings

Vor eigenständigen, praktischen Teilen innerhalb der Einheit wird es Briefings geben, ähnlich der Dailies in Agile Development. Wenn die Studenten in Teams arbeiten können sie an der Stelle die Arbeit auf sich aufteilen, wenn dem nicht so ist, so wird die Arbeit von den Studenten in Schritte aufgeteilt und mit Haftnotizen festgehalten. Im nächsten Schritt werden die einzelnen Arbeitsschritte sinnvoll aneinander gereiht. Das Briefing kann auch außerhalb der Einheit stattfinden.

Retro

Den Abschluss eines Mini-Sprints macht das Retro, bei dem die Studenten gemeinsam über ihre Arbeit reflektieren; angesetzt am Ende der Stunde, oder außerhalb des Unterrichts.

Ende des Unterrichts

In manchen praktischen Einheiten wünscht man sich, man könnte noch weiterarbeiten. Als Unterrichtender möchte ich diese Energie nicht abbrechen, sondern fördern. Wenn Studenten also in einer Einheit gerne weiterarbeiten möchten, so soll das kein Problem darstellen - das Ende des Unterrichts soll von den Studenten selbst bestimmt werden.

Unterricht außerhalb der SAE-Zeit

Die Studenten sollen an realen Projekten arbeiten können. Innerhalb der Unterrichtszeit geht sich das aber oft nicht aus, also wird, wenn es erfordert wird, die Möglichkeit angeboten, auch außerhalb des Unterrichts zu arbeiten. Die Zeiten dafür können mit den Studenten gemeinsam ausgemacht werden. Vor Allem in längeren Mini-Sprints, oder in Teams ist das oft notwendig. Wenn sich Teams treffen, stehe ich zur Verfügung und kann zu ihnen kommen, wenn sie das wollen, oder man trifft sich in einer geeigneten Location (zBsp.: Coquadrat) zum gemeinsamen Arbeiten.

Peer-Reviews

Code-Reviews. Die Studenten sollen zusammenkommen und jeweils den Code des anderen reviewen, Feedback bekommen und sammeln. Das soll regelmäßig außerhalb des Unterrichts passieren und ist vielleicht auch etwas, was grundsätzlich als SAE-Event eingeführt werden kann? Die Studenten Würden davon sehr profitieren, vor Allem wenn auch erfahrenere Studenten ihr Feedback beisteuern können.

Kommunikation

Zukünftig fordere ich bei einer neuen Klasse E-Mail Adressen, um die Möglichkeit zu haben, den Kontakt herzustellen. Es hat nicht funktioniert, Ihnen anzubieten “Meldet euch unter sae@thoamssemmler.com”, die Adresse hatte über 7 Monate zwei Mails im Eingang, wohingegen Studenten außerhalb des Unterrichts mich jedoch andersartig kontaktiert hatten.

Slack

Zusätzlich gibt es für meinen Unterricht ein eigenes Slack-Team. Jede Klasse bekommt außerdem einen privaten Channel, mit ihrem Klassennahmen. Im Klassen-Channel wird über alles gesprochen, was halt nicht in die Öffentlichkeit gehört und klassen-spezifisch ist. Jeder Unterricht & Workshop erhält außerdem einen eigenen public Channel. Zudem kommen noch weitere Public Channels dazu, die zum Community Building da sind.

Der Slack Channel soll zukünftig die Kommunikationsplattform während des Unterrichts und idealerweise auch über den Unterricht hinaus gehend, sein. Übungsabgaben sollen auch über Slack abgeschickt werden, Links während dem Unterricht werden dort gepostet, während dem Unterricht. Slack ersetzt Github nicht als Archiv für den schriftlichen Inhalt, sondern erweitert es quasi.

Die Studenten werden dort auch ihre Unitlogs posten.

Github

Github wird genutzt um Beispiele zu beherbergen und eigenständig weiterzuentwickeln. Zusätzlich lebt dort auch der Code des Skriptum. Zukünftig sollen fertige Beispiele und Ergebnisse des Mini-Sprints auch über Github Pages gehosted werden.

Updates für das Skriptum

Das Skriptum wird um ein paar Funktionen erweitert und auch visuell geupdated, um es leserlicher zu machen und modern zu halten.

Tutorials

In einer Tutorials-Sektion wird es Schritt-für-Schritt Anleitung für die verschiedensten Dinge geben. Beispielsweise das Installieren von lokalen Tools, Arbeiten mit Gulp, Grunt, oder das erzielen von bestimmten Effekten.

Resources

Alle Codepen-Beispiele und Github-Resourcen, sowie externe im Unterricht verwendeten Materialien werden hier aufgelistet.

Codepen

Codepen soll zum Großteil den aktuellen Code-Highlighter ersetzen und auch direkt in den Einheiten eingebunden werden.

Updates für HTML & CSS

Hier eine Auflistung aller Änderungen, spezifisch für “HTML & CSS”:

Skriptum: Sektionierung in Konzepte und Lösungen

Aktuell ist das Skriptum, dem Aufbau des Unterrichts ähnlich, aufbauend gedacht. Angefangen mit ein wenig Internet-Geschichte geht das ganze dann über Simple-Syntax erklärung dann Schritt für Schritt in der Komplexität nach oben, das hat aber mit der Natur des Stoffes nicht funktioniert. Das Modul wird im Skriptum mehr Einheiten enthalten, als es im Unterricht gibt. Jedes Modul wird dabei einem Konzept bzw. einer Lösung entsprechen. Beispielsweise das konzept “CSS backgrounds” in dem über die background-property gesprochen wird, oder die Lösung “Hintergründe setzen” wo mehrere Ansätze vorgestellt werden, Hintergründe zu setzen.

So soll für HTML & CSS das Skriptum als Referenz dienen, nicht als Zusammenfassung der Einheit. Das macht dieses Modul zum Ersten, das die Anwesenheit in den Einheiten definitiv vorraussetzt.

Aufzeichnung über die Mitarbeit der Studenten

Über die Mitarbeit der Studenten wird exakte Aufzeichnung geführt, sodass sowohl ich, als auch die Studenten eine Visualisierung über ihren Verlauf innerhalb des Moduls haben. Es gibt dabei keine Noten, oder “erfüllt” bzw “nicht erfüllt”, das ist lediglich eine Aufzeichnung über ihre Teilnahme, die helfen soll, ein Bild über die Klasse aufzubauen.

Erstes Team-Projekt

Als eines ihrer ersten Team-Projekte werden die Studenten Eine Website aus mehreren Unterseiten machen. Jede der Unterseiten beschäftigt sich mit einem geschlichtlichen Aspekt des Webs. Ein Team wird einem Aspekt zu gewiesen und muss die jeweilige Unterseite gestalten. Sie müssen außerdem eine gemeinsame Index-Landingpage gestalten und entwickeln. Das Projekt stellt ihren ersten Mini-Sprint dar und wird zwei Einheiten insgesamt beanspruchen. Ihre fertige Website wird auf Github-Pages gehosted. Das Projekt beginnt sehr früh, in der zweiten Einheit und beeinhaltet Basic-HTML und Basic-CSS, inklusive Layout-Arbeiten mit Flexbox.

Referate

Die Studenten müssen Referate über bestimmte Konzepte & Themen halten, zBsp. über das <img> Element oder über die overflow-property. Die Referate müssen nicht lange sein, 5 Minuten reichen vollkommen, aber sie brauchen Code-Beispiele, die die Studenten verwenden sollen, um die Konzepte zu erklären. Die Referate werden ab der zweiten Einheit gehalten, abhängig von der Studenten Anzahl müssen vielleicht mehrere Referate pro Einheit gehalten werden. Die Referate werden am Anfang der Stunde gehalten.

Erste Einheit, Einführung & Syntax

Die erste Unterrichts-Einheit wird den Studenten erklären, wie dieser Unterricht funktioniert, was die Erwartungen und Anforderungen sind. Zusätzlich soll auch gesammelt werden, was die Erwartungen der Studenten und Wünsche der Studenten sind. Ihnen soll jedoch eindeutig klar gemacht werden, dass der Unterricht anspruchsvoll sein wird und ihr Commitment verlangt, was wahr ist. Wenn sie das Pensum in diesem Unterricht nicht erledigen, reflektiert sich das in ihren Prüfungsnoten.

Den Studenten wird technisch erklärt, was sie brauchen. Einige Atom-Extensions werden installiert, wenn sie Atom benutzen, und ihre lokale Umgebung wird um Brew und Node/NPM, sowie Gulp erweitert, sodass wir arbeiten können. Ihnen wird erklärt was Codepen und Github sind und sie werden bei Slack angemeldet.

Wenn noch kein Klassensprecher gewählt wurde, dass wird das in der Einheit gemacht. Zusätzlich wird eine Random Person gewählt, um diese Einheit im Unitlog zusammenzufassen. In den kommenden Einheiten können sie selbst entscheiden, wer das macht - wenn sie sich nicht auf eine Person einigen, wird sie von mir bestimmt.

Dann fangen wir auch schon gemeisnam an, die erste Website zu machen, mit dem aller nötigsten. Dabei wird die Syntax von HTML erklärt, der Aufbau eines Dokuments wird erörtert. Wir sehen uns gemeinsam in den Developer Tools das DOM an, und erforschen das User-Stylesheet. Dann schreiben wir unser erstes Stylesheet und binden es in unsere Website ein.

Ihre Hausaufgabe wird es sein, die Website laut den Angaben fertig zu machen. Sie sollen selbst forschen und das Web nutzen, um herauszufinden wie gewisse Dinge funktionieren. Ihre Abgeschlossene Aufgabe müssen Sie mir bis vor der nächsten Einheit abgeben, wenn sie noch zuvor Feedback haben möchten. Das ist auch für mich ein Commitment, Ihnen dieses Feedback zu liefern. Hausübungen sind ein Service meinerseits an die Studenten, um Ihnen die Möglichkeit zu bieten schneller zu wachsen. Es wird in jeder Stunde eine Hausaufgabe geben und ich kontrolliere jede Hausaufgabe mit Kommentaren und Feedback.

Wahl der Referatthemen und -Zeitpunkte

Alle möglichen Referatthemen werden auf Zettel geschrieben und die Studenten ziehen daraus ihr Thema für das Referat. Zusätzlich werden sie dadurch auch zu den jeweiligen Klassenexperten. Wenn die Studenten Themen tauschen möchten, dann steht ihnen das frei zu tun. Es soll klar kommuniziert werden, dass diese Studenten dadurch automatisch zu Klassenexperten auf diesem Gebiet werden und zukünftig auch als Ansprechperson in diesem Gebiet herhalten. Sie können sich auch selbst ausmachen, wer wann welches Referat macht. Die Liste wird dann im privaten Slack Klassen-Channel als Post gepostet.

Das wars für`s erste. Große Veränderungen, die hoffentlich positive Effekte haben sollen. Das wichtigste für mich war es, das Pensum der Studenten zu erhöhen. Ich habe gemerkt, dass mein Unterricht oft nicht ernst genommen wird. In dem Sinne, dass er oft als ein unwichtiger, oder kleiner Teil im Webdevelopment wahrgenommen werden, was nicht der Fall ist.

Ich hoffe, dass ich durch das erhöhte Pensum auch mehr Motivation und Druck aufbauen kann, der den Studenten hoffentlich zugute kommt, auch außerhalb ihrer SAE Zeit.