5 September 2023 - 14 September 2023
1. Trees for all veelgestelde pagina nabouwen
Prototypen en uitwerken
Ga naar het
prototype
Ga naar het
prototype
Inleiding
Als Frontend Stagiair ben ik aan de slag gegaan met het nabouwen van een webpagina. Mijn eerste stageopdracht was het pixel-perfect repliceren van een FAQ-pagina met behulp van HTML en CSS. Bij deze opdracht heb ik rekening gehouden met verschillende HTML-standaarden, de structuur van de pagina, en aandachtspunten die relevant zijn voor een Frontend Developer. In dit verslag zal ik beschrijven hoe ik deze opdracht heb aangepakt, de ontvangen feedback en de iteraties die ik heb doorgevoerd. Tot slot zal ik een algemene conclusie geven over wat ik heb geleerd tijdens deze opdracht.
Beschrijving opdracht
Voordat ik kon beginnen met het opdracht, heb ik een docs document gekregen met alle informatie over de opdracht. In het documenten heb ik een Figma bestand gekregen waar ik de ontwerp kon bestuderen. Het ontwerp heeft me goed geholpen om de pagina te bouwen. In de Figma bestand had je bijna alles die je nodig heb bijvoorbeeld de padding, de ruimte tussen elementen de grootte van de elementen en kleur. Ik heb ook in de google docs gedetailleerde details gekregen die je niet kon uithalen van het ontwerp. Hieronder kun je het zien:
Doel van de opdracht
Het doel van de opdracht om de frontend developer mijn vaardigheden te kijken en beoordelen. Het is ook om mij aan te leren nauwkeurig te werken en kwaliteit te leveren.
Prototype versie 1
HTML structuur en Vanilla CSS
Het eerst wat ik heb gedaan is het opstellen van de HTML structuur. Ik heb gewoon eerst gedaan zoals ik heb geleerd bij CMD project tech en de Minor Web. Dus ik heb de HTMl structuur gemaakt voor de Hero en de content. Hiernaast kun je een beetje zien hoe de HTML structuur heb samengesteld. Hiervoor heb ik nieuwe text editor gebruikt i.p.v Visual Studio Code. Deze keer heb ik PHPstorm gebruikt. PHPstorm is een betaalde code editor van Jetbrains maar er is een gratis student licentie. De reden waarom ik deze code editor heb gebruikt is omdat de team ook deze gebruikt en ik vond het wel leuk om te leren.
Daarna ging ik aan de slag met de css, alweer ik heb nog steeds niks nieuws geleerd, ik heb alleen mijn kennis van CMD gebruikt. En uiteindelijk binnen een week was ik klaar met de opdracht dacht ik. Hieronder kun je de eerste versie van de opdracht zien.
Ik heb alles in een zip bestand gestuurd naar de stagebegeleider, maar hij was op dat moment niet beschikbaar dus Niels de backend developer heeft mij stageopdracht beoordeeld. Ik wilde al een beetje huilen, want na de beoordeling heb ik twee pagina's vol met feedback met dingen die ik moest aanpassen. Ik dacht wauw je moet met zoveel rekening houden. Dus om de feedback te bespreken zij ik en Niels hebben we een online vergadering gepland. Om bij alle aandachtspunten te doorlopen. In een de volgende onderdeel ga ik meer details schrijven over de feedback
Feedback en iteratie 1
Zoals ik eerder heb verteld. Het opdracht was beoordeeld, en ik een lijst feedback gekregen aan dingen die ik over had gedacht. De feedback ging meestal over dingen die je moet rekening houden als frontend developer. Bijvoorbeeld verhouding grootte, klikbare gebieden, font-spacing, responsive design, uitlijning enzovoorts.
Vormgeving
Het feedback is verdeel in drie onderwerpen, de vormgeving, HTML en CSS. Bij vormgeving werd gekeken of de pagina overeenkomen met het ontwerp in Figma. Er werd gekeken naar de ruimte tussen de layout elementen, uitlijning de juiste padding, de correcte kleuren. Wat ik uitdagend vond bij vormgeving is de uitlijning van iconen perfect te maken. Maar uiteindelijk is met toch gelukt. Wat me op viel is de oog op detail dat de programmeurs hadden, en dacht voor mezelf ik wil ook zo gedetailleerd worden.
HTML structuur
Daarna heb ik feedback gekregen over de html structuur. In het algemeen heb ik een goede html structuur. Ik heb genoeg kennis over HTML elementen. Maar er waren nog wat details die ik nog mist. Ik heb daarbij ook handige tips die ik heb gekregen die ik voor volgende keer moet gebruiken is:
- Attribuut width en height toevoegen bij de img tag
- Class schrijven om te hergebruiken
- Gebruik geen background-img als je een afbeelding als achtergrond wilt
- Schrijf code in het Engels en de taal van de website kan Nederlands blijven, classes, functienamen moeten gewoon in het engels
- Gebruik identaties van vier in plaats van 2
Iteraties HTML structuur
Hier is de nieuwe versie van de HTML structuur.
Hier is de nieuwe versie van de HTML structuur. Er is nu meer spaties daarbij gekomen om het wat leesbaar te maken voor andere programmeurs. Ik heb hier gebruikt van nieuwe HTML elementen, details en summary. Ook heb ik gebruikt gemaakt van class wat is afgeraden bij CMD.
Iteratie 2: Klikbare buttons of links
Een feedback punt die ik heel belangrijk vond is dat ik altijd moet ervoor zorgen dat links, knoppen altijd een breder klikbare gebied hebben. het is vooral belangrijk voor mensen die goed kan werken met een muis. Met als de element een groot genoeg area hebben heb je meer plekken om te klikken en hoeft niet precies te zijn op de tekst, of plusje etc. Om dit te bereiken kun je de altijd de a tag of buttons een padding geven en de breedte van de element 100% maken.
CSS code voor de opklapbaar link
details {
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem 4rem 1rem 1rem;
border-bottom: 1px solid var(--border-bottom-color);
position: relative;
}
details summary {
padding: 2rem;
font-family: var(--fonts-for-headings);
font-size: 2.1rem;
width: 100%;
list-style: none;
cursor: pointer;
}
details[open] summary:before {
content: "-";
}
details summary:before {
content: "+";
position: absolute;
right: 0;
}
details p {
font-family: var(--fonts-for-paragraph);
font-size: 1.8rem;
margin: 1rem 0 0 0;
padding: 0 3rem 3rem 3rem;
}
Wat heb ik geleerd?
Uiteindelijk heb ik geleerd hoe belangrijk het is om altijd aandacht te besteden aan details en trouw te blijven aan het ontwerp. Deze tip bleek bijzonder nuttig bij het werken aan websites voor klanten, waar nauwkeurigheid essentieel is. Tijdens deze opdracht ontdekte ik dat het gebruik van classes in CSS een goede praktijk is om structuur te behouden. Het is sowieso altijd handig om bekend te zijn met CSS-selectoren. Verder heb ik geleerd hoe ik efficiënt met de nieuwe PHPStorm-omgeving kan werken, en tot slot heb ik ervaring opgedaan in het ontvangen en verwerken van feedback.
Deze activiteit bood me de gelegenheid om de competenties 'prototypen' en 'uitwerken' te behalen, aangezien ik hier aan de slag kon gaan met het maken van een prototype op basis van een bestaand ontwerp. Daarnaast leerde ik welke eisen ik moet vervullen binnen het development team.