Skip to content
fatihg61 edited this page Sep 23, 2022 · 6 revisions

Wij zijn team Straw Hats en bestaan uit 4 FDND studenten:

  • Jalal Toufik
  • Maika Nguyen
  • Fatih Güler
  • Zenit Araya

Het doel van dit project is om alle visitekaartjes van de studenten uit klas 1C van de opleiding AD Frontend Design & Development te tonen in een website. Wij hebben alle studenten per team gecategoriseerd.

Dit is mijn Wiki pagina apart van onze gezamenlijke.

The Development Life Cycle


1. Analyse

We hebben een analyse uitgevoerd aan de hand van de opdracht die we kregen en uiteindelijk allemaal website bekeken om zo tot en conclusie te komen hoe we het besten de opdracht uitkunnen werken. Dit is terug te zien bij de foto van 2.1.

2. Ontwerpen

We hebben wat ontwerpen gecheckt online en aan de hand daar van ook onze schetsen gemaakt zie hieronder.

  1. Inspiratie van overzicht pagina's

image

  1. Onze abstracte sketches

image image

  1. Onze breakdown sketch met HTML-elementen

image image

  1. Onze breakdown sketch met CSS-elementen

image 5. Definitieve digitale design

image

3.Bouwen

  1. De eerste versie van onze website. Het zag er niet veel uit maar dat was pas het begin voor ons. We hebben vooral gefocust in het begin dat alles logisch is en dat we daarna makkelijk het mooi visueel kunnen weergeven. De fundamentels van onze site waren door Jalal gemaakt en de rest door mij en Maike aangevuld. Zenit was weer onze topper met grafisch ontwerpen.

image


  1. Dit was onze laatste beta versie
Schermafbeelding 2022-09-22 om 15 34 56


.container {
Dit hebben we gebruikt voor de scrollbar 
@media only screen and (max-width: 600px){
Maximum wijdte is dan 600px zodat het mooi te zien is op de browser.
  1. Op onderstaande afbeelding is de definitieve versie te zien op de browser.

image



  • Uiteindelijk heeft Maika een responsive design gemaakt met een breakpoint (width: 600px) die werkt op zowel desktop als op mobiel. In dit voorbeeld is de iPhone SE gebruikt met een dimensie van 375 x 667. Daarbij is er een verticale scroll toegevoegd in plaats van de horizontale.

image

5.Integreren

We hebben alle aanpassingen van de website geïntegreerd naar Github. Met behulp van commits hebben we die gepushed naar de main branch om alle veranderingen door te voeren. Nadat de code klaar was, hebben we de link van de site getest met Github pages en die werkte zoals behoren.

6.Testen

In de testfase van ons project hebben wij telkens bij elke verandering gecontroleerd of het werkte zoals verwacht. Wij hebben dit gedaan met behulp van een live preview en mede door feedback van teamgenoten. Hierdoor kwamen wij er al snel achter dat onze website niet responsive was waardoor hij niet op verschillende schermen werkte maar nu wel. Zoals te zien bij de HTML breakdownschets hadden we besloten om gebruik te maken van divs om de afbeeldingen weer te geven, maar na de les HTML semantiek had Jalal dit weer aangepast om gebruik te maken van unordered lists.