Eindopdracht

Na het oefenen met het maken van een website is het nu tijd om het eindproduct voor deze module te gaan maken. Zo kan je alle geleerde kennis meteen toepassen en een website maken die je nog gaat gebruiken.

De opdracht is eenvoudig: maak een website! Het onderwerp en de inhoud van de site mag je zelf bepalen, en ook het design is aan jou (maar denk wel aan wat je daarover tijdens de les hebt geleerd). In een begeleidend document leg je kort uit welke keuzes je in het design hebt gemaakt.

Wat wel belangrijk is: je website moet in principe publiceerbaar zijn. Dat betekent dat je je ook aan copyright regels moet houden, en dus geen teksten of afbeeldingen kopieert die niet van jou zijn, als je daar geen toetstemming voor hebt. Dat geldt ook voor de HTML en CSS code: in principe schrijf je die zelf, tenzij je toestemming hebt om die code te kopiëren en je dat duidelijk vermeldt met commentaar. Dezelfde eisen gelden voor generatieve AI: code mag je alleen overnemen als je dat duidelijk vermeldt met commentaar. Generatieve AI gebruiken als zoekmachine of om de juiste aanpak te bepalen, is natuurlijk prima. Zie de Handleiding code stelen voor meer informatie. Code die je gekopieerd hebt, telt voor de beoordeling natuurlijk niet mee in de eisen aan HTML en CSS. En voor het design krijg je ook geen punten, als dat niet je eigen design is. Je laten inspireren en zelfs elementen overnemen is prima, maar de kern moet altijd je eigen werk zijn.

Designverantwoording

Voeg een document toe aan je website waarin je uitlegt welke designkeuzes je hebt gemaakt. Waarom zit de navigatie daar? Wat heb je gedaan om het overzichtelijk te houden? Benoem hoe je de basisregels hebt toegepast en wat de resultaten van jouw usability tests waren.

Beoordeling

Minimale eisen:

• De website bestaat uit minimaal twee pagina’s met onderlinge navigatie

• De website is gemaakt met HTML, CSS en eventueel JavaScript

  • Squarespace, Webflow, Wix, Framer etc. voldoen dus niet voor deze opdracht

  • Wil je dieper gaan? Gebruik van een CMS, SSG, WAF of SPA framework is toegestaan, mits je je eigen templates maakt (en kan je zelfs bonuspunten opleveren)

Eindproducten die niet aan deze voorwaarden voldoen, kunnen geen voldoende scoren. We beoordelen je website aan de hand van deze rubric:

	Onvoldoende (3)	Voldoende (6)	Goed (9)
Design: uitvoering*	Bijvoorbeeld: Het doel van de website is onduidelijk Er is geen heldere structuur Pagina’s voelen los en onsamenhangend	Bijvoorbeeld: Het doel van de website is duidelijk Navigatie is aanwezig en consistent Informatie is overzichtelijk weergegeven Teksten zijn scanbaar	Zoals voldoende, plus bijvoorbeeld: De site oogt professioneel en samenhangend Er is een duidelijke visuele hiërarchie
Design: verantwoording	Bijvoorbeeld: Alleen een beschrijving van wat, niet waarom Geen usability test uitgevoerd	Bijvoorbeeld: Legt uit welke designkeuzes zijn gemaakt en waarom Verwijst naar de basisregels Beschrijft de resultaten van een uitgevoerde usability test	Zoals voldoende, plus bijvoorbeeld: De verantwoording is specifiek, met een koppeling van vuistregels aan concrete designkeuzes De usability test is sterk opgezet en uitgevoerd met meerdere gebruikers uit de doelgroep Goede beschrijving van aanpassingen die zijn gemaakt naar aanleiding van de usability test
HTML: validiteit en leesbaarheid	Bijvoorbeeld: Structurele fouten, zoals niet-afgesloten tekst Moeilijk leesbare code, bijvoorbeeld door inconsistente inspringing	Bijvoorbeeld: Valide HTML code Correcte inspringing De link tussen de pagina en de browser en HTML elementen is makkelijk te herkennen	Zoals voldoende, plus bijvoorbeeld: Consistente en overzichtelijke opbouow Logische bestandsstructuur
HTML: structuur	Bijvoorbeeld: Nauwelijks gebruik van semantic elements Alinea’s door <br/><br/> witregels Geen gebruik van elementen (bijvoorbeeld lijsten of een tabel) waar dat zou passen	Bijvoorbeeld: Er is een basisstructuur met <header>, <nav>, <main> en <footer> op alle pagina’s Correct gebruik van diverse HTML elementen waar ze voor bedoeld zijn	Zoals voldoende, plus bijvoorbeeld: Goed gebruik van semantic elements, inclusief <section>, <article>, <aside>, <figure> <div> en <span> worden alleen gebruikt bij gebrek aan een passend semantic element Nette structuur van tussenkopjes: geen overgeslagen niveaus (bijv. <h3> onder <h1>)
CSS: visuele vormgeving	Bijvoorbeeld: Eigen stijlen worden nauwelijks gebruikt Willekeurige of onsamenhangende stijlen	Bijvoorbeeld: Meerdere stijlregels dragen bij aan een samenhangende visuele stijl Kleuren, typografie en spacing zijn consistent toegepast	Zoals voldoende, plus bijvoorbeeld: Layout properties worden op een goede manier ingezet Er is veel aandacht voor details, bijvoorbeeld in verschillende link states
CSS: structuur	Bijvoorbeeld: Alle CSS staat inline of in losse <style> blokken CSS regels worden niet hergebruikt voor meerdere pagina’s Moeilijk leesbare code, bijvoorbeeld door onoverzichtelijke inspringing	Bijvoorbeeld: Er is minimaal één .css-bestand dat voor meerdere pagina’s wordt gebruikt De juiste selectors (op element, class of id) worden gebruikt	Zoals voldoende, plus bijvoorbeeld: Stijlregels zijn efficiënt geschreven, met minimale herhaling, bijvoorbeeld door herbruikbare classes Er is zinvol gebruik gemaakt van cascading voor consistente stijling binnen elementen en specifiekere stijlen voor specieke elementen

Je cijfer is het gemiddelde van de 6 criteria uit de rubric. Voor het niveau goed staat in principe een 9, maar voor websites die boven die criteria uitstijgen of ze zeer consistent goed implementeren geven we een 10. Indien een onderdeel geheel afwezig is, bijvoorbeeld bij een ontbrekend design document of het niet gebruiken van CSS, dan rekenen we voor dat onderdeel een 1.

Bonus voor extra uitdaging: zie Extra uitdaging voor een aantal ideeën, maar voel je vrij om zelf met suggesties te komen. Met een zinvolle toepassing van een aantal van deze technieken in je website, kun je tot 1 punt bonus op je cijfer krijgen.

* Bij design hebben we het altijd over vuistregels, dus neem deze criteria met een korrel zout: voor een geheime sekte moet de website misschien juist niet heel overzichtelijk zijn… Met een goede uitleg kun je ook daarmee goede punten scoren!

Inleveren

Je levert je website in via de Inlever-knop op app.q-highschool.nl. Je kunt daar maar één bestand inleveren, dus moet je alle bestanden van je website (HTML, CSS, afbeeldingen, etc.) een .zip bestand maken.

1. Zorg dat alle bestanden in één map staan en open die map als project in Visual Studio Code (Bestand → Map openen…).

2. Open die map in de Verkenner (Windows) of Finder (macOS). Dat kan direct vanuit Visual Studio Code: klik in de VS Code Explorer met rechts op je projectmap en kies Reveal in File Explorer (Windows) of Reveal in Finder (macOS).

3. Maak een .zip bestand volgens deze instructies. Vergeet niet om ook je document met uitleg over je design toe te voegen aan deze map!

4. Lever het .zip-bestand in op app.q-highschool.nl.

In gesprek

Omdat we graag willen weten hoe je tot jouw uitwerking van de eindopdracht bent gekomen, kunnen we je vragen voor een gesprek. Als we je niet in de les hebben gezien of we hebben het idee dat je je website niet zelf hebt geschreven, dan kun je natuurlijk sowieso rekenen op een uitnodiging. Als je hiervoor wordt gekozen, dan wordt je eindcijfer na afloop van dit gesprek bepaald. Wil je zelf graag iets uitleggen over je website? Geef dan bij je docent aan dat je ook graag een beoordelingsgesprek wilt hebben.

Geen inspiratie?

Maak een CV of portfolio! Bij het solliciteren voor een nieuwe baan wordt bijna altijd om je curriculum vitae (CV) gevraagd. Voor veel mensen is dit een simpel Word-bestandje of PDF waarin de werkervaring en opleidingen van een persoon staan. Vaak wordt daar ook nog een beetje informatie over jezelf aan toegevoegd. In onze ogen is dat allemaal een beetje achterhaald, wij vinden namelijk dat iedereen binnen de informaticawereld een online CV moet hebben! Dat is dan ook de opdracht, je gaat een website maken als vervanging voor je CV.

Als je nog nooit een CV hebt gemaakt dan is deze site misschien een goede plek om te beginnen. Als je al een CV hebt dan is het slechts een kwestie van die informatie in een goede website verwerken!

Mocht je geen CV willen maken en nog steeds geen inspiratie hebben, kopieer en plak dan de volgende prompt in je favoriete AI chatbot, bijvoorbeeld Gemini of ChatGPT.

Je bent mijn creatieve webdesign-coach. Je helpt mij om drie leuke ideeën te bedenken voor een website die ik zelf kan bouwen met HTML5 en CSS3. De ideeën moeten aansluiten bij mijn interesses en hobby’s, zodat ik gemotiveerd ben om ermee aan de slag te gaan. Geef bij elk idee kort aan waarom het goed bij mij past en welke onderdelen (zoals tekst, afbeeldingen, navigatie of kleurgebruik) ik erin kan verwerken. Geef mij ideeën en beschrijvingen.