Ga naar hoofdinhoud

Projectinformatie

Je bouwt dit semester een responsieve webshop voor een fictieve organisatie die je zelf bedenkt. Je werkt in 7 deelopdrachten, van concept tot werkende webshop. Daarna presenteer je je werk en beantwoord je vragen over je code.

Op deze pagina vind je wat je bouwt, hoe je je repository aanmaakt, de planning, de regels en de wireframes.

Wat bouw je?​

Je webshop heeft 9 pagina's:

PaginaAantalInhoud
Homepage1Hero (introductie bovenaan), bestsellers en bio
Shoppagina1Alle producten, winkelmandje en wishlist
Productdetailpagina6Foto, beschrijving, specificaties en knoppen
Contactpagina1Kaart, contactformulier en bevestiging

Je volgt de opbouw van de wireframes. Je kiest zelf de kleuren, het lettertype en de inhoud in je styleguide van deelopdracht 1.

Je werkt mobile-first: in deelopdracht 2 bouw je de website voor smartphones. In deelopdracht 3 pas je de lay-out aan grotere schermen aan.

Je repository aanmaken​

Je gebruikt één private repository onder de GitHub-organisatie van dit vak voor het hele project.

  1. Maak een GitHub-account aan met je AP-e-mailadres of log in op je bestaande account. Gebruik je een persoonlijk e-mailadres? Voeg je AP-e-mailadres dan toe als secundair adres in je accountinstellingen.
  2. Open de uitnodigingslink, vul je ap.student.be-e-mailadres in en klik op Request invite.
  3. Open de uitnodigingsmail van GitHub en klik op Join.
  4. Klik op GitHub op je profielfoto en kies Your organizations. Open webtechnologie-<academiejaar>. Het academiejaar heeft de vorm jjjj-jjjj.
  5. Ga naar Repositories en klik op New repository.
  6. Geef je repository de naam projectopdracht-webtechnologie-<je naam>. Vervang <je naam> door je eigen naam.
  7. Kies Private, laat de overige instellingen staan en klik op Create repository.

Hoe je de repository lokaal cloont en vanuit Codium commits maakt, lees je in de Startgids labo's.

Planning & indienen​

Werk de deelopdrachten in volgorde af: elke opdracht bouwt voort op de vorige. De planning heeft drie soorten data:

  • Aanbevolen: je dient niets in. Heb je de deelopdracht op die datum af, dan zit je op schema.
  • Feedbackdeadline: dien je werk in als je feedback wilt. Dat is optioneel. Zie Feedback.
  • Finale deadline: je dient je volledige webshop in. Dat is verplicht.
DeelOnderdeelDatumSoort
1Concept en content27/09/2026Aanbevolen
2Mobiele website met HTML en CSS11/10/2026Aanbevolen
3Responsive webshop25/10/2026Feedbackdeadline 1
4Contactformulier01/11/2026Aanbevolen
5Winkelmandje en wishlist29/11/2026Feedbackdeadline 2
6Kaart en bevestiging06/12/2026Aanbevolen
7Dynamische content20/12/2026Finale deadline
Presentatie en verdedigingWeek van 04/01/2027Verplicht
waarschuwing

De finale deadline is 20 december 2026. Te late inzendingen worden niet aanvaard. Na deze deadline wordt je repository afgesloten en kan je niets meer wijzigen.

Indienen​

Dien bij elke feedbackronde waaraan je deelneemt en bij de finale deadline als volgt in:

  1. Push je laatste wijzigingen naar GitHub.
  2. Dien de link naar je repository in via Digitap.

Enkel private repositories onder de GitHub-organisatie van dit vak worden aanvaard.

Feedback​

Na deelopdracht 3 en deelopdracht 5 kan je feedback krijgen van de lector. Daarvoor moet je aan beide voorwaarden voldoen:

  • Je hebt je werk uiterlijk op de feedbackdeadline correct ingediend op Digitap.
  • Je bent aanwezig in de eerstvolgende les / lessen.

Feedback levert geen punten op. Ze helpt je om je werk te verbeteren vóór de finale inzending.

Presentatie & verdediging​

Na de finale deadline presenteer je je webshop en beantwoord je technische vragen over je eigen code. Je moet kunnen uitleggen wat je code doet en waarom je die zo hebt geschreven.

Regels & richtlijnen​

Git-historiek​

In het vak IT-Essentials leer je vanaf lesweek 4 werken met git. Vanaf dan verwachten we dat je ook je projectopdracht op GitHub zet. Je git-historiek telt mee in de evaluatie. Ze moet tonen dat je regelmatig en zelfstandig aan je project werkt.

  • Maak een commit na elk afgerond stuk werk, met minstens één commit per deelopdracht.
  • Schrijf duidelijk wat je hebt aangepast, bv. Validatie contactformulier toegevoegd in plaats van update.
  • Push regelmatig naar GitHub.
  • Gebruik een .gitignore om overbodige bestanden uit je repository te houden, zoals .DS_Store, node_modules en editorconfiguratie.

Coding guidelines​

Volg de Coding Guidelines voor al je code. Wie ze niet volgt, verliest punten.

Teksten​

  • Schrijf alle teksten in het Nederlands.
  • Schrijf originele teksten. Kopieer geen teksten van het internet waarop copyright rust.
  • Je mag AI-tools zoals ChatGPT gebruiken voor inspiratie of om teksten te genereren.
  • Hou je teksten kort en duidelijk. Gebruik spellingscorrectie en laat iemand je teksten nalezen.

Afbeeldingen​

  • Gebruik enkel rechtenvrije afbeeldingen: eigen foto's of foto's met een vrije licentie, bijvoorbeeld van Unsplash, Pexels of Pixabay. AI-afbeeldingen mogen ook. Probeer origineel te zijn.
  • Voeg bij elke afbeelding een bronvermelding in de figcaption toe. Zo geef je de maker krediet en kan de lector de bron controleren.
  • Maak productfoto's vierkant: 500 × 500 pixels.
  • Gebruik duidelijke bestandsnamen, bv. product-zaadjes-lavendel.jpg, en een logische mappenstructuur.

Vind je geen geschikte productfoto? Kies dan een algemene afbeelding die je product goed weergeeft, zoals een rechtenvrije foto van voetbalschoenen voor een shop met voetbalschoenen.

Tools om afbeeldingen bij te snijden

Met deze tools kan je afbeeldingen bijsnijden tot de juiste afmetingen en beeldverhouding:

Wireframes​

Wireframes zijn eenvoudige schetsen van je pagina's. Ze tonen welke elementen je nodig hebt en waar ze staan. Kleuren, lettertype en inhoud haal je uit je styleguide van deelopdracht 1. Je hoeft geen apart, volledig design te maken voor je begint te bouwen.

waarschuwing

Volg de opbouw en volgorde van de wireframes zo nauwkeurig mogelijk. Hoe je ze omzet naar HTML en CSS bepaalt een groot deel van je eindscore. Bekijk de evaluatiecriteria.

Zo lees je de wireframes​

Wat zie je?Wat doe je ermee?
Grijze balkenVervang ze door je eigen teksten uit deelopdracht 1.
Kaders met een kruisPlaats hier afbeeldingen.
Blauwe elementenGebruik hiervoor de accentkleur uit je styleguide.
StippellijnenZe tonen een andere toestand, zoals een bevestiging na het versturen van een formulier.
Kleine grijze notities, bv. ↑ H2 van de paginaDit is uitleg. Neem die niet over op je website.
Teksten zoals In winkelmandje of AfrekenenJe mag deze voorbeelden aanpassen aan je webshop. Hou ze in het Nederlands.

Mobiel​

Mobiele wireframe van de homepage
Homepage: hero, bestsellers en bio

Desktop​

Desktop-wireframe van de homepage
Homepage: intro en bio links, bestsellers rechts

De wireframes staan ook bij de bijbehorende opdrachten: mobiel bij deelopdracht 2, desktop bij deelopdracht 3 en de contactpagina bij deelopdracht 4.

Voorbeeld​

Squishboel toont hoe een werkende webshop volgens de wireframes eruit kan zien. Je eigen webshop mag een andere huisstijl hebben, zolang je de gevraagde inhoud, opbouw en functies behoudt.

Squishboel: een mogelijke mobiele uitwerking van de wireframes