Skip to content
ICT Fusion Knowledgebase

Profielpagina - Student Wrapped

Introductie

Nu je een AI Feedback-bot hebt gebouwd in Opdracht 1, ga je deze bot actief gebruiken tijdens het maken van jouw Student Wrapped! Je maakt een interactieve, visueel aantrekkelijke webpagina waarin je jezelf presenteert aan de hand van persoonlijke statistieken en highlights.

Tijdens deze opdracht ga je kennismaken met:

  • HTML en CSS (opmaaktalen voor webpagina’s)
  • Git(Lab) en versiebeheer
  • Visual Studio Code (de omgeving waarin je je code schrijft)
  • Bouwen, testen en verbeteren in een steeds herhalend proces
  • Feedback gebruiken om je werk te verbeteren

Let op: Je gebruikt de AI-assistent die je in Opdracht 1 hebt gemaakt om je te helpen met feedback op je code terwijl je je Student Wrapped bouwt. Zo leer je niet alleen programmeren, maar ook hoe je AI slim kunt inzetten als studietool.

Wat is een Student Wrapped?

Een Student Wrapped is een interactieve webpagina die uit meerdere secties bestaat. Elke sectie presenteert één statistiek, feit of highlight over jou op een visueel aantrekkelijke manier. Denk aan Spotify Wrapped, maar dan over jouw eigen leven, interesses en prestaties!

Op deze pagina presenteer je jezelf aan docenten en medestudenten op een creatieve en moderne manier. Je laat zien hoe je planmatig te werk gaat en demonstreert je eerste vaardigheden met de opmaaktalen HTML en CSS.

Student Wrapped maken met je AI Feedback-bot

Werkproces

Je gaat systematisch te werk en gebruikt je AI Feedback-bot bij elke stap:

  1. Begin met een papieren schets van je Wrapped (minimaal 5 secties)
  2. Bouw de HTML structuur → Vraag feedback aan je bot
  3. Style met CSS → Vraag feedback aan je bot
  4. Haal feedback op bij medestudenten in Portflow
  5. Verbeter op basis van alle feedback

Inhoud van jouw Wrapped

Je kiest minimaal 5 statistieken/feiten uit onderstaande categorieën (of verzin je eigen!):

Gaming/Entertainment:

  • Most played game
  • Total hours gamed/watched
  • Favorite genre
  • Biggest achievement

Persoonlijk:

  • Hobbies en interesses
  • Favorite food/muziek/film
  • Reizen of plaatsen bezocht
  • Bijzondere momenten dit jaar

Studie/Skills:

  • Waarom HBO-ICT gekozen
  • Favoriete programming language (tot nu toe)
  • New skills learned
  • Study goals

Social/Lifestyle:

  • Favorite hangout spot
  • Vrienden/familie
  • Bijzondere eigenschappen
  • Fun facts over jezelf

Mogelijke structuren

Je kunt kiezen hoe gebruikers door je Wrapped navigeren:

  1. Scroll-pagina: Eén lange pagina waar gebruikers doorheen scrollen, elke sectie vult het scherm
  2. Anker-links: Links/knoppen bovenaan die je naar verschillende secties
  3. Eigen alternatief: Verzin je eigen manier van navigeren met HTML en CSS!

Minimale structuur:

  • Een openingsgedeelte met jouw naam
  • 5-7 secties met jouw persoonlijke stats
  • Een afsluitend gedeelte

Technische eisen

HTML

  • Semantische structuur met <header>, <main>, <section> of <article>
  • Elke contentgedeelte heeft een duidelijke HTML structuur
  • Navigatie-elementen aanwezig (anker-links of internal links)
  • Minimaal 1 afbeelding of visueel element per sectie

CSS

  • Gebruik van een kleurenschema (minimaal 3 kleuren)
  • Gradient backgrounds of interessante achtergronden
  • Smooth transitions tussen states (bijv. hover effecten)
  • Minimaal 2 CSS animaties (bijv. fade-in, slide-in, pulse)
  • Gebruik van :hover, :focus of andere pseudo-classes voor interactiviteit

Code kwaliteit

Acceptatiecriteria

Jouw opdracht is compleet als aan de volgende eisen is voldaan:

Student Wrapped technisch

  • Je hebt een papieren schets gemaakt van je Wrapped (minimaal 5 secties)
  • Je voldoet aan de Technische eisen dier hier boven zijn vermeld.

AI Feedback-bot gebruik

  • Je heb je feedback-bot aangepast naar aanleiding van de feedback die je hebt gekregen.
  • Je hebt een nieuwe versie van je persona geëxporteerd en geüpload naar Portflow

Peer feedback

  • Je hebt feedback opgehaald bij een collega-student in Portflow
  • Je kunt laten zien wat je met de peer feedback hebt gedaan

Algemene eisen

Er zijn een aantal algemene eisen waaraan je werk moet voldoen. Deze gelden voor al het werk dat je doet op de HBO-ICT.

  • Al je werk staat op gitlab (dus ook schetsen).
  • Je doet meerdere commits per dag.
  • Je commitmessages zijn betekenisvol.
  • De code die hebt gemaakt is “netjes” en voldoet aan geldenden ICT standaarden.
  • De code die je commit heb je zelf geschreven en kan je ook goed toelichten.
  • De gebruiker krijgt een mooi en duidelijk eindproduct te zien.

Bonus uitdagingen (optioneel)

Voor studenten die verder willen gaan:

  • Smooth scroll: CSS scroll-behavior: smooth voor vloeiend scrollen
  • Scroll-snap: Gebruik CSS scroll-snap om secties netjes uit te lijnen
  • Complexe animaties: Keyframe animaties met meerdere stappen
  • Dark/light mode: CSS media query prefers-color-scheme
  • Advanced hover effecten: Transformaties, filters en complexe transitions
  • CSS Grid/Flexbox mastery: Geavanceerde layouts met moderne CSS
  • Responsive design (werkt op desktop én mobile)