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.
📂 dvg-x_voornaam-familienaam_eindopdracht (root folder)
┣ 📂 assets (folder)
┣ 📂 css (folder)
┃ ┣ 📄 reset.css
┃ ┗ 📄 main.css
┣ 📂 js (folder)
┃ ┗ 📄 main.js
┣ 📂 favicon (folder)
┣ 📄 index.html
┗ 📄 readme.md (beschrijving concept + Figma link)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
🤓 Happy coding! 🤓