uitwerken voor kick-off werkgroep
Evi Wammes
Zwart (denk ik)
Responsive
uitwerken voor kick-off werkgroep
Discord Home
hier de naam van de pagina
Discord Nitro
uitwerken na afloop 3e werkgroep
uitwerken voor 1e voortgang
Ik was in deze week nog vooral bezig met header en de eerste sectie, omdat we toen echt begonnen aan de website zelf.
Mijn focus lag nog vooral op het responsive krijgen van de header op mobiel, en dit was ook een van de eerste keren dat ik met grid ging werken. Dit was ook even experimenteren.
samen met je groepje opstellen
1: Hoe afbeelding in een bepaalde situatie positioneren 2: Footer met grid of flex 3: Heb ik de hamburgermenu Semantisch?
hier na afloop snel de uitkomsten van de meeting vastleggen 1: In sommige situaties mag ook gewoon gebruik worden gemaakt van absolute, wat regelmatig wordt gebruikt op de website van discord. 2: In mijn geval is de Grid het handigst voor het positioneren van bepaalde menu's 3: Ja, dit was goed gegaan.
uitwerken voor 2e voortgang
In deze week was ik ziek, maar ik heb wel thuis gewerkt aan de website. Ik ben vooral verder gegaan met de home pagina, en de secties responsive naast elkaar te krijgen. Zodat de grid ook verandrd op mobiel.
### Agenda voor meeting
samen met je groepje opstellen
1: Is de code hoe ik het nu heb semantisch voor responsivex
hier na afloop snel de uitkomsten van de meeting vastleggen
- Ja dit leek goed te gaan
uitwerken voor 3e voortgang
Ik heb vooral gefocust op mijn footer, ik loop nog wel wat achter voor mijn Nitro pagina. Hier moet ik verder aan werken.
Het menu op mobiel is ook nog niet compleet, hier ben ik ook druk mee bezig.
Ben ook nog kleine problemen aan het verhelpen die zich voordoen op mobiel
1: Op de Nitro pagina loop ik er nog tegen aan hoe ik de video achter de header krijg
hier na afloop snel de uitkomsten van de meeting vastleggen
- Heb een oplossing gevonden met een css selector has()
uitwerken voor eindgesprek
### Dit ging goed/Heb ik geleerd:
- Ik heb nu geleerd hoe ik betere semantische code kan schrijven
- Hoe ik moet werken met een grid
- Hoe ik sections een fade in effect kan geven
- Hoe ik een groot prijstabel kan maken, waarbij er een border zit met plaatje om een hele kolom
- Hoe ik een FAQ maak met enkel CSS (oke, wel javascript om van tabs te wisselen, maar dit was nodig )
- Bepaalde CSS Selectors zoals has()
- Op de Discord website wordt er op een rare manier gebruik gemaakt van font-sizes, op elke pagina verschilt de grootte, en is niet consistent een aantal pixels voor bijvoorbeeld h2's. Waardoor ik nu meerdere variabelen heb, dat kan zorgen voor verwarring / slechter overzicht.
- Ik heb een bug, als je op de eerste sectie klikt, flitst deze. Dit lijkt te komen door mijn javascript code, alleen kan ik de oorzaak er nog niet van achterhalen.
- Het was regelmatig wel lastig om een grid goed werkent te krijgen hoe ik het precies wou. Vooral omdat ik even moest uitzoeken hoe je rows automatisch laat aanpassen aan de hoogte van het element bijvoorbeeld. Dit is volgens mij nu wel goed gelukt.
Bronnen
- https://developer.mozilla.org/en-US/
- ChatGPT voor een stukje javascript met de observer, zodat sections bij het scrollen een fade in effect krijgen. Hierbij had ik hulp nodig.
- https://developer.mozilla.org/en-US/docs/Web/CSS/:has 4: https://developer.mozilla.org/en-US/docs/Web/CSS/:not 5: https://developer.mozilla.org/en-US/docs/Web/CSS/grid 6: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver 7: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary 8: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table