• Marshall Website
  • Marshall Website
    • Front End Development

    • HTML, CSS, JavaScript

    • 4 weken

  • Hoe kan ik het beste mijn skills in de Front End Development oefenen? Een website namaken zodat je je geen zorgen hoeft te maken over de content en je je volledig kan focussen op het maken van de code.

  • Marshall Website BreakdownSchets
  • Marshall Website Code
  • Als opdracht vanuit school was de taak gegeven om 2 pagina's van een website naar keuze na te maken. Het origineel niet volledig namaken en wel je eigen draai eraan geven. Dat was een van de eisen waaruit de opdracht bestond. Een andere eis was dat je de gehele pagina's moest coderen met behulp van HTML, CSS en JavaScript.

  • Ik koos voor de website van Marshall. Met het merk Marshall was ik al bekend en de website sprak me qua stijl en content erg aan. Het is een overzichtelijke website waar je veel dingen kan doen. Je kan producten bestellen van Marshall, maar ook blogs lezen en veel leren over het merk. Dingen die me opvielen in de content waren de carrousel met links naar andere pagina's, als een soort menu kon je daar doorheen browsen. Ook dingen waar ik al eerder mee had gewerkt zoals lijstjes en formulieren.

  • Als start begon ik met een breakdown van de originele website. Welke elementen kon ik zelf al eruit halen, en welke elementen waren het belangrijkste voor de opbouw van de pagina's. Aan de hand van screenshots van de site kon ik door de hele pagina ontleden. Ik kwam achter dingen die me in eerste instantie niet eens waren opgevallen. Dat er bijvoorbeeld sprake was van een lijst in een lijst waar dan ook weer een link in stond. Veel details die me hielpen met het begrijpen hoe de site in elkaar zat.

  • Marshall Website Vergelijking
  • Marshall Website Vergelijking
  • Eenmaal dit bereikt kon ik beginnen aan mijn eigen versie. Dit was vooral een kwestie van alle content omzetten in code en nog geen styling verrichten in CSS. Hierdoor kon ik stap voor stap de website opbouwen. Ik kon me vooral focussen op alle content en op welke volgorde ik deze het best kon neerzetten. Hierna was de volgende stap, de stap die het meeste tijd en energie heeft opgenomen. In principe is dit logisch, want in deze fase kan je een website naar je eigen hand zetten. In dit geval had ik veel richtlijnen, wetend dat ik een al bestaande website moest namaken. Ik heb dus veel af kunnen kijken, maar ook veel met verhoudingen en positie gespeeld om de juiste waardes te krijgen, wat erg veel tijd in beslag heeft genomen. Ik had dus niet al te veel vrijheid op vormgevings gebied.

  • Halverwege het proces kwam ik erachter dat de originele Marshall website was veranderd. De menu carrousel was verdwenen, ik kreeg toen de keuze of om door te gaan met de carrousel uit mijn hoofd of de carrousel weg te doen en de website op dat moment na te maken. Ik had toen gekozen om verder te gaan met de carrousel. Een uitdaging klonk wel leuk. In zo'n carrousel komen natuurlijk alle 3 de talen bij elkaar en werken in harmonie samen. De stijl van de site bleef wel hetzelfde, dus ik heb niet extreem veel hoeven veranderen of nieuw te maken.

  • In de afbeeldingen hiernaast kun je de vergelijking zien tussen de originele website van Marshall en mijn uiteindelijke versie, met links de originele en rechts mijn versie.