Eindopdracht

Interactive webpagina

• 🎨 Ontwerp en ontwikkel een visueel aantrekkelijke en interactieve webpagina
• 🔍 Zelfgekozen thema
• 💻 JavaScript voor interactiviteit
• 🖌️ HTML/CSS voor een dynamische gebruikerservaring

Themavoorbeelden

🛍️  Interactive productpagina

• 👕 T-shirtcollectie met live preview van kleuren/patronen
• 🎬 Interactieve promopagina voor film Zillion met licht/muziekvisuals die reageren op muisbewegingen
• ...

📚  Storytelling website

• 🔎 Interactief detectiveverhaal waarbij je aanwijzingen moet verzamelen
• 📓 Mysterieus schetsboek waarbij schetsen en notities veranderen naargelang je klikt en scrolt
• ...

🏆 Creatieve showcase

• 🎲 Bordspellen-gids met interactieve uitleg
• 🏀 Basketbalstat-tracker met vergelijking NBA-gemiddelden
• ...

🎮 Speelse beleving

• 🎨 Digitale graffiti-wall
• 🧩 "Welke designstijl ben jij?"-quiz
• ...

 👨‍🎨 Wees creatief 👨‍🎨

Requirements

📋 Minimale Vereisten (Basisniveau)

• ✅ Correcte toepassing HTML, CSS en JavaScript
• 📱 Responsief design (desktop en mobiel)
• 🔄 Minstens 15 interactieve elementen met JavaScript
• 🎭 CSS-animaties of transitions
• 📊 Gestructureerde en overzichtelijke code
• 🎯 Geavanceerd design in Figma (visuele stijl en UX)

🚀Excelleren

• ⭐ 🌐 Online publicatie via GitHub Pages
• ⭐ 📚 Gebruik JavaScript-library/framework (GSAP, Three.js, Anime.js, P5.js)
• ⭐ ✨ Geavanceerde interactiviteit (parallax, geanimeerde scroll-secties)
• ⭐ 💫 Origineel concept en sterke storytelling

📁 Folderstructuur

+ Hou je aan de geziene code conventies.

Planning

🗓️ Planning

• 📌 Lesweek 4-5: 🧩 Conceptontwikkeling
• 📌 Lesweek 5-6: 🛠️ Implementatie
• 📌 Lesweek 7: 🔧 Debugging en optimalisatie
• 📌 Lesweek 8: 🎭 Presentatie en peer review

➡️ Je start dus deze week!

Beoordeling

🏆 Criteria (50% eindscore)

• 🎨 Design en visuele impact (30%)
• 🔄 Interactiviteit (25%)
• 📊 Codekwaliteit en structuur (20%)
• 💡 Creativiteit en originaliteit (10%)
• 👥 Gebruiksvriendelijkheid (10%)
• 🤝 Peer review (5%)

📝 Daarnaast:  Continue evaluatie tijdens semester

📦 Eindproduct

• 🌐 (Online) webpagina
• 📝 Documentatie in readme.md
• 🎨 Wireframe & visual design in Figma
• 🗣️ Mondelinge presentatie

📥 Indienen

• 🔗 Public share link naar Figma file in readme.md
• 🗂️ .zip op Canvas:
  dvg1-x_voornaam-familienaam_eindopdracht.zip

Finale deadline dinsdag 1 april 23h59.

Presentatie

⏱️ Format & Timing

Woensdag 2 april @campus

• 👨‍🎓 Elke student krijgt max. 3 minuten voor presentatie & eventuele vragen
• 💻 Screen share in call
• 🧍‍♂️ Kom naar voren met je eigen laptop
• 📺 Wij streamen de call

📋 Presentatie Checklist

•  🎬 Korte demo: Toon je webpagina en de belangrijkste interacties
• 💡 Concept & ontwerp: Wat is je thema en waarom heb je dit gekozen?
• ⚙️ Interactiviteit: Welke JavaScript-technieken heb je gebruikt?
• 🧩 Uitdagingen: Wat vond je moeilijk en hoe heb je dit opgelost?

📊 Peer review via Microsoft Form

Na elke presentatie is er 1 minuut om een online form in te vullen:

• Structuur & duidelijkheid (5 sterren): Helder uitgelegd, duidelijk concept, goede uitwerking
• Interactiviteit (5 sterren): Voldoende interacties, verschillende soorten interacties
• Visueel & functioneel design (5 sterren): Ziet er goed uit, werkt vlot, zit logisch in elkaar

AI

🤖 AI & originaliteit

• 🧠 AI-tools alleen voor uitleg en debugging
• ⛔ Direct genereren van code is niet toegestaan

🤖 AI & originaliteit

• 📋 In readme.md vermelden:
  • 🔍 Welke AI-tools gebruikt
  • 🛠️ Hoe ze hebben geholpen
  • 💻 Welke code zelf geschreven
• 👨‍⚖️ Jury kan vragen stellen over je code