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
Hilal Tapan
Blauw
Weet ik nog niet
uitwerken voor kick-off werkgroep
hier de naam van de pagina
<!---- me images doen het niet in readme, wel in me andere bestand>
hier de naam van de pagina
uitwerken na afloop 2e werkgroep
uitwerken voor 1e voortgang
Moest even inkomen, maar dit gebeurde al snel. Ik begon met de HTML en kreeg het al gauw onder de knie, ondanks geen ervaring. Het hielp dat er wat voorbeelden beschikbaar waren, dit hielp me enorm met me eigen code schrijven. Ook heb ik gebruik gemaakt van het internet.
samen met je groepje opstellen
| student 1 | student 2 | student 3 | student Hilal | Niels Jonna | --- | --- | --- | --- | | dit bespreken | en dit | en ik dit | en dan ik dat | | en dat ook nog | dit als er tijd is | nog een punt | dit wil ik zeker | | ... | ... | ... | ... |
Kreeg als feedback dat ik goed op weg was en dat ze verrast waren dat ik al een goede start had, doordat ik natuurlijk nog weinig kennis had. Dit vonden ze goed.
- Ik had moeite met de a'tjes en waarom deze niet werkte
- Of ik me achtergrond images in de css moest doen of html, ik heb ze uiteindelijk in de html gelaten na aanraden maar kreeg wel te horen dat het beide mogelijk is.
- Ik wou een a'tje verwerken in een p, wist niet hoe. kreeg als antwoord dat dit gewoon in de p zelf kan en het lukte ook gelijk.
- Ik had wat A'tjes die ik naast elkaar wou, kreeg te horen dat dit met flexbox goed kon.
uitwerken voor 2e voortgang
Ik ben inmiddels begonnen aan de Css en Javascript van de eerste pagina. Op dit moment loop ik vast met het hamburger menu, hij doet het namelijk niet en ik heb geen idee waarom. Ook weet ik niet zo goed hoe ik de kopjes binnen het hamburger menu krijg. Daarnaast krijg ik me afbeeldingen niet als achtergrond gepositioneerd binnen de css. Heb veel online gezocht, maar niks werkt helaas. Daarnaast heb ik twee A'tjes naast elkaar gezet met flexbox alleen wil ze iets dichterbij elkaar, het lukt met niet om dit voor elkaar te krijgen. Verder gaat het prima, doordat ik veel bezig was met deze problemen te proberem oplossen wat tijd verloren en iets minder ver dan ik had willen zijn.
samen met je groepje opstellen
| student 1 | student 2 | student 3 | student 4 |
|---|---|---|---|
| dit bespreken | en dit | en ik dit | en dan ik dat |
| en dat ook nog | dit als er tijd is | nog een punt | dit wil ik zeker |
| ... | ... | ... | ... |
hier na afloop snel de uitkomsten van de meeting vastleggen
Het hamburgermenu doet het inmiddels, ik had het niet gelinkt aan de css waardoor het niet werkte. Ik heb inmiddels ook de kopjes binnen het hamburger menu gekregen en begrijp het ook. De apple site gebruikt een aantal png afbeeldingen en een aantal jpegs, waardoor ik een variatie aan mogelijkheden heb binnen het positioneren. Het positioneren is gelukt en heb verschillende manieren gebruikt, passend bij het afbeeldingstype. De a'tjes dichterbij elkaar positioneren ben ik nog steeds niet uit, maar ik laat het heel even tot eind detail omdat het er enigzins wel oke uitziet en ik de tijd niet heb om nog langer online te zoeken hiernaar, om het perfect te centreren.
uitwerken na test in 8e voortgang
Lijst met je bevindingen die in de test naar voren kwamen:
- Voiceover: alles werkte goed, img alleen toegankelijkere alt namen geven.
- Toetsenbord: alles werkte, als extra eventueel focus en hover state toevoegen aan de a'tjes.
- Diverse beperkingen: hier niks aan toe te voegen.
Bij de voiceover werkte alles goed. Het enige wat minder toegankelijk was dat mijn img's alt's hebben die alleen ik begrijp. Dit kan onduidelijk zijn voor andere die gebruik maken van de voiceover.
Ik zou dit kunnen oplossen door de alt's een andere beschrijving te geven die beter passen bij de img, waardoor de gebruiker ook snapt waar het over gaat.
Alles werkte goed, de links waren te volgen en alles was toegankelijk. Ik zou nog als extra een hover en focus state kunnen toevoegen aan de a'tjes, dit had ik nog niet toegevoegd.
Hier was alles eigenlijk erg goed, niks op aan te vullen.
uitwerken voor 3e voortgang
hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)
samen met je groepje opstellen
| student 1 | student 2 | student 3 | student 4 |
|---|---|---|---|
| dit bespreken | en dit | en ik dit | en dan ik dat |
| en dat ook nog | dit als er tijd is | nog een punt | dit wil ik zeker |
| ... | ... | ... | ... |
hier na afloop snel de uitkomsten van de meeting vastleggen
- punt 1
- punt 2
- nog een punt
- ...
uitwerken voor eindgesprek
hier dit ging goed & dit was lastig (neem ook screenshots op van delen van je website en code)
hier screenshot(s) van je eindresultaat
continu bijhouden terwijl je werkt
Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg).
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://wtf.tw/ref/duckett.pdf
- https://dlo.mijnhva.nl/d2l/le/content/324289/Home
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
- http://web-accessibility.carnegiemuseums.org/code/search/
- https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Responsive_navigation_patterns
- https://www.w3schools.com/css/css_rwd_images.asp
- https://fonts.google.com
- https://extract.pics/
- https://www.apple.com/nl/
- https://codepen.io/shooft/pen/bGoNMpP?editors=0100
- https://codepen.io/Yunusemre18/pen/GREVqqM?editors=1100
- https://www.w3schools.com/css/css_positioning.asp
- https://codepen.io/deannabosschert/pen/qBrjrqw?editors=0100
- https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure