Een div is een onopvallend blok dat je zelf kunt opmaken met CSS Belangrijke CSS-eigenschappen: text-align: center; – centreren van tekst margin: auto; – centreren van blokken width: – bepaalt hoe breed een blok is (bijv. 80% of 600px ) Voorbeeld: .blok { width: 80%; margin: 20px auto; padding: 20px; background-color: #f0f0f0; text-align: center; } 🛠️ Opdracht – Bouw een eenvoudige homepage-layout Maak een nieuw HTML-bestand in Phoenix Code, noem het layout.html Plak onderstaande basiscode in het bestand: Mijn layout

Hier komt de inhoud van je website.

Pas de kleuren aan zodat het bij jouw stijl past Voeg een afbeelding toe in de main-blok en plaats jouw naam onderaan in de footer. Geef de blokken afgeronde hoeken ( border-radius ) van bijvoorbeeld 15px 🧠 Reflectie Wat gebeurt er als je de width verandert naar 60% of 400px ? Hoe werkt margin: auto precies? Wat zou je toevoegen als je een echte website maakt? 📤 Inleveren Maak een screenshot van jouw homepage met drie blokken die door jouw zijn vormgegeven. 7 CSS-selectors: element, class en id In deze les leer je wat een id -selector is en wanneer je die gebruikt. Je herhaalt ook wat een element -selector en een class -selector doet. Daarna pas je deze drie selectors toe in één pagina. 🎯 Leerdoelen Je herkent het verschil tussen element-, class- en id-selectors Je weet wanneer je een id gebruikt in plaats van een class Je kunt deze drie selectors toepassen in één pagina 💡 Wat zijn selectors in CSS? Een selector in CSS bepaalt op welk HTML-element de stijlregel toegepast wordt. Selector Voorbeeld Toepassing Element p { color: blue; } Geldt voor alle paragrafen Class .belangrijk { color: red; } Geldt voor meerdere elementen met class="belangrijk" ID #titel { font-size: 30px; } Geldt voor één uniek element met id="titel" Belangrijk verschil: class gebruik je voor meerdere elementen id gebruik je maar één keer op een pagina – het is uniek 🛠️ Opdracht – Gebruik drie soorten selectors Maak een nieuw HTML-bestand in Phoenix Code, noem het selectors.html Plak deze code als basis: CSS Selectors

Welkom op mijn pagina

Dit is een normale paragraaf.

Dit is een speciale paragraaf.

Nog een gewone paragraaf.

Pas de stijlen aan zoals jij het mooi vindt: Geef de #titel een andere kleur en een ander lettertype Geef de class .special een rand of andere achtergrond Voeg zelf nog een extra class toe voor een andere stijl (bijv. .opvallend ) 🧠 Reflectie Wanneer gebruik je een class en wanneer een id ? Wanneer gebuik je een element-selector, bijvoorbeeld body of h1 ? Wat gebeurt er als je per ongeluk twee keer hetzelfde id gebruikt? 📤 Inleveren De refectievragen en jouw eigen antwoorden (eigen woorden) in een txt- of PDF bestand. 8 Flexbox: moderne layouttechniek In deze les leer je werken met flexbox . Dit is een moderne techniek waarmee je blokken makkelijk naast of onder elkaar zet, zonder ingewikkelde marges of floats. 🎯 Leerdoelen Je weet wat display: flex doet Je kunt blokken naast elkaar zetten Je weet wat resonsive design is. Je kunt blokken centreren en de ruimte verdelen met justify-content en align-items 💡 Wat is flexbox? Met flexbox kun je elementen binnen een container netjes ordenen, zowel horizontaal als verticaal. display: flex zet de container om in een flex-container justify-content bepaalt de horizontale uitlijning (zoals center , space-between ) align-items bepaalt de verticale uitlijning (zoals center , flex-start ) Met felxboxes maak je een responsive design : dit betekent dat je web pagina op verschillende aparaten goed wordt getoond en dat de boxes worden aangepast als de breedte van het scherm wordt aangepast. Voorbeeld CSS: .container { display: flex; justify-content: space-between; align-items: center; } .blok { width: 150px; height: 150px; background-color: lightblue; text-align: center; padding: 20px; border-radius: 10px; } Een complete uitleg over alle mogelijkheden vind je hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 🛠️ Opdracht – Maak een blokkenrij met Flexbox Maak een nieuw bestand in Phoenix Code: flex.html Gebruik deze HTML als basis: Flexbox oefening

Mijn Flexbox layout

Blok 1

Blok 2

Blok 3

Experimenteer met andere waarden voor justify-content zoals center , space-around of flex-end Voeg eventueel nog een vierde blok toe Pas de kleuren en tekst aan zodat het jouw stijl heeft Opdracht Maak het volgende ontwerp zo goed mogelijk na en gebruik daarbij Flexboxen zoals je dat net hebt geleerd.: De drie blokken staan op het midden van de webpagina en je design is responisve . 📤 Inleveren Maak een screenshot van je resultaat. Indien je AI hebt gebruikt, stuur dan de AI-Chat log mee en zorg ervoor dat je alleen zaken gebruikt die we hebben behandeld en die je kan uitleggen. Je kan worden gevraagd om jouw ontwerp te komen toe lichten / uitleggen. -- Intro JS 1 Wat is JavaScript? In deze les leer je wat JavaScript is, waarom we het gebruiken en hoe je jouw eerste stukje code uitvoert in de browser. 🎯 Leerdoelen Je weet wat JavaScript is en waarvoor het wordt gebruikt Je kunt een script uitvoeren in de browserconsole Je kunt een script toevoegen aan een HTML-pagina met Sla op en open het bestand in de browser Open opnieuw de console en zie het bericht verschijnen Zie je meer berichten of fouten? Verwijder alle bestanden uit je project zodat je alleen script.html overhoud. 🛠️ Opdracht – Jouw eerste script Maak een HTML-bestand in Phoenix Code met een eigen titel en één paragraaf Voeg onderaan het bestand een script toe met minstens `console.log()`-regels Laat in de console bijvoorbeeld jouw naam en je favoriete dier zien Voorbeeld: console.log("Ik heet Yasmin"); console.log("Mijn lievelingsdier is een rode panda"); 🧠 Reflectie Wat is het verschil tussen wat je in de browser ziet en wat je in de console ziet? Waarom gebruiken programmeurs de console? 📤 Inleveren Maak een screenshot van jouw HTML-bestand én de console-output. 2 Variabelen en de console In deze les leer je hoe je informatie kunt opslaan in een variabele, hoe je dat zichtbaar maakt in de console, en waarom de console zo belangrijk is bij het programmeren. 🎯 Leerdoelen Je begrijpt wat een variabele is Je kunt een variabele maken met let of const Je gebruikt console.log() om informatie weer te geven Je weet wat debuggen is en waarom de console daarbij helpt 💡 Wat is een variabele? Een variabele is een soort doosje waarin je iets bewaart, zoals tekst of een getal. let naam = "Jasper"; const leeftijd = 17; let = variabele die later nog mag veranderen const = variabele die niet meer mag veranderen Je gebruikt console.log() om de inhoud van een variabele te bekijken: console.log(naam); 🔎 Wat is debuggen? Debuggen betekent: je code controleren op fouten (bugs) en begrijpen wat er gebeurt. De console is een soort gereedschapskist voor programmeurs. Je kunt er controleren of variabelen kloppen, of een functie wordt uitgevoerd, of ergens een fout zit. Een programmeur kijkt vaak in de console tijdens het schrijven van code. Als je in de console iets ziet wat je niet verwacht – dan kun je makkelijker de fout vinden. Daarom gebruiken we console.log() vaak tijdens het debuggen. 🛠️ Opdracht – Variabelen gebruiken en debuggen Maak een nieuw HTML-bestand in Phoenix Code: variabelen.html Typ de volgende basiscode in je bestand: Variabelen oefenen

Bekijk de console!

Open je bestand in de browser en bekijk de console (rechtermuisklik → Inspecteren → Console) Verander de naam en leeftijd naar jouw eigen gegevens Voeg een derde variabele toe: favorietDier en toon die ook met console.log() Voorbeeld: let favorietDier = "koala"; console.log("Mijn favoriete dier is: " + favorietDier); 🧠 Reflectie Wat gebeurt er als je de const probeert te veranderen? Waarom is het handig om even iets te loggen in de console? Heb je fouten gezien? Wat hielp je om ze op te lossen? 📤 Inleveren Beantwoord de vragen uit de reflectie en lever die in (.txt. of .pdf bestand). 3 Functies In deze les leer je wat een functie is, waarom functies handig zijn en hoe je zelf een functie maakt in JavaScript. Je oefent met functies die tekst tonen of berekeningen uitvoeren. 🎯 Leerdoelen Je weet wat een functie is en wat het doel ervan is Je kunt een functie schrijven met function Je kunt een functie aanroepen (laten uitvoeren) Je begrijpt wat een parameter is en hoe je die meegeeft 💡 Wat is een functie? Een functie is een blokje code dat je een naam geeft, zodat je het later makkelijk opnieuw kunt gebruiken. Stel, je wilt iets drie keer doen, zoals een bericht tonen. Dan is het dus handig om dat in een functie te stoppen. function zegHallo() { console.log("Hallo!"); } Om de functie uit te voeren (aan te roepen), typ je: zegHallo(); 📦 Functies met parameters Je kunt een functie ook informatie meegeven. Bijvoorbeeld een naam: function begroet(naam) { console.log("Hoi " + naam + "!"); } begroet("Fatima"); // toont: Hoi Fatima! begroet("Jesse"); // toont: Hoi Jesse! 🛠️ Opdracht – Bouw je eigen functies Maak een nieuw HTML-bestand in Phoenix Code: functies.html Typ deze code als basis: Functies oefenen

Bekijk de console

Maak nog een functie die een getal verdubbelt: function verdubbel(getal) { console.log(getal * 2); } Roep die functie minstens twee keer aan met verschillende getallen Voeg daarna zelf een nieuwe functie toe met een eigen idee, bijvoorbeeld: Een functie die een leeftijd in hondenjaren berekent (× 7) Een functie die een bericht toont in jouw stijl. 🧠 Reflectie Waarom is het handig om herhaalbare code in een functie te zetten? Wat gebeurt er als je een functie oproept zonder de juiste parameter? 📤 Inleveren Maak een screenshot van je code én de console-output 4 Voorwaardes met if en else In deze les leer je hoe je met JavaScript keuzes kunt maken. Je gebruikt if en else om bepaalde code alleen uit te voeren als aan een voorwaarde is voldaan. 🎯 Leerdoelen Je begrijpt wat een voorwaarde is Je kunt werken met if , else if en else Je kunt eenvoudige beslissingen laten uitvoeren op basis van een getal 💡 Wat is een voorwaarde? Met een voorwaarde bepaal je of een stukje code wél of niet uitgevoerd moet worden. Je gebruikt een if -statement: let leeftijd = 17; if (leeftijd >= 18) { console.log("Je bent volwassen"); } else { console.log("Je bent nog geen 18"); } Je kunt meerdere keuzes maken met else if : let punt = 6; if (punt >= 8) { console.log("Super goed!"); } else if (punt >= 5.5) { console.log("Voldoende"); } else { console.log("Onvoldoende"); } 🛠️ Opdracht – Leeftijdscontrole met voorwaarden Maak een nieuw HTML-bestand in Phoenix Code: ifelse.html Gebruik deze code als basis: If-statement oefenen

Bekijk de console

Pas de variabele leeftijd aan naar jouw eigen leeftijd en test het resultaat Voeg een else if -blok toe dat controleert of iemand precies 17 is Maak daarna zelf een voorbeeld met een punt (bijvoorbeeld een toetscijfer) en geef een boodschap: onvoldoende / voldoende / goed 📤 Inleveren Maak een screenshot van je code én de console-output bij jouw leeftijd en punt Lever dit screenshot in via Teams of Canvas 🧠 Reflectie Wat gebeurt er als je geen else gebruikt? Wanneer gebruik je else if in plaats van meerdere if -regels? 5 Gebeurtenissen (events) In deze les leer je hoe je iets kunt laten gebeuren als een gebruiker op een knop klikt. Je leert werken met onclick waarmee je een functie kan aanroepen bij een gebeurtenis. 🎯 Leerdoelen Je weet wat een event is in JavaScript Je kunt een knop laten reageren op een klik met onclick Je kunt een functie aanroepen wanneer een event plaatsvindt 💡 Wat is een event? Een event is een gebeurtenis, zoals: een klik op een knop ( click ) iets typen in een tekstvak ( input ) de muis bewegen over een element ( mouseover ) Met JavaScript kun je ervoor zorgen dat er iets gebeurt als zo'n event plaatsvindt. Het meest gebruikte event is onclick . Voorbeeld: klik op een knop Wordt je 'gek' van console.log? Je kunt ook alert gebruiken: alert("Je hebt geklikt!"); 🛠️ Opdracht – Laat een knop iets doen Maak een nieuw HTML-bestand in Phoenix Code: knop.html Typ deze code als basis: Gebeurtenis oefenen

Druk op de knop!

Verander de tekst in de functie naar je eigen boodschap Maak daarna nog een tweede knop met een andere functie, bijvoorbeeld: toonLeeftijd() Laat die tweede functie een leeftijd of getal tonen in de console (of via alert()) Voorbeeld: function toonLeeftijd() { console.log("Ik ben 16 jaar"); } 🧠 Reflectie Wat is er nodig om een knop iets te laten doen? Wat gebeurt er als je een functie aanroept zonder dat die bestaat? 📤 Inleveren Maak een screenshot van je HTML én console na het klikken op de knoppen 6 Formulierinvoer gebruiken met JavaScript 🎯 Leerdoelen Je weet hoe je met JavaScript input uit een formulier ophaalt met getElementById() . Je kunt een if -statement gebruiken op basis van invoer. Je toont het resultaat op het scherm, niet in de console. Start Code Leeftijd check

Voer je leeftijd in

💡 Uitleg (lees goed door!) Op regel 14 wordt een leeftijd gevraagd. Op regel 15 staat een knop. Deze doet nog niets maar die moet via het onlclick event gekoppeld worden aan de JS functie checkLeeftijd() . Op regel 17 staat een legel paragraaf. Deze paragraaf wordt (later) gevuld door de JS functie. Op regel 21 wordt de waarde van het input veld met het id leeftijdInput gevraagd. De waarde wordt in de JS variabele leeftijd bewaard. Op regel 30 wordt document.getElementById("id").value gebuikt om de waarde uit een inputveld op te halen. Het HTML element dat waarvan de tekst wordt opgehaald heeft als id output . 🛠️ Opdracht – Leeftijd analyseren en tonen Zorg ervoor dat de knop wordt gekoppeld aan de JavaScript functie checkLeeftijd(). Bereid de if-then-else structuur uit: als je ouder dat 65 bent dan ben je senior, ben je jonger dan 2 dan ben je een baby, jonger dan 6 een peuter, jonger dan 12 een jong kind, en jonger dan 18 een kind. Test op een leeftijd <0 en laat dan een boodscahp zien dat de onvoer niet geldig is. 🧠 Reflectie Wat gebeurt er als je niets invult of een negatieve waarde gebruikt? Waarom is Number(...) nodig? 📤 Inleveren Lever de geteste en werkende code als html bestand met daarin de JS code in. 8 Bereken een prijs met korting In deze les gebruik je JavaScript om een prijs te berekenen na korting. Je gebruikt een formulier met invoervelden voor het bedrag en de korting in procenten. Daarna laat je in de console zien wat de nieuwe prijs is. 🎯 Leerdoelen Je kunt meerdere waarden ophalen uit een formulier Je gebruikt JavaScript om een berekening te maken met die waarden Je toont het resultaat in de console 💡 Formule: prijs met korting Als je een korting in procenten hebt, dan gebruik je de volgende formule: kortingsbedrag = bedrag * (korting / 100); nieuwePrijs = bedrag - kortingsbedrag; Code Korting berekenen

Bereken de korting

Vul een bedrag en een kortingspercentage in:

🛠️ Opdracht Test het formulier met verschillende bedragen en percentages Controleer of het resultaat klopt in de console In plaats van console.log maak je net als bij de vorige opdracht een lege paragraaf aan en plaats daaarin het resultaat. De drie regels (regel 24-26 van de code) wordt dus op de pagina getoond, net als bij de vorige pagina. Maak CSS stijl aanpassingen naar eigen inzicht zodat de pagina er netjes uitziet. 🧠 Reflectie Wat gebeurt er als je niks invult? Wat kun je daaraan doen? Wat gebeurt er als je een korting invult die hoger is dan 100%? 📤 Inleveren De complete geteste en werkende HTML/JS/CSS in één HTML bestand. -- Portfolio Challenge 1 Persoonlijke website – HTML & vormgeving 🎯 Leerdoelen Je kunt een persoonlijke website opbouwen met HTML en CSS. Je maakt meerdere pagina’s die met elkaar verbonden zijn via een werkend menu. Je past opmaak toe met een externe stylesheet. 🛠️ Bouw jouw website Bouw een website die over jezelf gaat, de teksten van je website ga je tijdens de persoonlijk profileren lessen opstellen. De opdracht: De website moet bestaan uit een homepage en 3 vervolgpagina's. voorbeeld home pages: Elke pagina bevat: Een header met jouw logo, naam en een menu naar alle pagina’s. Een footer met een copyrightregel. Opmaak via een externe style.css bestand met classes. Elke pagina moet een header blok hebben met jouw logo , jouw naam en een menu waar alle menu-items in staan. Let op, het menu moet werken! Elke pagina moet een footer hebben waar een copyright in staat. voorbeeld footer: Alle pagina's moeten worden vormgegeven met css classes , maak gebruik van een externe stylesheet . De website heeft de volgende pagina's / menu-items: Home (homepage) (index.html) Je homepagina is je etalage, een homepagina moet bezoekers nieuwsgierig maken naar de rest van de website. Zorg dat je homepage er aantrekkelijk uitziet en dat de bezoeker in een oogopslag kan zien welke informatie er op de website te vinden is. Gebruik op de home page afbeeldingen en links naar de vervolgpagina's Mijn profiel (1e vervolgpagina) (profiel.html) Hierin plaats je een foto met een klein verhaaltje over jezelf. De exacte inhoud staat in de volgende opdracht, Over mij (2e vervolgpagina) (overmij.html) Plaats hier de 6 lesopdrachten van persoonlijk profileren (tijdlijn, normen &waarden, DISC, kernkwadranten, SWOT analyse, 360 graden feedback) Mijn visie (3e vervolgpagina) (mijnvisie.html) Voorlopig nog leeg, deze wordt pas vele later gevuld. 🛠️ Opdracht Bouw een pagina voor de homepage (index .html ). Bouw een pagina voor je profiel (profiel.html). Bouw een pagina voor je overmij (overmij.html). Bouw een pagina voor je visie ( visie .html). Zorg dat alle pagina's hetzelfde menu hebben. Menu's moeten ook werken! Maak van je website iets persoonlijks, geef het een mooie vorm, gebruik een achtergrond plaatje, doe iets met de font keuze. Leef je uit en gebruik de technieken die je hebt geleerd! 🧠 Reflectie Wat maakt een homepage aantrekkelijk voor een bezoeker? Wat is het voordeel van een apart CSS-bestand gebruiken voor styling? Wat vond je lastig bij het koppelen van menu's tussen meerdere pagina’s? 📤 Inleveren De 4 HTML -bestanden: index.html , profiel.html , overmij.html , visie.html . Een externe style.css bestand. Screenshot van alle 4 pagina's in de browser (inclusief menu en footer zichtbaar). De reflectie ; beantwoord de drie vragen i jouw eigen woorden en lever dit in (txt-bestand of pdf-bestand) Je hebt in totaal dus 9 bestanden ingeleverd. 2 Persoonlijke website – content Plaats jouw opdrachten van Persoonlijk Profileren op jouw website. De vorm mag jezelf bepalen. De vervolgpagina's vul je met onderstaande Vervolgpagina Mijn profiel (profiel.html) Plaats hier een foto van jezelf Schrijf hier je naam, leeftijd, de stad waar je woont Vervolgpagina Over mij (overmij.html) Plaats hier de 6 lesopdrachten van persoonlijk profileren tijdlijn normen &waarden DISC Kernkwadranten SWOT analyse 360 graden feedback Vervolgpagina Mijn visie (visie.html) Deze laat je (nog) leeg 📤 Inleveren Screenshot van alle 4 pagina's in de browser. Zorg dat ale content goed leesbaar is. Evnetueel maak je extra screenshots zodat alles leesbaar is. -- Blok 3 Kennis Check HTML 1. Wat is HTML? HTML betekent HyperText Markup Language . Het is de taal waarmee je een webpagina maakt . HTML vertelt de browser wat er op een website moet staan, zoals: tekst (bijvoorbeeld een titel of paragraaf), afbeeldingen (foto’s of plaatjes), knoppen en formulieren, en links naar andere pagina’s. Je gebruikt HTML om de inhoud en structuur van je website te bepalen. Denk aan het skelet van een huis: HTML zorgt ervoor dat alles op de juiste plek staat. Later kun je met CSS de kleuren en opmaak toevoegen, en met JavaScript de pagina interactief maken. 2. Wat gebeurt er als je in "Phoenix Code" op "Run" of "Live Server" klikt? Dan wordt je HTML-bestand zichtbaar als een echte webpagina in de browser. Je ziet meteen het resultaat van jouw code. 3. Waarom gebruiken we aan het begin van elke HTML-pagina? Deze regel vertelt de browser dat het om een moderne HTML5-pagina gaat. Zo weet de browser hoe hij de pagina moet weergeven. 4. Waarom staat er tekst tussen

...

? HTML werkt met tags. Die tags geven betekenis aan de tekst:

betekent een kop (grote titel),
betekent een paragraaf (stukje tekst). Het zorgt voor structuur op je pagina. 5. Wat is het verschil tussen en in HTML? maakt tekst vet en betekent: dit is belangrijk. maakt tekst schuin en betekent: leg hier nadruk op. Beide zorgen dat de tekst opvalt, maar op een andere manier. 6. Waarom gebruik je
in plaats van
? Met
breek je alleen de regel af, bijvoorbeeld in een adres of opsomming.
is voor een heel nieuw stukje tekst, paragraaf (met ruimte ervoor en erna).
staat voor " break", en
staat voor "paragraaf". 7. Wat doet de alt -tekst bij een afbeelding? Als de afbeelding niet wordt geladen, verschijnt de alt-tekst. Die beschrijft wat er op de afbeelding staat. Dat helpt ook mensen met een visuele beperking. 8. Wat is het verschil tussen een
en een
lijst?
is een opsomming zonder volgorde (met bolletjes ).
is een genummerde lijst, waarbij de volgorde belangrijk is (zoals een top 5). 9. Waarom moet elke rij in een tabel evenveel kolommen hebben? Anders weet de browser niet hoe hij de tabel netjes moet weergeven. Dan worden kolommen scheef of verdwijnen cellen. Elke rij moet dus evenveel

Hallo allemaal!

en

Hallo! Ik ben [jouw naam]

...

,

, ..... Opdracht Vervang de header die tussen

...

Koppen

Grote titel

is de grootste kop,

Over mij

Mijn hobby's

Toekomst

Mijn favoriete dier

Mijn hobby's

Top 3 favoriete snacks

Mijn schoolrooster

Vertel iets over jezelf

Over mij

Mijn favoriete onderwerp

Blok 1

Blok 2

Blok 3

Restaurant De Codepan

Welkom op mijn site

Welkom op mijn pagina

Mijn Flexbox layout

Bekijk de console!

Bekijk de console

Bekijk de console

Druk op de knop!

Voer je leeftijd in

Bereken de korting

...