My Learning Journal

College: webtechnologie

Hoe werkt het internet? Je apparaat stuurt een HTTP Request naar de cloud, deze kijkt vervolgens in de server. De server kijkt met het gekregen adres naar de bijbehorende bestanden. De bestanden worden vervolgens in een HTTP Response terug gestuurd naar je apparaat.

HTML

HTML is het skelet van de pagina, hier komt alle informatie en content in. Het werkt op basis van de DOM (Document Object Model). Het is bij HTML van belang dat je de elementen nest op de correcte manier. Een <h1> kan bijvoorbeeld goed in een <header>, maar een <main> kan niet in een <p>.

CSS

CSS is de huid van de website. Het bepaald hoe de website er uit komt te zien. In CSS (Cascading Style Sheet) werk je met verschillende selectoren om het juiste element te wijzigen.

• *
• .class
• #id
• p
• p, h1
• p h1
• p > h1
• p + h1
• p ~ h1
• a:link
• :[target]
• a[href:]
• p::after
• p::before
• p:nth-of-type

JS

Javascript is voor het gedrag van de website. Document.queryselector("p.intro").addeventlistener("mouseover", e => { e.target.classList.toggle("classname") })

Woensdag 3 september

Vandaag geleerd over breakdown schetsen: Wat is het nut van een breakdown schets? Waar moet je op letten als je een breakdown schets maakt? Hoe gedetaillerd moet een breakdown schets?

Maandag 08/09/2025

Shrijf 3 dingen die je geleerd hebt.

1. Maak designs met echte content dus geen placeholders en kijk wat er gebeurd met lange en korte teksten.
2. Hoe gedetailleerder de breakdown schets hoe makkelijker het coderen.
3. Werken met verschillende kleuren voor elementen in de breakdown schets is een handige manier om duidelijkheid te krijgen.

Schrijf 2 dingen die je interessant vind.

1. Semantisch coderen
2. Ontwijken van te veel divs gebruiken

Schrijf 1 ding waar je nog vragen over hebt.

1. ./

Dinsdag 09/09/2025

Shrijf 3 dingen die je geleerd hebt.

1. Een fraction is anders dan een %, het is bebaseerd op de BESCHIKBARE ruimte ipv alle ruimte wat % doet.
2. Je kan bijvoorbeeld nummer 3 tm nummer 6 selecteren in css door middel van :nth-of-type(n + 3):nth-of-type(-n + 6).
3. Grid template area is een fysieke manier van grid verdelen.

Schrijf 2 dingen die je interessant vind.

1. Dat je grid ook gebruikt voor cards.
2. Dat je fractions kan animeren.

Schrijf 1 ding waar je nog vragen over hebt.

1. Voor mij is minmax() nog niet duidelijk

Wat heb je gedaan?