Procesverslag

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.

Jij

uitwerken voor kick-off werkgroep

Auteur:

Quinten Weimer

Je startniveau:

Blauw

Je focus:

Responsive

Je website

uitwerken voor kick-off werkgroep

Je opdracht:

https://www.nationalgeographic.com/

Screenshot(s) van de eerste pagina (small screen):

Animal Profiles

Screenshot(s) van de tweede pagina (small screen):

Amphibians

Toegankelijkheidstest 1/2 (week 1)

uitwerken na test in 2^e werkgroep

Bevindingen

Lijst met je bevindingen die in de test naar voren kwamen:

Hij springt van h1 naar h5 en daarna komen er bijna alleen meer h2’s ookal is er een duidelijke hierarchie aanwezig in het design. Hij laat de submenu’s van de nav niet zien, je kan ze alleen klikken (werkt nu met hover) Forms snapt hij niet helemaal, video’s vind hij forms Landmarks doen raar. De pagina mist gebruik van elementen waar ze zouden moeten zijn, geen duidelijke uls, articles, etc. veel nikszeggende html.

Uit checklist:

• Buttons en links zijn niet descriptive genoeg
• HTML is niet valid
• Scroll area is soms te klein. Bij de categorien bv
• Headings zijn onlogisch
• List elements worden niet (goed) toegepast
• De pagina heeft images zonder alt
• Geen transcripts beschikbaar
• Links zoals 'animals' is niet herkenbaar als link
• skip link niet gevonden
• Geen dark of HC mode
• Video kan niet worden gepauzeerd als je wegscrollt.
• geen custom ::selection colors
• Geen aria labels

Breakdownschets (week 1)

uitwerken na afloop 3^e werkgroep

Voortgang 1 (week 2)

uitwerken voor 1^e voortgang

Stand van zaken

HTML gaat goed, ik vind het alleen lastig om de CSS selectoren consistent te houden, het word snel een zootje en dan raak ik een beetje kwijt hoe ik alles aanspreek. Verder vind ik werken met images en grote vlakken soms lastig, de layout word snel rommelig.

Agenda voor meeting

Quincy

• Volgorde van HTML
• CSS border van <li>
• …

Beyzanur

• Nav menu
• HTML elementen/tags
• Fonts

Quinten

• Image achter tekst
• List style niet aanpasbaar bij "see more"
• nth-of-type(0) lukt niet altijd
• Elementen omdraaien
• "See more" (about fish) verstoppen
• Link om <h3> heen
• Border color gold werkt niet op <a>
• Button borders krijg ik niet weg op de nav

Ilias

• Algemene feedback op HTML
• Wanneer <list>/<article> te gebruiken
• Wanneer wel/geen <section>

Zakaria Yatim

• Ziek :(

  Verslag van meeting

  hier na afloop snel de uitkomsten van de meeting vastleggen

  • h2 tot h3 niet inspringen, maar een regel skippen.
  • hamburger en home logo niet in li bij de nav. zijn aparte elementen.
  • alt leeglaten bij decoratieve piccas
  • max img width 100% bovenaan
  • display: block, voor img background.
  • a11y , voor hide content. Gebruik span voor (lees meer (over kikkers))
  • Uitgelegd hoe je met grid elementen omdraait en hoe je het plaatje erachter krijgt.

Voortgang 2 (week 3)

uitwerken voor 2^e voortgang

Stand van zaken

Ik loop enorm vast bij positionering en mijn code is heel rommelig nog.

Agenda voor meeting

samen met je groepje opstellen

Quinten

• Image blijft maar een horizontal scroll hebben, overflow werkt niet. De hero is nog niet hoe ik hem wil hebben

• Lukt niet om elementen in mijn section aan te spreken. Lijkt alsof ze niet reageren

  Verslag van meeting

  hier na afloop snel de uitkomsten van de meeting vastleggen

  • Helaas nog niet gelukt om de image goed te krijgen, ik ga hier zelf nog ff mee worstelen of stuur maya berichtje op teams
  • Elke section moet een heading hebben
  • HTML 2e pagina binnenkort maken, helpt ook voor styling.
  • CSS Aanspreeksfoutje opgelost

Toegankelijkheidstest 2/2 (week 4)

uitwerken na test in 9^e werkgroep

Bevindingen

Dit is wat er beter is ten opzichte van de echte pagina:

• De links zijn meer descriptive dmv van aria labels (see more/amphibians is nu bijvoorbeeld geworden: see more about amphibians)
• Mijn HTML en CSS zijn helemaal valid
• Ik heb extra witruimte toegevoed naast interactieve blokken zodat je er niet perongeluk op klikt
• Ik heb een goeie heading structuur, ik skip geen headings. Daarnaast heb ik voor elke sectie een duidelijke heading, de echte pagina niet
• Ik gebruik li/ul tags waar dat moet
• Al mijn images hebben een alt, behalve de decoratieve. Ik kan ze bij de echte pagina niet vinden
• Ik heb zelf een "fictieve" captions knop toegevoegd, bij NatGeo zitten de captions in de video zelf. Werkt ook, maar captions vanuit de site zelf is denk ik beter.
• Mijn links zijn herkenbaarder als links (en ik heb denk ik een duidelijkere hover state)
• Ik gebruik buttons waar dat moet
• Ik heb een dark mode
• Ik heb custom selection colors

Dit doet de echte pagina beter

• Die heeft een skip to main content link, ik niet
• Op de echte pagina zijn de hele artikelen en categorie blokken clickable, misschien had ik dit achteraf ook moeten doen.

Voortgang 3 (week 4)

uitwerken voor 3^e voortgang

Stand van zaken

gaat steeds beter, heb weer een beetje vertrouwen terug gewonnen. Nu gewoon kwestie van aan de bak gaan.

Agenda voor meeting

samen met je groepje opstellen

Quinten

• Hoe krijg ik mooi drie streepjes voor een "see more" of bij een "read" .

• Search icon interactief maken , meer to-do geen vraag

• Github website uploaden lukt niet, index.html verwijderen?

• Krijg nav artikelen niet in het midden

• Ik wil de articles alsnog clickable maken maar niet het element een link maken. Kan ik dit met media query doen?

• Header sticky werkt niet

  Verslag van meeting

  hier na afloop snel de uitkomsten van de meeting vastleggen

  • aria label voor READ
  • Links terug bij vissen artikelen
  • Letten op toegankelijkheid

Eindgesprek (week 5)

uitwerken voor eindgesprek

Je uitkomst - karakteristiek screenshots:

Dit ging goed/Heb ik geleerd:

Ik heb goed geleerd om grid en flex te gebruiken en de card designs ben ik bv erg blij mee. Daarnaast lukte het responsive maken uiteindelijk ook goed, bv bij de footer en dieren categorien.

Dit was lastig/Is niet gelukt:

Voor sommige positioning heb ik position absolute en translate gebruikt, ik heb andere manieren geprobeerd maar dat lukte niet in tijd. Ook merk ik dat ik best wel rommelig codeer, en daardoor verlies ik soms overzicht.

Bronnenlijst

continu bijhouden terwijl je werkt

Nb. Wees specifiek ('css-tricks' als bron is bijv. niet specifiek genoeg). Nb. ChatGpT en andere AI horen er ook bij. Nb. Vermeld de bronnen ook in je code.

1. ChatGPT (vragen of de src atribute goed is gedaan)
2. W3C schools (hoe werkt css koppelen ook alweer?)
3. Img in button: https://stackoverflow.com/questions/8683528/embed-image-in-a-button-element (uiteindelijk niet gebruikt)
4. A11Y voor hiden van elementen ipv display:none gebruiken
5. Reddit voor extra toelichting: button styling en figcaption
6. Een vriend van mijn moeder (Frank) heeft me advies gegeven over het gebruik van figure + figcaption bij die dieren categorien, ik liep daar super erg vast en door figure en figcaption te gebruiken lukte het wel. Hij heeft een voorbeeld code gegeven , in zijn eigen stijl , ik heb daar inspiratie van gehaald maar al mijn code zelf geschreven. Hij is web developer.
7. Chatgpt heeft me het icoontje bij see more aangeleverd. Quincy heeft a:before aangeraden
8. ik heb MDN gebruikt om te controleren hoe ik bepaalde tags moet opschrijven/spellen.
9. Codepennetjes van Sanne voor hamburger menu heb ik gebruikt als inspo voor mijn eigen menu, gaat puur om de JS.
10. Maja heeft me geholpen met het centreren en goed gebruik van flex bij de dieren categorien
11. Chatgpt heeft me object: fit cover uitgelegd zodat de images niet zo stretchen.

In de code staat waar ik deze bronnen heb gebruikt

13. Bronnen: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figcaption
14. Bron: ChatGPT voor object:cover, ik stuurde een screenshot met de uitgerekte afbeelding met vraag: Hoe zorg ik ervoor dat de image niet zo uitrekt over de breedte van het scherm met CSS.
15. Bron: https://www.a11yproject.com/posts/how-to-hide-content/
16. Bron: voor de see-more decoratie https://developer.mozilla.org/en-US/docs/Web/CSS/::before
17. Bron: Maja heeft me geholpen met background-image en !important tag.
18. Bron voor video: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video
19. Bron: CSS en html voor de slider is hiervan: https://www.w3schools.com/howto/howto_css_switch.asp. Is puur voor use/accesability en ik vond het een leuke toevoeging, niet zelf geschreven
20. Bron: Sanne's codepen heeft me geholpen met het opzetten van een structuurtje voor deze sectie, niks letterlijk gekopieerd . Gaat over de nav/ul bij Video sectie
21. Claude AI heeft tussendoor geholpen met de volgorde in mijn selectors bepalen: "restructure my code by changing the order in each CSS selector, think of a logical order". Dat is geworden: Position/Display properties -> Box model (width, height, margins, padding) -> Backgrounds and borders -> Colors -> Typography (font-size, font-weight, text-align, etc.) -> Transforms and transitions En ik heb daar vanuit verder gewerkt