Markdown is een simpele manier om HTML te schrijven.
Markdown cheat cheet: Hulp bij het schrijven van Markdown.
Nb. De standaardstructuur en de spartaanse opmaak van de README.md zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.
Nb. Door open toe te voegen aan een details element kun je deze standaard open zetten. Fijn om dat steeds voor de relevante stuk(ken) te doen.
uitwerken voor kick-off werkgroep
Lars van Veldhuizen
Rood
Responsive
uitwerken voor kick-off werkgroep
uitwerken na test in 1e werkgroep
Lijst met je bevindingen die in de test naar voren kwamen:
- De site is redelijk simpel gehouden waardoor het voor iemand met concentratieproblemen goed te doen is.
- Screen reader is goed maar skipt alle afbeeldingen
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen)
- Een var aan de afbeelding toevoegen
Hier korte omschrijving (met indien nodig afbeeldingen)
- Site werkt goed door er doorheen te tabben.
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen)
- Er is weinig content ten opzichte van ruimte daardoor staat alles heel erg uit elkaar. Voor iemand met Parkinson duurt het dan erg lang voordat hij door de site heen is.
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen) Minder content per pagina of een navigatie onder de header om sneller naar de secties te gaan.
-
Leesbaarheid is goed op de links na, contrast slecht bij links.
-
Sommige plaatjes kunnen misschien wat groter/duidelijker.
-
Tekst in invulvelden en invulvelden is laag en niet leesbaarheid genoeg.
-
NL in de header niet leesbaar en te dicht op de andere links
-
Onze hardlopers, is het contrast van de vlakken met de achtergrond te laag
-
Disabled button
-
De hover van buttons is af en toe niet goed zichtbaar
-
disabled button niet goed zichtbaar
-
Protanopia: Links niet goed zichtbaar ten opzichte van de achterkant
-
Achromatopsia: Buttons niet herkenbaar en links ook niet en taal instellen
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen) Contrast vergroten, meer verschil in hover/focus/active states
uitwerken voor 1e voortgang
Ik had nog niet echt last van moeilijkheden qua coderen, de html had ik goed gestructureerd. Wel had ik nog wat problemen met het linken van mijn achtergrondafbeeldingen. Ook vind ik het nog lastig om mijn css goed te structureren.
samen met je groepje opstellen
| student 1 | student 2 | student 3 | student 4 |
|---|---|---|---|
| - Hoe kan ik het beste mijn css structureren? | en dit | en ik dit | en dan ik dat |
| - background-image werkt niet, waar ligt dat aan? | dit als er tijd is | nog een punt | dit wil ik zeker |
| - Is het gebruikelijk om af te wisselen in display grid en flex? | ... | ... | ... |
hier na afloop snel de uitkomsten van de meeting vastleggen
- Je kan gebruik maken van een hulplijst van Sanne
- Image niet goed gelinkt
uitwerken voor 2e voortgang
De menu was wat lastiger om te maken maar met een beetje ondersteuning van Sanne ging het uiteindelijk wel. Ook ben ik begonnen met de productensectie maar de buttons bleven uitsteken.
samen met je groepje opstellen
| Lars | student 2 | student 3 | student 4 |
|---|---|---|---|
| - Hoe kan ik het beste mijn links uitlijnen ten opzichte van? | en dit | en ik dit | en dan ik dat |
| - De icons kan ik het beste met noun project worden gelinkt toch? | dit als er tijd is | nog een punt | dit wil ik zeker |
| - Hoe kan ik het beste de uitklapmenu's opbouwen | ... | ... | ... |
| - Hoe komt texels beleving recht onder elkaar als het scherm kleiner wordt? | ... | ... | ... |
hier na afloop snel de uitkomsten van de meeting vastleggen
- opschrijven waar je hulp bij gehad hebt als bronnen
- bronnenlijst toevoegen
- image naar img veranderen
- images alt tekst geven
- let op dubbele css
uitwerken na test in 8e werkgroep
Lijst met je bevindingen die in de test naar voren kwamen (geef ook aan wat er verbeterd is):
- Het responsive maken van de header waardoor er geen woorden meer wegvallen
- active states toegevoegt aan de buttons en a's.
- Ook de focus states zijn verbeterd waardoor ze beter zichtbaar zijn.
Hier korte omschrijving (met indien nodig afbeeldingen) De screenreader werkt goed.
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen) Er kan worden genavigeerd door verschillende elementen, maar ook headers etc.. Door semantisch coderen
Hier korte omschrijving (met indien nodig afbeeldingen) Ook door de site tabben gaat goed.
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen) Semantisch coderen
Hier korte omschrijving (met indien nodig afbeeldingen) Het is een redelijk overzichtelijke en simpele site waardoor hier weinig voor aangepast hoefte te worden.
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen) De site is voor dit stuk voornamelijk hetzelfde gehouden alleen is de pagina ingekort.
Hier korte omschrijving (met indien nodig afbeeldingen) Alle kleuren zijn zodanig aangepast zodat alles goed leesbaar is.
Hier een omschrijving van hoe het opgelost kan worden (met indien nodig afbeeldingen) Dit onder andere door middel van duidelijke :focus, :hover, :active states
uitwerken voor 3e voortgang
hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)
Het coderen in zijn algemeen ging eigenlijk wel goed, soms vergeet ik alleen te beginnen met het ontwerp in het klein.
Ook moet ik het nog beter leren begrijpen, qua media query. Ook twijfel ik af en toe of ik wel een div mag gebruiken.
Bij het maken van het formulier ben ik ook nog tegen een aantal dingen aangelopen.
samen met je groepje opstellen
| LARS | BRYAN | ZENNAY | student 4 |
|---|---|---|---|
| - Hoe krijg ik een andere kleur outline geven | - kan ik 2 style sheet gebruiken of moet ik meteen 3 gebruiken? | - Hoe kan ik mijn site responsive maken en de portfolio blokken naast elkaar zetten als het scherm groter word | |
| en dan ik dat | |||
| - Hoe kan ik het beste de tekst na het aanvink vakje plaatsen | - ziet mijn html en css code er to nu toe er goed uit? | - Hoe krijg ik een streepje achter mijn tekst zoals eerst. | dit wil ik zeker |
| - Hoe krijg ik het voor elkaar om een button disabled te maken en vervolgens, abled te maken als er op de aanvinkinput wordt geklikt? | - hoe verandere ik de kleur van de svg bestand in css | - Hoe krijg ik mijn svg logo mooi in het scherm. | ... |
hier na afloop snel de uitkomsten van de meeting vastleggen
- maak gebruik van een border
- geen hr's dat is vieze code maak gebruik van :after of border-bottom
- button op disabled zetten en vervolgens via javascript de functie te maken dat als de checkbox wordt aangevinkt, dat dan de button enabled wordt.
uitwerken voor eindgesprek
Ik heb vooral geleerd om een website responsive te maken, nou was dit ook de keuze voor mijn opdracht. Het gaat nu meer uit mijn hoofd dan dat ik telkens moet kijken wat er ook elkaar moet staan. Ik weet meer termen uit mijn hoofd, weet goed antwoord te geven op vragen over de code en weet fouten vaak sneller en zelf op te lossen. Daarnaast als iemand met een oplossing komt voor een probleem, begrijp ik zelf ook gelijk wat oplossing inhoudt.
Kleine dingetjes/slordigheden zoals:
- De play button op de homepagina met de bijbehorende popup video.
- Focus state bij bepaalde stukken niet te zien door dezelfde achtergrond.
Maar wat ik vooral lastig vond, maar wel gelukt is waren:
- De responsive header plus uitschuifmenu
- :after styling voor de secties
- en dingen op de juiste positie zetten
continu bijhouden terwijl je werkt
Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg).
-
Bron Header positie wijziging(Sanne): het sticky maken van de header dan de nav fixed aan de onderkant als een uitklapmenu en wanneer het scherm 75em of groter wordt, wordt de nav position relative waardoor de nav op de plek van de header komt te staan.
-
Bron Header uitklapmenu(Sanne): het uit het beeld houden van de ul wanneer het scherm kleiner is dan 75 em, wanneer deze opengeklikt wordt gaat komt het in het scherm door middel van transform: translateY: 0;. Als het scherm groter wordt gemaakt dan 75em terwijl het menu open is schiet hij ook weer terug naar translateY: 100%; zodat hij weer buiten beeld gaat.