Labo 03 - Uitbreiding van CSS

Uitleg

De bedoeling van deze opdracht was om verder te bouwen op de CSS-basis van vorig labo en nieuwe en complexere commando's gebruiken, waardoor alles er mooier en interactiever uitziet. Een groot gedeelte van dit leerproces waren de "cards" die ik moest maken. Een paar voorbeelden van deze commando's zijn: transitions, cards, flexbox, ... We hadden terug een voorbeeld afbeelding waarvan we de HTML moesten maken en ook de CSS aan de hand van wat kleinere opdrachten. En soms stond een stuk HTML al klaar geschreven zodat we minder tijd verloren hieraan.

Handige links

OKLCH is een heel handige website om kleuren te kiezen. Hieruit krijg je dan een code die je in de CSS moet kopiëren.

ChatGPT heb ik af en toe gebruikt omdat ik niet altijd wist hoe ik moest starten aan een bepaalde opdracht/ welke functie ik daar voor moest gebruiken. Dan kopieerde ik de opdracht in chatGPT en hij gaf mij welk commando ik moest gebruiken en dan ging ik naar mozilla voor mij te verdiepen in dit commando.

Nadat ik door chatGPT de juiste commando gekregen heb, kan ik dit daarna opzoeken in de catalogus van Mozilla om te weten komen hoe dit werkt en zelf implementeren in mijn code. Want soms staat er hier te veel in om gewoon te zoeken naar welke commando juist gaat werken, daarvoor is chatGPT.

Op deze website kan je alle fonts gratis vinden en zijn gelicenseerd.

Reflectie

Goed

De HTML is een heel gemakkelijk deel en gaat vrij vlot. Het begin van de CSS is een basis gedeelte en ik heb hier geen moeilijkheden ondervonden, maar de delen van de main en de cards had ik iets meer problemen.

Slechter

Ik had heel veel moeite met de CSS van de cards, ook al had ik een voorbeeld op de powerpoint, verkreeg ik niet het gewenste resultaat.

1. De overlay-link stond niet op de juiste card, maar stond op een groot deel van de pagina, de fout was dat ik mijn posities niet juist had.
2. De text stond niet onder elkaar, maar naast elkaar. De oplossing hiervoor was een text-align naar links te doen en de margin te veranderen zodat het niet volledig links staat maar een beetje offset heeft.
3. De derde fout was dat de foto's naast de kaarten stonden i.p.v. er boven. Dit heb ik kunnen oplossen door een aparte functie te maken en daar dan wat te spelen met de order, de grootte en dan zeggen dat het display van het type block is en dat het object moet fitten als cover.

Niet zeker

De main navigatie was niet al te moeilijk, maar ik wist niet wat ik precies eerst moest doen en na wat onderzoek heb ik gevonden hoe ik hieraan moest beginnen.