Wiki groep - IvarSchuyt/your-tribe-squad-page GitHub Wiki

Welkom op onze gezamenlijke Wiki!

👀 Analyse

Vooraf hebben we het FDND Team Canvas ingevuld. Hierin hebben we onder andere onze doelen vastgesteld en een taakverdeling gemaakt op basis van onze kennis en kunde. Na het invullen van de canvas konden we redelijk goed inschatten wat we van elkaar konden verwachten.

Onze team canvas

🎨 Ontwerp

Tijdens het ontwerpen bedachten we met z'n alle hoe het volledige plaatje eruit zou moeten zien. Dit deden we doormiddel van een schets te maken met de bijhorende realisatie van Html, css en js. Doordat we van te voren al bedacht hadden wat de breakdown, de properties en de selectoren zou zijn werd het voor ons makkelijker en sneller om het project daarna te bouwen.

🔨 Bouwen

Tijdens het bouwen van de website was het in de beginfase nog een beetje experimenteren, uit vinden hoe en wat. Uiteindelijk kwamen we op een duidelijk plan. We zijn enigszins losjes met de taakverdeling omgegaan. Iedereen deed wat nodig was, en hielp elkaar als iemand er niet uit kwam. We waren vrij snel klaar met het bouwen van de website, en besloten het toen responsive te maken. Ook kwamen we na het responsive maken erachter dat de namen niet meer in het scherm paste als het venster kleiner werd gemaakt, dus hebben we een dropdown menu gemaakt.

In de css hebben we een media query gebruikt om de namenlijst te laten verdwijnen als het scherm een bepaalde breedte heeft. We gaven de query een max-with van 820px. Daarin roepen we de class aan dat de namenlijst vertegenwoordigt, namelijk js_bin2. De class geven we vervolgens een display none aan. Hierdoor zorgen we er dus voor dat als de breedte van de scherm een maximale afstand van 820px heeft de namenlijst verdwijnen, wat dus ideaal is voor bijvoorbeeld een mobile form.

✨ Testen

Tijdens het testen zijn wij een fout tegengekomen waar in de dropdown de namen verdwenen, dit kwam omdat de css en de js dezelfde classes hadden waardoor bij het kleiner maken van het scherm de namen verdwenen(ook in de dropdown). Dit hebben wij verholpen door de bijbehorende classes in de juiste divjes te zetten. Ook waren wij er achter gekomen dat de site nog niet responsive was. Dit hebben wij daarna ook kunnen fixen.

💻 Integreren

Wij hebben de pagina live op github staan. https://ivarschuyt.github.io/your-tribe-squad-page/

Retrospect