đŸĨ… Persoonlijk proces en leerdoelen van Roelie - r20222/your-tribe-squad-page GitHub Wiki

  • Analyseren

De opdracht is om met mijn team een website pagina te maken waarop we alle visitekaartjes kunnen vinden van onze Squad-C. Als eerste hebben we het Team Canvas ingevuld waarin onder andere staat wat onze persoonlijke leerdoelen zijn. Mijn persoonlijke leerdoelen zijn: Zo veel mogelijk leren over HTML, CSS en Javascript, en leren hoe ik frontender word. Mijn verwachting was dat we elkaar zouden helpen bij problemen. En ik heb het liefst duidelijkheid en overzicht.

  • Ontwerpen

We hebben met elkaar heel veel schetsen gemaakt, we hebben onze schetsen met elkaar besproken en aangepast. Onze uiteindelijke definitieve schets is ook terug te vinden in deze wiki.

  • Bouwen

Ik vond het zelf persoonlijk heel moeilijk om onze definitieve schets te gaan bouwen omdat ik nog niet de kennis had over hoe ik dit moest aanpakken. Gelukkig had mijn teamgenoot Elina wel die kennis. Toen we eenmaal een goede opzet hadden van onze squad page lukte het mij om een matrix effect te maken in de tweede monitor, deze code heb ik overigens wel van internet gekopieerd en een klein beetje aangepast, want ik snap zelf nog niet alle javascript van dit effect. Ook heb ik bovenin de squad page een matrix spotify muziekje aangebracht die je op play kan drukken. We hebben samen aan dit project gewerkt via github. Ik heb hierdoor geleerd hoe het werkt met github desktop en het pullen en pushen van code.

function matrix () {
  ctx.fillStyle = '#0001';

Met dit bovenstaande stukje Javascript kan je bij ctx.fillStyle de achtergrondkleur van de monitor aanpassen.

  • Integreren

We hebben onze squad page online gezet en deze is te bekijken op: https://imposters.student.fdnd.nl/

  • Testen

Ik heb steeds als ik iets probeerde te maken, zoals bij het matrix effect, getest of het werkte. In het begin lukte het maar niet om het matrix effect zichtbaar te krijgen. Uiteindelijk lukte dit wel omdat monitor 2 binnen het canvas element moest komen te staan, en niet een div element.