Docenthandleiding – Profielpagina / Student Wrapped
1. Doel van deze opdracht
In deze opdracht bouwen studenten een persoonlijke, visueel aantrekkelijke webpagina ("Student Wrapped") waarin zij zichzelf presenteren aan de hand van minimaal vijf statistieken, feiten of highlights. Het werkproces op de Fusion-pagina is expliciet stapsgewijs opgebouwd: schetsen, HTML bouwen, CSS stylen, feedback ophalen bij de AI-bot, peerfeedback ophalen in Portflow en vervolgens verbeteren.
Als docent beoordeel en begeleid je deze opdracht niet alleen op het eindproduct, maar ook op:
- werkproces
- feedbackgebruik
- zelfsturing
- professioneel gedrag
- verantwoorde inzet van AI
Dat sluit aan op de BOKSA, waarin juist afspraken nakomen, voortgang delen, feedback verwerken, plannen, documenteren, reflecteren en verantwoord omgaan met GenAI centraal staan.
2. Wat studenten volgens Fusion moeten opleveren
De opdrachtpagina vraagt minimaal:
- een papieren schets van de pagina met minimaal 5 secties;
- een Student Wrapped met een openingsdeel, 5–7 secties en een afsluiting;
- gebruik van semantische HTML zoals header, main, section of article;
- navigatie via ankerlinks of een eigen HTML/CSS-oplossing;
- minimaal 1 afbeelding of visueel element per sectie;
- CSS met een kleurenschema, achtergronden, transitions, minimaal 2 animaties en interactieve states;
- code die conventies volgt en logisch georganiseerd is;
- aantoonbaar gebruik van de AI feedback-bot;
- peerfeedback via Portflow en zichtbare verwerking daarvan;
- al het werk in GitLab, inclusief schetsen, met meerdere commits per dag en betekenisvolle commitmessages.
3. Docentdoel bij deze opdracht
Deze opdracht is in de praktijk een combinatie van:
- eerste webdevelopmentvaardigheden;
- leren werken in iteraties;
- feedback leren gebruiken;
- leren verantwoorden wat je zelf hebt gemaakt;
- AI als leertool inzetten in plaats van als vervanging van eigen denken.
De docent begeleidt dus op twee niveaus:
- technisch product
- leer- en werkgedrag volgens de BOKSA
4. BOKSA-koppeling voor deze opdracht
A. Professioneel gedrag
1. Afspraken nakomen
Wat je wilt zien
- Student levert onderdelen tijdig aan.
- Student heeft schets, code en feedbackverwerking op tijd beschikbaar.
- Student houdt zich aan afgesproken tussenproducten.
Bewijs
- schets aanwezig in GitLab;
- werkende tussenversie;
- op tijd aangeleverde Portflow-feedback;
- commits verspreid over de werkperiode.
2. Verantwoordelijkheid nemen
Wat je wilt zien
- Student pakt zelfstandig taken op.
- Student wacht niet passief af.
- Student lost eerst zelf iets op en schakelt dan gericht hulp in.
Bewijs
- voortgang in GitLab;
- concrete hulpvragen;
- eigen keuzes in structuur, stijl en inhoud;
- student kan code en ontwerp toelichten.
3. Communiceren over leren
Wat je wilt zien
- Student vertelt waar hij of zij mee bezig is.
- Student benoemt knelpunten.
- Student bespreekt ontvangen feedback en vervolgstappen.
Bewijs
- mondelinge toelichting tijdens les;
- notities of korte update in portfolio/Portflow/GitLab;
- uitleg bij feedbackmomenten.
4. Feedback ontvangen en verwerken
Wat je wilt zien
- Student haalt actief feedback op bij AI en peers.
- Student verwerkt feedback zichtbaar.
- Student kan uitleggen wat is aangepast en waarom.
Bewijs
- feedback in Portflow;
- before/after in code of ontwerp;
- korte reflectie: "ik heb dit aangepast op basis van …".
De Fusion-opdracht noemt expliciet peerfeedback via Portflow en verbeteren op basis van feedback.
5. Veilig en verantwoord werken
Wat je wilt zien
- Student deelt geen onveilige of ongepaste persoonlijke informatie.
- Student gaat zorgvuldig om met afbeeldingen, privacy en AI-output.
- Student begrijpt dat "persoonlijk" niet betekent dat alles online moet.
Bewijs
- passende inhoud op de pagina;
- bron- en beeldgebruik bespreekbaar;
- student kan AI-gebruik toelichten.
Dit sluit aan op de BOKSA-onderdelen privacy, AVG en verantwoord werken.
B. Zelfregulatie
1. Studie plannen en monitoren
Wat je wilt zien
- Student heeft een haalbare aanpak.
- Student werkt in stappen: schets → HTML → CSS → feedback → verbeteren.
- Student stuurt bij als planning niet werkt.
Bewijs
- eigen takenlijst of sprintplanning;
- zichtbare opbouw in GitLab;
- student kan aangeven waar hij/zij staat in het proces.
De Fusion-pagina beschrijft dit werkproces expliciet in vijf stappen.
2. Voortgang documenteren
Wat je wilt zien
- Student legt ontwikkeling vast.
- Niet alleen eindproduct, maar ook tussenstappen zijn zichtbaar.
Bewijs
- schets in GitLab;
- commitgeschiedenis;
- eventuele korte portfolio-notities;
- peerfeedback plus verwerking.
GitLab en meerdere commits per dag zijn expliciet onderdeel van de opdracht.
3. Zelfmotivatie en doorzetten
Wat je wilt zien
- Student begint zelfstandig.
- Student blijft verder werken na technische of creatieve tegenslag.
- Student vraagt hulp vóórdat het vastloopt.
Bewijs
- actieve werkhouding tijdens les;
- concrete vragen;
- aantoonbare voortgang ondanks obstakels.
4. Proactieve rol in leerproces
Wat je wilt zien
- Student stelt gerichte vragen.
- Student gebruikt AI en peers niet passief, maar doelgericht.
- Student zoekt hulp met een specifieke leervraag.
Bewijs
- kwaliteit van hulpvragen;
- concrete feedbackvraag aan AI of peer;
- mondelinge toelichting op eigen keuzes.
C. Methodes / verantwoord leren met AI
De BOKSA noemt ook reflecteren, leerdoelen formuleren, verantwoord omgaan met GenAI en reflecteren op GenAI-bijdrage. Voor deze opdracht betekent dat het volgende:
1. Leerdoel en aanpak omschrijven
Wat je wilt zien
- Student kan benoemen wat hij/zij deze opdracht wil leren.
- Bijvoorbeeld: semantische HTML, CSS-layout, ankerlinks, visuele hiërarchie, feedback gebruiken.
2. Reflecteren op handelen
Wat je wilt zien
- Student kijkt terug op keuzes in ontwerp en code.
- Student kan benoemen wat werkte, wat nog niet werkte en wat de volgende stap is.
3. GenAI verantwoordelijk inzetten
Wat je wilt zien
- Student gebruikt AI als feedback- en leerinstrument.
- Student neemt AI-output niet blind over.
- Student kan uitleggen welke prompt of vraag is gebruikt en wat wel of niet bruikbaar was.
De opdrachtpagina zegt expliciet dat studenten hun AI feedback-bot actief moeten gebruiken tijdens het bouwen van de Student Wrapped.
4. GenAI-bijdrage reflecteren
Wat je wilt zien
- Student maakt onderscheid tussen eigen werk en AI-ondersteuning.
- Student benoemt wat AI heeft geholpen verbeteren.
- Student kan uitleggen wat hij/zij zelf begrijpt van de code.
Dat is extra belangrijk omdat de opdracht ook expliciet zegt dat de student de gecommitte code zelf geschreven moet hebben en goed moet kunnen toelichten.
5. Waar let je als docent concreet op tijdens de les
Tijdens de start
Controleer of de student:
- een haalbaar idee kiest;
- begrijpt wat een sectie is;
- niet te veel tegelijk wil;
- een papieren schets maakt vóór het bouwen.
De Fusion-pagina noemt die schets als eerste stap en als acceptatiecriterium.
Tijdens het bouwen
Let op:
- werkt de student vanuit structuur of direct op details;
- vraagt de student gerichte feedback;
- blijft de HTML semantisch;
- is CSS experimenteel maar nog beheersbaar;
- kan de student keuzes uitleggen.
Tijdens feedbackmomenten
Vraag bijvoorbeeld:
- Welke feedback heb je van je bot gekregen?
- Welke peerfeedback was bruikbaar?
- Wat heb je veranderd?
- Wat snap je nu beter dan eerst?
- Wat is nog niet gelukt?
Bij de afronding
Laat de student kort toelichten:
- hoe de pagina is opgebouwd;
- welke feedbackrondes er waren;
- wat met AI is gedaan;
- wat hij/zij zelf geleerd heeft;
- waar in GitLab de ontwikkeling zichtbaar is.
6. Praktische beoordelingsvragen voor de docent
Je kunt deze opdracht eenvoudig bespreken of nakijken met de volgende vragen:
Product
- Is de pagina technisch compleet volgens de minimale eisen?
- Is er een duidelijke structuur met 5–7 secties?
- Zijn HTML en CSS begrijpelijk en verzorgd?
- Is het eindproduct visueel duidelijk en passend?
Proces
- Is er een schets?
- Is er iteratie zichtbaar?
- Is feedback aantoonbaar opgehaald en verwerkt?
- Is voortgang zichtbaar in GitLab?
- Kan de student het eigen werk uitleggen?
BOKSA
- Komt de student afspraken na?
- Werkt de student zelfstandig en planmatig?
- Vraagt en verwerkt de student feedback?
- Documenteert de student voortgang?
- Gebruikt de student AI bewust en verantwoord?
7. Valkuilen waar je op moet letten
Te productgericht nakijken
Dan mis je precies het leerdoel van deze opdracht: iteratief werken, feedback gebruiken en eigen keuzes kunnen verantwoorden.
AI-gebruik niet expliciet uitvragen
Dan weet je niet of de student AI als leertool gebruikte of slechts output kopieerde. De Fusion-opdracht verwacht juist expliciet gebruik van de AI feedback-bot.
Te veel nadruk op "mooie pagina"
De opdracht vraagt een visueel aantrekkelijk product, maar ook semantische HTML, codekwaliteit, versiebeheer, feedbackverwerking en toelichtbaarheid.
Privacy onderschatten
Studenten maken een persoonlijke pagina. Begeleid dus op passende zelfpresentatie: persoonlijk genoeg om authentiek te zijn, maar niet zo persoonlijk dat privacy of veiligheid in het gedrang komt. Dit sluit aan op de BOKSA rond privacy en verantwoord werken.
8. Korte docentinstructie voor gebruik in de les
Doel: begeleid studenten op product én leerproces.
Kernbewijs: schets, GitLab, feedbackverwerking, werkende pagina, toelichting student.
Belangrijkste BOKSA-focus:
- professioneel gedrag;
- zelfregulatie;
- verantwoord AI-gebruik.
Minimale docentchecks:
- Heeft de student een schets?
- Is de opbouw in HTML/CSS zichtbaar?
- Is feedback opgehaald en verwerkt?
- Is voortgang zichtbaar in GitLab?
- Kan de student eigen keuzes en AI-gebruik toelichten?