Welkom op mijn website!
Hoi! Ik ben [JOUW NAAM] en ik ben aan het leren hoe je websites maakt.
Op deze pagina laat ik zien wat ik al kan, en kun je zien hoe jij zelf ook dingen kunt veranderen!
Druk op de knop hieronder om te beginnen:
Wat kun je hier leren?
🎨 HTML - De opmaak van je pagina
HTML is de taal die de structuur van je website bepaalt.
Alles tussen < en > is een tag. Bijvoorbeeld:
Probeer eens: Verander de tekst tussen de <h1> tags hierboven in je code!
🎨 CSS - De stijl van je pagina
CSS zorgt voor de kleuren, lettertypes en opmaak.
In de CSS hierboven kun je zien dat kleuren zijn opgeslagen in variabelen:
Probeer eens: Verander --main-kleur in iets anders, zoals #ff0000 (rood)!
⚡ JavaScript - Dingen laten gebeuren
JavaScript maakt je website interactief.
Kijk maar naar deze knop:
De code onclick="alert('...')" zorgt ervoor dat er een popup verschijnt.
Probeer eens: Verander de tekst in de alert()!
Pas deze website aan!
📝 Hoe pas je deze website aan?
Open deze pagina in een tekst editor (bijvoorbeeld Notepad++, VS Code, of gewoon Kladblok).
Zoek naar de plekken met [JOUW NAAM HIER] of [VOEG HIER...] en vervang die door je eigen tekst!
🎯 Opdracht 1: Verander je naam
Zoek in de code naar [JOUW NAAM HIER] en vervang het door je eigen naam.
Je vindt dit op 2 plekken: in de <title> en in de <h1>!
🎯 Opdracht 2: Verander de kleuren
Ga naar de CSS sectie helemaal bovenin.
Zoek naar --main-kleur en verander de kleurcode.
Probeer: #ff0000 (rood), #00ff00 (groen), #ff00ff (paars)
🎯 Opdracht 3: Voeg een afbeelding toe
Zoek naar de <img> tag en verander de src naar een URL van een afbeelding die jij leuk vindt.
Tip: Gebruik een URL van picsum.photos voor random foto's!
🎯 Opdracht 4: Voeg een nieuwe sectie toe
Kopieer een van de <div class="card">...</div> blokken en plak hem hieronder.
Verander de tekst naar iets over jou! Bijvoorbeeld:
🎯 Opdracht 5: Maak een nieuwe knop
Voeg een nieuwe knop toe met een ander bericht:
Contact
Vragen?
Heb je vragen of wil je helpen? Stuur dan een mail naar:
daylano@danoroar.nl