Web App From Scratch @cmda-minor-web 2023 - 2024

In dit vak gaan we een web applicatie bouwen en leren hoe deze werken door zo min mogelijk libraries, frameworks of andere bronnen te importen (vanilla) en zoveel mogelijk het browser platform te gebruiken door middel van HTML, CSS & JavaScript.
Het eindresultaat is een modulaire, single page web app (SPA), beoordeeld op jouw niveau en eigen leerdoelen.
De bedoeling is om een web app te bouwen die data ophaalt van een externe API, deze manipuleert om te tonen in de UI van de App, hoe abstract dan ook. Je gaat bekende patterns leren toe passen bij het bouwen en testen van de applicatie voor een eigen "WebSite" en een gezamenlijke "Team App". Nog nooit heb je zo snel kunnen prototypen als nadat je hebt leren werken met de browser en haar talen. Daarnaast zal je tijdloze kennis opdoen over het de aard en het gebruik van data, datastructuren, algoritmes, libraries, frameworks en de werking van het web.

Assignment

1. Bouw je eigen SPA/WebSite met externe data van een API, minimaal 1 micro interactie.
2. Een TeamApp met een verzameling van alle losse websites van je teamleden

---

Program

Planning	Maandag	Dinsdag	Woensdag	Donderdag	Vrijdag
	Kick-Off, Dev WebSite	Dev TeamApp, Workshops	Dev *, Weekly nerd	Dev *, Workshops	Code review, Voortgangsgesprekken, Dev *
	Dev *, Workshops	College + Workshops	Dev *, Weekly nerd, Deadline 23:59	Mondeling, Weekly Nerd Blog	Reparatiegesprekken, Afsluiting, 🍻 Fest?

Kick-off presentatie JavaScript presentatie presentatie UI stack

Beoordeling

Je inzet wordt beoordeeld met behulp van het beoordelingsformulier (zie hieronder). Je moet het criterium (middenkolom) behalen om het vak te voltooien. Tijdens de toets wordt je mondeling overhoord en krijg je feedback over dingen die we denken dat tekort schieten en dingen die we denken dat een verbetering zijn op het criterium.

Deel 1 - Voorwaarden

Je persoonlijke app

• is gerealiseerd met ‘nette’ vanilla HTML, CSS en Javascript,
• bevat diverse content,
• bevat minimaal één tot in detail uitgewerkte micro-interactie (met JS),
• bevat minimaal één data-connectie (API call),
• bevat de juiste data voor integratie met de team app,
• is toegankelijk,
• heeft een professionele vormgeving (en styling),
• is volledig responsive,
• is gedocumenteerd.

De team app

• is gerealiseerd met ‘nette’ vanilla HTML, CSS en Javascript,
• bevat content via een data-connectie met de persoonlijke app,
• bevat minimaal één tot in detail uitgewerkte micro-interactie (met JS),
• bevat de juiste data voor integratie met de WAFS app,
• is toegankelijk,
• heeft een professionele vormgeving (en styling),
• is volledig responsive,
• is gedocumenteerd.

Oplevering:

• Je website met procesverslag staat tijdig online op GitHub (en in een zip op DLO) en is daar zonder technische problemen te zien.
• Verwijzingen naar benodigde bestanden (assets) werken.
• De website werkt op een desktop/laptop én op een telefoon.
• Je code is verzorgd en leesbaar. Netjes ingesprongen, van commentaar voorzien, etc.

Proces:

• Je hebt je vorderingen besproken en je proces vastgelegd in je verslag.
• Je procesverslag bevat verslagen van de toegankelijkheidstesten.
• Je demonstreert de toegankelijkheid tijdens het eindgesprek.
• Je vermeldt gebruikte bronnen in je procesverslag.

Begrip:

• Je kunt je code en keuzes uitleggen in het eindgesprek.

Deel 2 – Beoordeling

Voor een hoger cijfer:

• Groot begrip tonen van de scope en mogelijkheden – weldoordachte
• en onderbouwde keuzes maken voor het toepassen van bepaalde technieken.
• Elegante, onderhoudbare en uitbreidbare code schrijven.
• Code die werkt in meerdere browsers – waarbij je progressive enhancement passend inzet.
• Veel resultaat bereiken met weinig code. Zelfde resultaat bereiken met minder code.
• Performance optimaliseren.
• Verfijnde, vernuftige en/of unieke interactie.
• Meerdere vormen van input ondersteunen.
• Inhoud, vorm en interactie versterken elkaar.
• Oog voor grote geheel en voor corresponderende ieniemienie details.
• Experimenten en randomness floreren.

Beoordeling

• Indien aan basisvoorwaarden voldaan => voldoende en cijfer bepalen
• Indien niet aan basisvoorwaarden voldoen => 1 (deel 2 is niet relevant)

Teams

Team	Thema	Leden	Data
Eendjes	Eendjes	Kevin, Quinten, Justin, Lars	Alles is eenden gerelateerd, favo vijver
	Koken	Katarina, Raul, Lisa, Jurien	2 leugens - 1 waarheid, skills, ontbijt, schermtijd
Deck of devs	Playing cards	Niels, Ali, Ufuk, Sena	Avatar, About me, Socials, Spotify solo & team
Number Ones	Games	Brianne, Elaine, Rose, Ruud	Favo games, genre, biome
	Pokemon	Eva, Manoah, Nesli, Laura, Yeliz	Skills, zwaktes, favo pokemon
	Reizen	Joppe, Eefje, Jop, Lynn	Recepten
	Huisdieren	Stephan, Nicole, Stef, Mitchel	Eigen huisdier, favo dieren
	Muziek	Karenza, Xiao Nan, Max, Hidde	Emojis, top genres, top artiesten
Heroes & Villains	Films	Tristan, Bart, Ferhat, Klaudia, Martijn	Favo films, favo acteurs, genres, karakters