Je gaat met dit gedownloadde werk aan de slag. Je gaat proberen om dar een lichtbox van te maken: als je op de verkleinde afbeelding met tekst klikt, komt de bijpassende inhoud tevoorschijn.
Hier volgen alsvast de eerste stappen
- Pas de meta informatie aan door mijn naam te vervangen door die van jou;
- in elke sectie staat 2 div's. Bedenk voor beide div's een class en geef de div's in de andere sectie sook die bedachte namen;
- zet alle div's met de kleine inhoud in een variabele in het JavaScript;
- zet die divs met de overige informatie ook in een variabele;
- maak een array en zet alle node-elementen uit punt 4 in deze array en verwijder ze uit de DOM. Je houdt dan alleen de inhoud over waar de gebruiker op kan klikken;
- ga in de CSS met het main-element aan de slag. Met display grid zorg je ervoor dat er zoveel kolommen komen als er past bij een kolombreedte van 300px. De overige ruimte wordt door de kolommen opgevuld;
- Ga in de zichtbare div's ook aan de slag: Maak deze ook display:grid met 1 kolom. Zet daar zowel de afbeelding als de pargraaf is. Zo komen ze boven elkaar te liggen.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent