Auteur: -Sofya Gerges-
Markdown cheat cheet: Hulp bij het schrijven van Markdown. Nb. de standaardstructuur en de spartaanse opmaak zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.
- De tussentijdse updates heb ik zelf toegevoegd omdat ik eerst dacht dat je zelf een procesboek per week moest bijhouden, dus ik heb de andere weken hierin gezet, omdat dit het echte procesverslag is.
-dit ging goed & dit was lastig- Ik heb veel gedaan, de laatste puntjes op de i gezet maar het ging wat moeilijker dan verwacht. Aangezien ik ook een srp heb gedaan, heb ik heel erg gecombineerd tussen FED en de srp.
Ik had moeite om de de images in en uit te laten zoomen bij een hover, op het internet stonden veel verschillende methodes maar die vond ik vaakk veels te moeilijk of onduidelijk. Uiteindelijk is het mij wel gelukt door css te gebruiken die ik al kende namelijk de transform en transition functie.
Ik heb 2 css bestanden en ik wist aan het begin niet dat dit er maar 1 hoort te zijn, ik heb meerdere keren geprobeerd om het in een css te stoppen maar aangezien ik al zo ver in het proces was stond alles enorm door elkaar. Als ik de volgende keer aan het begin weet dat ik en css moet maken kan ik daar beter rekenen mee houden omdat ik dan beiden pagina's tijdig kan aanpassen. In principe is de stof hetzelfde maar dan in een bestand.
Iets wat ik ook heb geleerd in css is dat soms de volgorde van de code ervoor zorgt dat andere code niet werkt. Mijn footer reageerde namelijk eerst niet op mijn display: grid en ik kreeg hier een aantal dagen enorme stress van, en uiteindelijk was de oplossing simpel. In de inspector ston de footer op display:block; en door de volgorde van de code te veranderen nam hij display:grid; wel over. Dus dat was best leerzaam om te weten. Vooral als het duidelijk is dat je geen verkeerde code gebruikt.
Ik merk dat bij de milka geschiedenis pagina de h3 en startknop soms anders gaan staan, maar daarna gaan ze weer staan zoals ze horen zonder dat ik iets in de code verander. Ik heb het ook buiten de livepreview getest, dus ik neem aan dat ze goed staan.
Dit was zeker een rollercoaster!
Screenshot(s):
-screenshot(s) van je eindresultaat-
-screenshot(s) van hoe ver je bent (tweede pagina)-
De start knop in deze screenshit staat niet op de plek waar hij echt staat, hieronder nog een apart screenshot van dezelfde pagina >
-dit ging goed & dit was lastig-
In week 6 heb ik iets minder aan mijn website gewerkt, bezig met anderen vakken maar na het vorige voortgangsgesprek had ik een aantal punten die ik zou moeten veranderen, zoals beter kijken naar correcte html. Sections mogen bijvoorbeeld een gebruikt worden met een heading, maar bij articles hoeft dat niet perse omdat een article op zichzelf moet kunnen staan, dat houdt in dat het alleenstaand ook genoeg informatie moet geven.
Ik ga nog een grid in de footer toevoegen en in de index.html de afbeeldingen laten inzoomen als je er met de muis overheen gaat. Ook px veranderen naar em.
-dit ging goed & dit was lastig-
In week 5 heb ik best veel gedaan rondom problemen waar ik tegen aan liep te fixen. Ik heb hulp gevraagd en een aantal problemen waar ik mee zat opgelost. Een van de grootste was over hoe je iets selecteert in je html document via css (zonder gebruik te maken van classes). In de eerste weken had ik namelijk css selectoren gebruikt en toe ik verder ging en elementen toevoegde gingen zij opeens allemaal anderen delen selecteren. Hierdoor raakte mijn layout weer helemaal door de war. Ik was toen best teleurgesteld, na een aantal keren het zelf te proberen en met hulp eruit ben gekomen, kreeg ik opeens weer een motivatieboost en het maakt mij echt heel blij als ik zie dat ik dit heb gemaakt.
Omdat ik niet in de komende weken opeens stress wil ondervinden, ben ik deze week ook al begonnen aan mijn tweede pagina. De eerste pagina is voor zo’n 75% af, ik wil er nog een aantal dingen bij doen. Tot nu gaat het best goed met de tweede pagina, ik zie best veel verschil in hoe ik aan de eerste pagina begon en hoe ik aan de tweede pagina begon. Merk echt heel erg dat ik meer kennis heb, waardoor het mij nu iets makkelijker vanaf gaat. Still not a professional but practise really makes perfect, en het is heel leuk om nu al kleine verschillen te zien! Erg leerzaam dit!
Screenshot(s):
-screenshot(s) van hoe ver je bent (eerste pagina)-
-screenshot(s) van hoe ver je bent (tweede pagina)-
Deze pagina is veel langer dan de screens, maar het is een beetje herhalend, ik hoop dat ik er een leuke draai aan kan geven.
In week 3 hadden we een voortgangsgesprek, een van de punten waar ik een vraag over had was het feit dat mijn nav met flexbox nog steeds niet goed in de center stond. De nav stond automatisch naar rechts. Ik moest zelf uitvogelen wat het was, en na veel proberen heb ik in ‘inspecteren’ gekeken en kwam ik erachter dat er een padding van 40px stond.
Toen heb ik gekeken of die padding handmatig had ingevuld in mij code, maar dat was niet het geval. Ik heb het toen opgelost door ‘padding-left: 0;’ toe te voegen aan mijn ul. Was echt heel blij toen het was gelukt!!!
-dit ging goed & dit was lastig-
Ik heb eigenlijk sinds de eerste week stap voor stap aan mijn website gewerkt. Dus ik loop goed mee in het tempo. Love that!
Wat verder ook goed ging was, ik ben zeker niet proffesioneel met coderen, dit is mijne tweede of derde keer met html/css en ik was eigenlijk best verrast door mijzelf. Ik had niet verwacht dat wat ik tot nu toe heb helemaal zelf heb gedaan. (Natuurlijk met behulp van de middelen op DLO). Geen idee of alles klopt natuurlijk, maar voor het grootste geval is het zeker niet niks.
Wat ik lastig vond was, ik was vorig schooljaar heel erg gewend om veel classes te gebruiken, vorige week kwam ik erachter dat het liever niet, of met goede reden gebruikt mag worden. Ik heb dus zoveel mogelijk van mijn classes verandert in img selectoren en nth-of-type selectoren. Soms was selecteren met nth-of-type makkelijk en soms ook wat lastiger. Ik vraag mij ook af of er bepaalde regels daar om heen zitten, of kan je hiermee alles selecteren wat je maar wilt?
Verder was het en is het voor mij heel erg veel proberen en kijken hoe het resultaat eruit komt. Maar het is echt heel leuk als het lukt!
Screenshot(s):
-screenshot(s) van hoe ver je bent-
Op deze pagina moeten alleen nog mini-aanpassingen gedaan worden.
-samen met je groepje opstellen-
We hebben ervoor gekozen om ieder vragen op te stellen, of onderwerpen waar over het algemeen meer willen weten.
In week 2 heb ik het beginnend html-skelet opgezet van beiden websitepagina’s van Milka. Eerste pagina is de homepagina en de tweede pagina is de geschiedenispagina van Milka. Ook een beetje CSS toevoegd! Ik heb de positioneren en flexbox oefeningen gemaakt, ik heb verder gewerkt aan mijn website. Hierdoor de progressie tot nu toe: Laatste wijzinging was op vrijdag 10 september
Note: Ik had als eerst veel classes in mijn html, ik wist eerst niet dat die eigenlijk niet echt gebruikt mochten worden. Ik vond het lastig omdat ik van vorig jaar al gewend was om classes te gebruiken voor opmaak en dergelijke. Ik heb dus voor mijn gevoel een grote stap gemaakt door de classes zoveel mogelijk weg te halen en de nth-of-type toe te passen. Aardig gelukt, zeker blij mee!
Ik heb de opdracht bekeken, de stappen gevolgd om de starten met github. De intake-opdracht ingevuld en een website gekozen. Ook heb de eerste oefeningen gemaakt van Typografie met codepen.
Na lang nadenken heb ik gekozen voor de website van Milka! Everyone loves chocolate!
Ik heb gekozen voor Milka omdat het best vaak eet, hun signature kleur is mijn favoriete kleur en vindt hun website best speels maar ook doelgericht eruit zien. Ik vond de stijl wel leuk, ookal vind ik clean, natural en white websites ook erg mooi.
Verder heb ik een breakdownschets gemaakt van de homepagina van Milka, een hulpmiddel om een beetje een idee te krijgen welke html-elementen gebruikt kunnen worden.
Je startniveau: -kies uit zwart, rood óf blauw-
Ik kies blauw of rood, Ik ben nog heel erg een beginner met html/css en javascript. Vorige schooljaar was de eerste keer dat ik het beiden voor het eerst heb gebruikt. Weet nu wel iets meer erover maar hoe vaker, hoe makkelijker het wordt. Dus doe het nu ook rustig aan en ik bouw langzaam verder op de kennis die al een beetje heb.
Je focus: -kies uit responsive óf surface plane-
Mijn focus gaat liggen op responsive maken.
Je opdracht: -link naar de website die je gaat namaken óf de naam van je eigen ontwerp-
https://www.milka.nl/over-milka/geschiedenis
Screenshot(s):
Breakdown-schets(en):
![-voorlopige breakdownschets(en) van een of beide pagina's van de site die je gaat maken-]
