FatimaZelay / Squadpage

Ontwerp en maak met een team een Squad Page met HTML, CSS en JS
https://fatimazelay.github.io/Squadpage/robby/index.html
MIT License
1 stars 0 forks source link

Squad page ROKAFA

Welkom in onze squadpage. Hierin zie je hoe Karima, Fatima en Robby hebben gewerkt en hoe zij uiteindelijk deze leuke squadpage hebben gecreëerd.

Allereest zijn wij schetsen gaan maken om uiteindelijk een definitieve schets uit te kiezen. Vervolgens hebben wij een breakdown schets gemaakt om duidelijk voor ogen wat voor HTML en CSS elementen je nodig hebt voor je website. Zo begin je niet blind aan een website maar weet je van tevoren wat er gedaan moet worden. Als het ware onderzoek je wat voor techniek nodig is om een ontwerp te realiseren.

b7590083-38cf-4226-ba89-398f7cd58c63

Na het maken van de handmatige schetsen zijn we begonnen met het maken van de digitale schetsen die we op figma hebben gemaakt.

Als eerst zijn wij begonnen met het schetsen van de squadpage op de small version (phone version). Hierdoor kregen wij een visie van hoe het eindresultaat er zou uitzien.

Screenshot 2024-09-18 at 09 51 45

Daarna zijn verder gegaan met het schetsen van de desktop versie en dat zag er zo uit:

Screenshot 2024-09-18 at 09 51 27

Dit zijn de kleurenpalleten die wij eerst in gedachten hadden voor onze squdpage:

Screenshot 2024-09-13 at 10 23 11Screenshot 2024-09-13 at 10 21 20

Screenshot 2024-09-13 at 10 42 04

Uiteindelijk hebben wij gekozen voor de laatste kleurenpalette. De kleur donkerblauw als achtergrond en lichtblauw als secundair kleur.

Quotes

Om origineel te blijven hebben wij samen met onze groep gedacht om quotes bij elke klasgenoot toe te voegen. We hebben een oproep gemaakt via teams waardoor iedereen een unieke quote kon sturen.

Screenshot 2024-09-18 at 10 20 41

Hoe zijn we tot het resultaat gekomen?

De bedoeling is dat elk teamlid vanuit hetzelfde ontwerp zijn eigen website maakt. Ondertussen hebben wij workshops gevolgd zodat we de informatie direct konden toepassen op de website. Zo hebben wij de grid workshop toegepast in onze website. Dit is terug te zien in de lay-out van de quotes en visitekaartjes. Ook hebben we de informatie van de responsive web workshop toegepast in onze website. Hierdoor past de website zich aan de pixelwaarde van de scherm.

Ontwerp en maak met een team een Squad Page met HTML, CSS en JS.

De instructie van deze leertaak staan in de INSTRUCTIONS.md

Licentie

This project is licensed under the terms of the MIT license.