SAFA HASSAN
GET IN TOUCH

DEVELOPMENT

>
Interactive Iterative design Professional standard Personal leadership Project x

PORTFOLIO WEBSITE

Voorwoord

Voor mijn portfolio heb ik een website ontwikkeld met HTML, CSS en JavaScript. Dit project bood me de kans om te oefenen met front-end ontwikkeling, het schrijven van code en documentatie binnen een versiebeheeromgeving.

Gebruik van html en css

Het gebruik van HTML en CSS verliep over het algemeen soepel voor mij. Daarnaast heb ik geoefend met het positioneren van HTML-elementen met behulp van CSS. Met de flexbox-techniek kon ik elementen op mijn webpagina's precies plaatsen zoals ik wilde. Het gebruik van de display: flex eigenschap zorgde ervoor dat elementen (zoals de linker div, de navigatiebalk en de rechter div) efficiënt werden gepositioneerd met Flexbox

Op basis van feedback heb ik aandacht besteed aan de benamingen en opmaak van mijn code. Ik heb ervoor gezorgd dat alle elementen duidelijke benamingen kregen en al mijn foto's en afbeeldingen netjes in mappen georganiseerd. Daarnaast heb ik gebruik gemaakt van sections om de structuur van mijn HTML-documenten te verbeteren.

Gebruik van JavaScript (Dropdown Menu)

Ik heb helemaal geen ervaring in javascript, dit was voor mij dus een uitdaging. Naar aanleiding van een gebruikerstest heb ik een dropdown-menu toegevoegd aan mijn leeruitkomsten, waarvoor ik JavaScript heb gebruikt. Het was mij gelukt om een dropdown-menu te maken, hoewel ik een aantal conflicten tegemoet kwam. In eerste instantie had ik het menu zo ingesteld dat het naar beneden verscheen wanneer ik met de muis over de titel zweefde. Dit leidde echter tot het probleem dat het menu verdween zodra ik de muis verwijderde. Daarom heb ik ervoor gekozen om het menu te activeren door erop te klikken, zodat het zichtbaar blijft.

Ik heb dit aangepast na feedback van een medestudent. Zij merkte op dat het dropdown-menu een goed idee is, maar dat het niet intuïtief was om op de titel te klikken om het menu te openen. Op basis van deze feedback heb ik een pijltje naast de titel geplaatst als indicator, zodat gebruikers weten dat ze op de titel kunnen klikken om het dropdown-menu te openen.

Ik heb een JavaScript-functie geschreven die wacht tot de DOM volledig is geladen en daarna een klikbare dropdown creëert. Wanneer er op de pijl van de dropdown wordt geklikt, wordt de dropdown-inhoud getoond of verborgen en wordt de pijl geroteerd. De dropdown sluit automatisch als er buiten de dropdown wordt geklikt. Dit is te vinden opgit.

Door feedback van dennis heb ik weederom ervoor gezorg dat je alsnog over het dropdown menu kunt hoveren omdat het nog steeds niet zo zichtbaar was dat er op het pijltje klikt moet worden. Ik heb ervoor gezorg dat het dropdown menu ook blijft en niet zomaar verdwijnt. Daarnaast gaf dennis de opmerking dat je alleen op het pijltje kon klikken en niet op de titel zelf dus dat heb ik ook nog aangepast.

Deze nieuwe JavaScript-code zorgt ervoor dat een dropdown-menu wordt getoond en verborgen op basis van hover- en klikgebeurtenissen. Gebruikers kunnen de dropdown activeren door over de pijl of de paginatitel te hoveren. De dropdown blijft zichtbaar zolang de muis zich binnen de dropdown of het geactiveerde element bevindt. Klikken buiten de dropdown sluit deze weer. Dit verbetert de gebruikerservaring door een intuïtieve bediening van de dropdown-menu's mogelijk te maken op verschillende interactiepunten op de pagina. Dit is te vinden opgit.

Met deze JavaScript-code heb ik geleerd hoe je dropdown-menu's interactief maakt door te reageren op gebruikersacties zoals hoveren en klikken. Je hebt DOM-manipulatie gebruikt om elementen te selecteren en hun weergave dynamisch te wijzigen, event listeners toegepast om te reageren op gebruikersinteracties, timeouts gebruikt om vertragingen in te bouwen voor een betere gebruikerservaring, en conditional logic gebruikt om fouten te voorkomen. Dit geeft mij een praktische basis in het verbeteren van de interactie en functionaliteit van webpagina's met JavaScript.

Version control

Ik heb gebruikgemaakt van Git voor versiebeheer in mijn projecten. Ik had hierbij nog geen ervaring, maar de workshop van Maikel was zeer behulpzaam. Dankzij deze workshop kon ik een Git-repository openen voor mijn portfolio. Hierbij heb ik branches aangemaakt, commits gemaakt en merge conflicten opgelost om code-integratie soepel te laten verlopen. Daarnaast heb ik via GitHub samengewerkt met anderen aan het opdrachtovp websiteproject, waarbij ik mijn code heb gedeeld en waardevolle feedback heb ontvangen van medestudenten. Deze ervaringen hebben mijn begrip van versiebeheer en samenwerking in softwareontwikkeling aanzienlijk verbeterd.

Ik heb code-comments aan mijn code gezet omdat ze helpen om de functionaliteit en logica van mijn code te verduidelijken. Dit is belangrijk omdat het niet alleen anderen helpt om mijn code beter te begrijpen, maar ook mijzelf wanneer ik op een later moment terugkeer naar de code. Daarnaast heb ik ook een README-bestand gemaakt om gebruikers te voorzien van een handleiding voor de installatie en het gebruik van mijn code.

OVP website

Voorwoord

Voor deze opdracht kregen wij in een groepje de taak om de Fontys website te herontwerpen. Het doel was om meer studenten aan te trekken en hen langer op de website te laten blijven.

Version control

Ik heb geen moeite gehad met html css, het was wel vrij makkelijk om het te coderen. Ik heb zelf ook geen Java script gebruikt.

We begonnen met het opzetten van een groepsproject op GitLab om samen aan een project te werken. Aangezien we allemaal nieuw waren met het werken in een gedeeld Git-project, liepen we tegen enkele uitdagingen aan. Een belangrijk probleem was dat we geen aparte branches hadden gemaakt, waardoor we allemaal gelijktijdig aan de hoofdversie werkten. Dit leidde tot verwarring en per ongeluk overschreven we elkaars werk. Ook gebruikten we niet de terminal om wijzigingen op te slaan, wat eigenlijk efficiënter zou zijn geweest.

Gelukkig realiseerden we ons snel wat er misging en na uitleg begonnen we allemaal onze eigen branches te gebruiken. Dit stelde ons in staat om veiliger samen te werken zonder elkaars werk te verstoren. Ik heb veel geleerd over het gebruik van Git tijdens samenwerking, zoals bestanden ophalen (pullen), versturen (pushen) en wijzigingen opslaan via de terminal. Dit heeft onze samenwerking aanzienlijk verbeterd en ons effectiever gemaakt.

Onze eerste ervaring met Git voor samenwerking verliep eerder moeizaam omdat niemand van ons precies wist hoe het moest. Gelukkig hebben we samen de problemen aangepakt en heb ik ook hulp gekregen van Maikel, wat heeft bijgedragen aan een soepeler verloop van de samenwerking.

Van deze ervaring heb ik waardevolle lessen geleerd. Ik heb geleerd hoe ik Git effectief kan gebruiken voor teamwerk, met name door het gebruik van branches om mijn werk geïsoleerd en veilig op te slaan. Dit hielp om communicatie en coördinatie binnen het team te verbeteren, nadat we aanvankelijk problemen hadden met het overschrijven van elkaars werk. Door te werken met Git via de terminal heb ik mijn technische vaardigheden verbeterd en geleerd hoe belangrijk probleemoplossing en samenwerking zijn bij projecten.