Was sind gute Übungsaufgaben für HTML/CSS/JavaScript-Anfänger?
Ich arbeite in einer kleinen Webagentur und wir geben gerne und häufig Schülern die Gelegenheit bei uns rein zu schnuppern. Meistens Praktika mit 2 Wochen länge. Mit der Zeit habe ich ein Standard Projekt entwickelt mit dem wir uns in der Zeit befassen.
Ein Schachspiel.
Zuerst wird das Brett in reinem HTML und Inline CSS erstellt. Danach lagern wir das CSS aus. Dann erstellen wir das Brett neu mit document.createElement und appendChild um zu demonstrieren was Schleifen leisten können und wieviel mehr Kontrolle und Übersicht dadurch entsteht.
Dann lasse ich den Praktikanten einen SVG Satz an Figuren heraussuchen. Und wir entdecken die Macht der JS-Objekte. Darin speichern wir die Positionen der Spielsteine der beiden Farben. Es werden JS und CSS Variablen verwendet um die Farben der Felder und Figuren zu verändern und die größe der Felder wird per Slider anpassbar gedacht. Wenn das geschafft ist werden die Figuren, anhand der Informationen die im Objekt gespeichert sind, auf dem Brett platziert.
Eventlistener sorgen dann für Interaktivität mit der Maus. Hover, Click und Drag und drop. Wenn das geschafft ist wird ein System für die Bewegungsmuster der einzelnen Spielsteine entwickelt. Inklusive Vorschau und Prüfung ob ein Stein an einer bestimmten Stellen abgelegt werden darf.
Wie weit wir kommen hängt natürlich immer vom Schüler ab. Aber in den meisten Fällen reichen die 2 Wochen um einen guten Überblick zu bekommen zu was die einzelnen Komponenten zu leisten im Stande sind.
Bisher hab ich darauf immer gutes Feedback bekommen…