Blok 3 - Web Front End

HTML - Phoenix

1 Introductie Phoenix Code

In deze les leer je werken met Phoenix Code: een makkelijke code-editor in de browser. Je maakt je eerste HTML-bestand aan en bekijkt het resultaat in je browser.

🎯 Leerdoelen

💡 Wat is Phoenix Code?

🔰 Wat gaan we doen?

🛠️ Stappenplan

1. Open Phoenix Code

Je hebt nu een standaard HTML bestand (index.htm).

2. Maak een nieuw HTML-bestand

3. Zet deze voorbeeldcode erin

<!DOCTYPE html>
<html>
<head>
  <title>Hallo wereld</title>
</head>
<body>
  <h1>Hallo allemaal!</h1>
  <p>Dit is mijn eerste HTML-pagina in Phoenix Code.</p>
</body>
</html>

4. Bekijk het resultaat

Opdracht

Waarvoor dient HTML? Zet deze vraag en het antwoord op jouw HTML pagina.

🧠 Vragen

📤 Inleveren

  1. Screenshot van je browser waarin de vraag "Waarom dient HTML?" en jouw antwoord zichtbaar zijn.

Voorbeeld screenshot

image.png

2 Wat is HTML?

In deze les leer je wat HTML is, waarom het belangrijk is voor websites, en maak je je eerste eenvoudige webpagina met koppen en tekst.

🎯 Leerdoelen

💡 Wat is HTML?

🎬Video - korte uitleg HTML

https://www.youtube.com/watch?v=it1rTvBcfRg

🔰 Wat gaan we doen?

🛠️ Stappenplan

1. Maak een nieuw project in Phoenix Code

2. Typ deze HTML-code

<!DOCTYPE html>
<html>
<head>
  <title>Over mij</title>
</head>
<body>

  <h1>Hallo! Ik ben [jouw naam]</h1>
  <p>Ik ben [leeftijd] jaar oud en ik zit op school bij [schoolnaam].</p>
  <p>Mijn favoriete hobby is [hobby].</p>

</body>
</html>

3. Pas de tekst aan

4. Bekijk je werk

Uitleg

Tekst staat tussen tags. Deze tags geeft aan hoe een tekst moet worden weergegeven.

Vrijwel alle HTML tags bestaan uit een open-tag (bijvoorbeeld <p> en een sluit tag bijvoorbeeld </p>

<p>...</p> betekent dat de tekst een pragraaf is.

<h1>...</h1> betekent dat de tekst een header is.

Je hebt nog meer headers: <h2>, <h3>, .....

Opdracht

  1. Vervang de header die tussen <h1>...</h1> staat door een kleinere header.
  2. Zoek op hoe je tekst vet kan afdrukken en laat jouw naam ver afdrukken.

📤 Inleveren

  1. Maak een screenshot van je webpagina met aangepasgte header en jouw naam ver gedrukt.

3 Tekst en opmaak

In deze les leer je hoe je tekst opmaakt met HTML. Je leert koppen, paragrafen, vetgedrukte tekst, cursieve tekst en regels afbreken.

🎯 Leerdoelen

💡 Wat kun je met HTML-opmaak?

🔰 Wat gaan we doen?

📝 Eenvoudige HTML-tags voor tekstopmaak

Tag Betekenis Voorbeeld Uitleg
<h1> t/m <h6> Koppen <h1>Grote titel</h1> <h1> is de grootste kop, <h6> de kleinste
<p> Paragraaf / alinea <p>Dit is een stukje tekst.</p> Zorgt voor witruimte vóór en na
<strong> Vetgedrukt (belangrijk) <strong>Let op!</strong> Wordt ook door screenreaders benadrukt
<em> Cursief (nadruk) <em>Heel belangrijk</em> Geeft nadruk, ook voor screenreaders
<br> Regellijn afbreken Eerste regel<br>Tweede regel Breekt een regel zonder nieuwe paragraaf
(deze tag bestaat alleen uit een openingstab)

🛠️ Stappenplan

1. Maak een nieuw project of nieuw bestand in Phoenix Code

2. Typ of plak deze HTML-code

<!DOCTYPE html>
<html>
<head>
  <title>Mijn interesses</title>
</head>
<body>

  <h1>Over mij</h1>
  <p>Hallo! Ik ben <strong>[jouw naam]</strong>. Ik ben <em>enthousiast</em> over programmeren.</p>

  <h2>Mijn hobby's</h2>
  <p>Ik hou van muziek maken<br>voetballen<br>en gamen.</p>

  <h2>Toekomst</h2>
  <p>Later wil ik werken als programmeur bij een groot bedrijf.</p>

</body>
</html>

3. Pas de inhoud aan

4. Bekijk je werk

🧠 Reflectie

📤 Inleveren

  1. Maak een screenshot van jouw pagina waarin opmaak en breekregels zichtbaar zijn

In deze les leer je hoe je een afbeelding op een webpagina toont en hoe je een klikbare link toevoegt naar een andere website.

🎯 Leerdoelen

💡 Wat zijn afbeeldingen en links in HTML?

🎬Voorbeeld

https://www.youtube.com/watch?v=gOioxltfh48

Hoe voeg je een plaatje toe op je web pagina?

https://www.youtube.com/watch?v=Hh_se2Zqsdk

🔰 Wat gaan we doen?

🛠️ Stappenplan

1. Maak een nieuw HTML-bestand in Phoenix Code

2. Typ of plak deze HTML-code

<!DOCTYPE html>
<html>
<head>
  <title>Afbeelding en link</title>
</head>
<body>

  <h1>Mijn favoriete dier</h1>

  <img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg" alt="Foto van een kat" width="300">

  <p>Meer informatie over katten vind je op 
    <a href="https://nl.wikipedia.org/wiki/Kat_(dier)" target="_blank">Wikipedia</a>.
  </p>

</body>
</html>

3. Pas de inhoud aan

4. Bekijk je werk

🧠 Reflectie

📤 Inleveren

  1. Maak een screenshot van je webpagina met een afbeelding én een werkende link

5 Lijsten in HTML

In deze les leer je hoe je lijsten maakt met HTML. Je leert zowel opsommingen als genummerde lijsten maken.

🎯 Leerdoelen

💡 Wat zijn lijsten in HTML?

🔰 Wat gaan we doen?

🎬Voorbeeld

https://www.youtube.com/watch?v=2O8pkybH6po

🛠️ Stappenplan

1. Maak een nieuw HTML-bestand in Phoenix Code

2. Typ of plak deze HTML-code

<!DOCTYPE html>
<html>
<head>
  <title>Mijn lijsten</title>
</head>
<body>

  <h1>Mijn hobby's</h1>
  <ul>
    <li>Gamen</li>
    <li>Voetballen</li>
    <li>Tekenen</li>
  </ul>

  <h2>Top 3 favoriete snacks</h2>
  <ol>
    <li>Pizza</li>
    <li>Frikandel</li>
    <li>Chips</li>
  </ol>

</body>
</html>

Opdracht

Verander de pagina en maak:

  1. een numbered list van dingen die jij luek vind om te doen. Op nummer 1 staat dan wat je het leukst vnd, op 2 wat je daarna het leukts vind, etc. etc.  Noem tenminst 5 dingen.
  2. een unnumbered lists van dingen die je tot nu hebt geleerd van software development.

Klik op Run of Live Server om je pagina te testen

📤 Inleveren

  1. Maak een screenshot van jouw webpagina met beide lijsten zichtbaar

6 Tabellen in HTML

In deze les leer je hoe je een eenvoudige tabel maakt met HTML. Je gebruikt dit om informatie netjes in kolommen en rijen te tonen.

🎯 Leerdoelen

💡 Wat is een tabel in HTML?

In een HTML tabel moet elke regel evenveel kolommen bevatten. Om dat voor elkaar te krijgen zou je lege kolommen kunne toevogen als een regel te weinig kolommen heeft.

In een tabell moet elke regel precies evenveel kolommen bevatten!

🎬Voorbeeld

https://www.youtube.com/watch?v=2O8pkybH6po

🔰 Wat gaan we doen?

🛠️ Stappenplan

1. Maak een nieuw HTML-bestand in Phoenix Code

2. Typ of plak deze HTML-code

<!DOCTYPE html>
<html>
<head>
  <title>Mijn schoolrooster</title>
</head>
<body>

  <h1>Mijn schoolrooster</h1>

  <table border="1">
    <tr>
      <th>Dag</th>
      <th>Vakken</th>
    </tr>
    <tr>
      <td>Maandag</td>
      <td>Nederlands, Wiskunde</td>
    </tr>
    <tr>
      <td>Dinsdag</td>
      <td>Engels, Gym</td>
    </tr>
  </table>

</body>
</html>

3. Pas de inhoud aan

4. Bekijk je werk

📤 Inleveren

  1. Maak een screenshot van jouw tabel met minstens 6 rijen (kopregel plus maamndag t/m vrijdag)

7 Formulieren in HTML

In deze les leer je hoe je een formulier maakt in HTML. Je leert invoervelden gebruiken en een knop toevoegen om informatie te versturen.

🎯 Leerdoelen

💡 Wat is een formulier?

Wil je een voorbeeld zien, dan kan je hier kijken.

🔰 Wat gaan we doen?

🎬Voorbeeld

https://www.youtube.com/watch?v=2O8pkybH6po

🛠️ Stappenplan

1. Maak een nieuw HTML-bestand in Phoenix Code

<!DOCTYPE html>
<html>
<head>
  <title>Contactformulier</title>
</head>
<body>

  <h1>Vertel iets over jezelf</h1>

  <form action="#" method="post">
    <label for="naam">Naam:</label><br>
    <input type="text" id="naam" name="naam"><br><br>

    <label for="leeftijd">Leeftijd:</label><br>
    <input type="number" id="leeftijd" name="leeftijd"><br><br>

    <label for="hobby">Hobby:</label><br>
    <input type="text" id="hobby" name="hobby"><br><br>

    <input type="submit" value="Verstuur">
  </form>

</body>
</html>

2. Typ of plak deze HTML-code

Opdracht

Gebruik het formulier als voorbeeld en maak zelf een formulier.

Vraag de gebruiker om de volgende gegvens:

Bekijk je werk

🧠 Reflectie

📤 Inleveren

  1. Maak een screenshot van jouw formulier met ingevulde gegevens

8 Mini-project: Jouw persoonlijke homepage

In deze les ga je zelf een echte webpagina bouwen over jezelf. Je gebruikt alles wat je hebt geleerd over HTML: tekst, afbeeldingen, lijsten, tabellen en een formulier.

🎯 Leerdoelen

💡 Wat gaan we doen?

🛠️ Opdracht

Maak een bestand mijnhomepage.html aan en zorg dat het deze onderdelen bevat:

✅ Verplichte onderdelen:

Basis HTML code

<!DOCTYPE html>
<html>
<head>
  <title>Contactformulier</title>
</head>
<body>


</body>
</html>

🌟 Extra uitdaging (optioneel):

📤 Inleveren

  1. Maak een screenshot van jouw volledige homepage

CSS - Phoenix

1 Wat is CSS?

In deze les leer je wat CSS is, waarom het belangrijk is, en hoe je het gebruikt om de opmaak van een webpagina aan te passen. Je gaat zelf aan de slag met eenvoudige kleuren en lettertypes.

🎯 Leerdoelen

💡 Wat is CSS?

🔧 Hoe voeg je CSS toe?

Voorbeeld: CSS inline gebruiken

<p style="color: red;">Deze tekst is rood</p>
<h1 style="font-family: Arial;">Welkom</h1>

De style="..." zit in het HTML-element en verandert de stijl van dat element.

🎬CSS Introduction

In deze korte video wordt uitgelegd wat CSS is. Kijk de video en als je nog niet alles begrijpt dan is dan prima, want we gaan alles ook nog een keer in deze lessen uitleggen.

https://www.youtube.com/watch?v=AGDDdsiZ0Ko&list=PLP9IO4UYNF0UCaUSF3XNZ1U9f01E5h5PM

🛠️ Opdracht – Pas kleur en stijl toe

Let op: gebruik Phoenix Code om deze opdracht te maken.

  1. Maak een nieuw HTML-bestand aan, noem het css-les1.html
  2. Plak onderstaande code in het bestand:
<!DOCTYPE html>
<html>
<head>
  <title>Mijn eerste CSS</title>
</head>
<body>

  <h1>Welkom op mijn pagina</h1>
  <p>Ik ben een beginnende webdeveloper.</p>
  <p>Ik leer nu hoe ik CSS kan gebruiken.</p>

</body>
</html>
  1. Pas de HTML aan met inline CSS, zodat:
    • De <h1> een blauwe kleur krijgt en een ander lettertype (bijv. Arial)
    • De eerste <p> rood wordt en gecentreerd staat
    • De tweede <p> een andere kleur krijgt die jij mooi vindt
  2. Bekijk je werk in Phoenix Code via Run

📤 Inleveren

  1. Maak een screenshot van jouw pagina met de aangepaste kleuren en lettertypes

2 CSS in het <style>-blok

In deze les leer je hoe je CSS los van HTML schrijft in het <style>-blok boven in het document. Je gebruikt selectoren zoals body, h1 en p om elementen op te maken.

🎯 Leerdoelen

💡 Wat is het <style>-blok?

Voorbeeld:

<style>
  body {
    background-color: lightyellow;
  }

  h1 {
    color: navy;
    font-family: Verdana;
  }

  p {
    color: darkgreen;
    text-align: center;
  }
</style>

In dit voorbeeld zijn body, h1 en p de element-selectors en die verwijzen naar de HTML-elementen.

🛠️ Opdracht – Stijl je pagina met het <style>-blok

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het css-les2.html
  2. Plak deze basiscode in het bestand:
<!DOCTYPE html>
<html>
<head>
  <title>Stijl oefenen</title>
  <style>

  /* Voeg hier je CSS toe */

  </style>
</head>
<body>

  <h1>Over mij</h1>
  <p>Ik ben een student die leert over HTML en CSS.</p>
  <p>Ik vind het leuk om websites te maken.</p>

</body>
</html>
  1. Voeg in het <style>-blok CSS toe zodat:
    • De body een lichtgrijze achtergrondkleur krijgt
    • Alle <h1>-koppen blauw worden en een ander lettertype krijgen (bijv. Georgia)
    • De <p>-tekst donkergroen wordt en gecentreerd staat

🧠 Reflectie

Opdracht

  1. Voer alle stappen uit zoals hierboven beschreven.

📤 Inleveren

  1. Maak een screenshot van jouw pagina waarin je aangepaste stijlen duidelijk zichtbaar zijn

3 Tekstopmaak en achtergronden

In deze les leer je hoe je tekst kunt opmaken met kleur, lettertype, uitlijning en hoe je een achtergrondkleur toevoegt aan je pagina.

🎯 Leerdoelen

Selectors; element-selector en class selector

Zoals we eersder zagen beginnen we een CSS blok met een selector.

Tot nu toe hebben we element-selectors gebruikt. Deze verwezen naar de HTML-elementen.

We kennen ook class-selectors deze verwijzen naar classes. Classes zien er in HTML als volgt uit:

<div class="blok"> ... </div>

In dit geval is blok de naam van de selector.

In CSS verwijzen we naar een class op de volgende manier.

.blok {
  /* stijlregels */
}

Een class selector in CSS begint met een . (punt)

💡 Belangrijke CSS-eigenschappen in deze les

Voorbeeld:

.my-header {
  color: darkred;
  font-family: 'Comic Sans MS';
  text-align: center;
  background-color: lightyellow;
}

🛠️ Opdracht – Maak een kleurrijke poster

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het poster.html
  2. Plak deze HTML-code in het bestand:
<!DOCTYPE html>
<html>
<head>
  <title>Mijn poster</title>
  <style>

  /* Voeg hier jouw stijlen toe */

  </style>
</head>
<body>

  <h1>Mijn favoriete onderwerp</h1>
  <p class="eerste">Dit is een stukje tekst over iets wat ik leuk vind.</p>
  <p>Bijvoorbeeld een sport, hobby, film of spel.</p>
  <p>Of een vak op College Amstelland dat je heel leuk vind :)</p>

</body>
</html>
  1. Geef je body een leuke background-color
  2. Geef je h1 een opvallende kleur, een ander lettertype en text-align: center
    Gebruik hiervoor de class met  class-selector .header
  3. Geef de p-teksten elk een andere kleur en uitlijning en gebruik hiervoor classes met class-selectors. Geef elke <p> hiervoor een aparte class.
  4. Experimenteer met verschillende kleuren en lettertypes zoals: Arial, Georgia, Courier New, Comic Sans MS

📤 Inleveren

  1. Maak een screenshot van jouw kleurrijke poster waarin de CSS code ook duidelijk te lezen is.

4 Box-model: randen, padding en margins

In deze les leer je hoe je ruimte kunt maken rondom en binnenin een element met CSS. Je leert ook hoe je randen toevoegt en de afstand tussen blokken regelt.

🎯 Leerdoelen

💡 Wat is het box-model?

Elk HTML-element is als een ‘doos’ opgebouwd uit vier lagen:

image.png

Voorbeeld:

.blok {
  margin: 15px;
  border: 2px solid black;
  padding: 20px;
  background-color: lightblue;
}

🛠️ Opdracht – Drie gekleurde tekstblokken

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het boxmodel.html
  2. Plak onderstaande code in je bestand:
<!DOCTYPE html>
<html>
<head>
  <title>Box model test</title>
  <style>

  .blok {
    border: 2px solid black;
    padding: 20px;
    margin: 20px;
    background-color: lightyellow;
  }

  </style>
</head>
<body>

  <div class="blok">
    <h2>Blok 1</h2>
    <p>Dit is het eerste tekstblok met padding en marge.</p>
  </div>

  <div class="blok">
    <h2>Blok 2</h2>
    <p>Ook dit blok heeft een rand en achtergrondkleur.</p>
  </div>

  <div class="blok">
    <h2>Blok 3</h2>
    <p>Pas de kleuren en afstanden aan zoals jij het mooi vindt.</p>
  </div>

</body>
</html>
  1. Pas de CSS aan zodat:
    • Ieder blok een andere background-color heeft
    • De margin tussen de blokken groter of kleiner is (proberen met 10px, 30px, enz.)
    • De padding meer of minder ruimte geeft binnen het blok
  2. Test verschillende border-instellingen, zoals dashed, double of 4px solid red

🧠 Reflectie

📤 Inleveren

  1. Geef antwoord op de drie reflectievragen in eigen woorden en lever dat in, in een txt- of PDF bestand.
  2. Voeg een schermafdruk van jouw boxen toe aan de PDF.

5 Classes gebruiken in CSS

In deze les leer je hoe je een class gebruikt om meerdere elementen dezelfde opmaak te geven. Zo kun je stijlen hergebruiken zonder telkens dezelfde regels te schrijven.

🎯 Leerdoelen

💡 Wat is een class?

Voorbeeld:

<div class="menu">Pizza Margherita</div>
<div class="menu speciaal">Spaghetti Bolognese</div>
.menu {
  background-color: lightyellow;
  padding: 10px;
  border: 1px solid gray;
  margin-bottom: 10px;
}

.speciaal {
  color: red;
}

🛠️ Opdracht – Bouw een gestyleerde menukaart

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het menukaart.html
  2. Plak onderstaande code als startpunt:
<!DOCTYPE html>
<html>
<head>
  <title>Menukaart</title>
  <style>

  .menu {
    background-color: lightyellow;
    border: 2px solid #999;
    padding: 15px;
    margin-bottom: 15px;
    font-family: Georgia;
  }

  </style>
</head>
<body>

  <h1>Restaurant De Codepan</h1>

  <div class="menu">Pizza Margherita</div>
  <div class="menu">Truffelpasta met parmezaan</div>
  <div class="menu">Ravioli met spinazie en ricotta</div>
  <div class="menu">Chef’s surprise</div>

</body>
</html>
  1. Pas zelf de kleuren, marges of lettertypes aan zoals jij het mooier vindt
  2. Voeg minstens twee eigen gerechten toe aan de lijst
  3. Geef twee menu-items de class speciaal en zorg ervoor dat deze speciale gerechten duidelijk opvallen door hun stijl aan te passen.

🧠 Reflectie

📤 Inleveren

  1. Maak een screenshot van jouw gestyleerde menukaart in de browser.

6 Layout en positionering

In deze les leer je hoe je met behulp van blokken en eenvoudige CSS een duidelijke indeling (layout) maakt. Denk aan een header bovenaan, een middenstuk (main) en een footer onderaan.

🎯 Leerdoelen

💡 Wat is een layout?

Belangrijke CSS-eigenschappen:

Voorbeeld:

.blok {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  background-color: #f0f0f0;
  text-align: center;
}

🛠️ Opdracht – Bouw een eenvoudige homepage-layout

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het layout.html
  2. Plak onderstaande basiscode in het bestand:
<!DOCTYPE html>
<html>
<head>
  <title>Mijn layout</title>
  <style>

    .blok {
      width: 80%;
      margin: 20px auto;
      padding: 20px;
      background-color: #eeeeee;
      text-align: center;
    }

    .header {
      background-color: lightblue;
    }

    .main {
      background-color: white;
    }

    .footer {
      background-color: lightgray;
    }

  </style>
</head>
<body>

  <div class="blok header">
    <h1>Welkom op mijn site</h1>
  </div>

  <div class="blok main">
    <p>Hier komt de inhoud van je website.</p>
  </div>

  <div class="blok footer">
    <p>Gemaakt door [jouw naam] - 2025</p>
  </div>

</body>
</html>
  1. Pas de kleuren aan zodat het bij jouw stijl past
  2. Voeg een afbeelding toe in de main-blok en plaats jouw naam onderaan in de footer.
  3. Geef de blokken afgeronde hoeken (border-radius) van bijvoorbeeld 15px

🧠 Reflectie

📤 Inleveren

  1. 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

💡 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:

🛠️ Opdracht – Gebruik drie soorten selectors

  1. Maak een nieuw HTML-bestand in Phoenix Code, noem het selectors.html
  2. Plak deze code als basis:
<!DOCTYPE html>
<html>
<head>
  <title>CSS Selectors</title>
  <style>

    /* Element-selector */
    p {
      color: green;
    }

    /* Class-selector */
    .special {
      font-weight: bold;
      background-color: lightyellow;
    }

    /* ID-selector */
    #titel {
      font-size: 30px;
      color: navy;
    }

  </style>
</head>
<body>

  <h1 id="titel">Welkom op mijn pagina</h1>

  <p>Dit is een normale paragraaf.</p>
  <p class="special">Dit is een speciale paragraaf.</p>
  <p>Nog een gewone paragraaf.</p>

</body>
</html>
  1. 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
  2. Voeg zelf nog een extra class toe voor een andere stijl (bijv. .opvallend)

🧠 Reflectie

📤 Inleveren

  1. 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

💡 Wat is flexbox?

Met flexbox kun je elementen binnen een container netjes ordenen, zowel horizontaal als verticaal.

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

  1. Maak een nieuw bestand in Phoenix Code: flex.html
  2. Gebruik deze HTML als basis:
<!DOCTYPE html>
<html>
<head>
  <title>Flexbox oefening</title>
  <style>

    .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f0f0f0;
      padding: 20px;
    }

    .blok {
      width: 150px;
      height: 150px;
      background-color: lightcoral;
      color: white;
      font-weight: bold;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

  </style>
</head>
<body>

  <h1>Mijn Flexbox layout</h1>

  <div class="container">
    <div class="blok">Blok 1</div>
    <div class="blok">Blok 2</div>
    <div class="blok">Blok 3</div>
  </div>

</body>
</html>
  1. Experimenteer met andere waarden voor justify-content zoals center, space-around of flex-end
  2. Voeg eventueel nog een vierde blok toe
  3. 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.:

image.png

De drie blokken staan op het midden van de webpagina en je design is responisve.

📤 Inleveren

  1. Maak een screenshot van je resultaat.
  2. 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

💡 Wat is JavaScript?

Bijvoorbeeld, een knop

Wat kun je met JavaScript doen?

🎬Video

In deze video wordt goed uitgelegd waarom je asl Web Developer, JavaScript moet leren.

Niet alles wat hier in de voorbeelden wordt getoond wordt niet allemaal in deze lessen behandeld. In blok 5 waarneer we het over DOM gaan hebben zal dit allemaal uitvoerig worden behandeld. We houden het voor nu even bij de basics.

https://www.youtube.com/watch?v=zofMnllkVfI

🔧 Oefenen in de browserconsole

  1. Open je browser (bijv. Chrome of Firefox)
  2. Rechtermuisklik op een lege plek op een website > Kies Inspecteren > Ga naar het tabblad Console
  3. Typ daar: 
    console.log("Hallo wereld!");
    en druk op Enter
  4. Je ziet in de console de tekst Hallo wereld!

📄 JavaScript in een HTML-bestand gebruiken

  1. Open Phoenix Code
  2. Maak een nieuw HTML-bestand aan, noem het script.html
  3. Typ of plak deze code in het bestand:
<!DOCTYPE html>
<html>
<head>
  <title>Eerste script</title>
</head>
<body>

  <h1>Welkom op mijn site</h1>
  <p>Open de console om het bericht te zien.</p>

  <script>
    console.log("Dit bericht komt uit de HTML!");
  </script>

</body>
</html>
  1. Sla op en open het bestand in de browser
  2. 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

  1. Maak een HTML-bestand in Phoenix Code met een eigen titel en één paragraaf
  2. Voeg onderaan het bestand een script toe met minstens `console.log()`-regels
  3. 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

📤 Inleveren

  1. 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

💡 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;

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.

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

  1. Maak een nieuw HTML-bestand in Phoenix Code: variabelen.html
  2. Typ de volgende basiscode in je bestand:
<!DOCTYPE html>
<html>
<head>
  <title>Variabelen oefenen</title>
</head>
<body>

  <h1>Bekijk de console!</h1>

  <script>
    let voornaam = "Ali";
    const leeftijd = 18;

    console.log("Naam: " + voornaam);
    console.log("Leeftijd: " + leeftijd);
  </script>

</body>
</html>
  1. Open je bestand in de browser en bekijk de console (rechtermuisklik → Inspecteren → Console)
  2. Verander de naam en leeftijd naar jouw eigen gegevens
  3. 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

📤 Inleveren

  1. 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

💡 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

  1. Maak een nieuw HTML-bestand in Phoenix Code: functies.html
  2. Typ deze code als basis:
<!DOCTYPE html>
<html>
<head>
  <title>Functies oefenen</title>
</head>
<body>

  <h1>Bekijk de console</h1>

  <script>

    function begroet(naam) {
      console.log("Hallo " + naam + "!");
    }

    begroet("Maya");
    begroet("Koen");

  </script>

</body>
</html>
  1. Maak nog een functie die een getal verdubbelt: 
    function verdubbel(getal) {
  console.log(getal * 2);
}
  2. Roep die functie minstens twee keer aan met verschillende getallen
  3. 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

📤 Inleveren

  1. 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

💡 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

  1. Maak een nieuw HTML-bestand in Phoenix Code: ifelse.html
  2. Gebruik deze code als basis:
<!DOCTYPE html>
<html>
<head>
  <title>If-statement oefenen</title>
</head>
<body>

  <h1>Bekijk de console</h1>

  <script>

    let leeftijd = 15;

    if (leeftijd >= 18) {
      console.log("Je mag stemmen.");
    } else {
      console.log("Je bent nog te jong om te stemmen.");
    }

  </script>

</body>
</html>
  1. Pas de variabele leeftijd aan naar jouw eigen leeftijd en test het resultaat
  2. Voeg een else if-blok toe dat controleert of iemand precies 17 is
  3. Maak daarna zelf een voorbeeld met een punt (bijvoorbeeld een toetscijfer) en geef een boodschap: onvoldoende / voldoende / goed

📤 Inleveren

  1. Maak een screenshot van je code én de console-output bij jouw leeftijd en punt
  2. Lever dit screenshot in via Teams of Canvas

🧠 Reflectie

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

💡 Wat is een event?

Een event is een gebeurtenis, zoals:

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

<button onclick="groet()">Klik hier</button>

<script>
  function groet() {
    console.log("Hoi! Je hebt op de knop geklikt.");
  }
</script>

Wordt je 'gek' van console.log? Je kunt ook alert gebruiken:

 alert("Je hebt geklikt!");

🛠️ Opdracht – Laat een knop iets doen

  1. Maak een nieuw HTML-bestand in Phoenix Code: knop.html
  2. Typ deze code als basis:
<!DOCTYPE html>
<html>
<head>
  <title>Gebeurtenis oefenen</title>
</head>
<body>

  <h1>Druk op de knop!</h1>

  <button onclick="toonBericht()">Klik hier</button>

  <script>
    function toonBericht() {
      console.log("Je hebt geklikt!");
    }
  </script>

</body>
</html>
  1. Verander de tekst in de functie naar je eigen boodschap
  2. Maak daarna nog een tweede knop met een andere functie, bijvoorbeeld: toonLeeftijd()
  3. 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

📤 Inleveren

  1. Maak een screenshot van je HTML én console na het klikken op de knoppen

6 Formulierinvoer gebruiken met JavaScript

🎯 Leerdoelen

Start Code

<!DOCTYPE html>
<html>
<head>
  <title>Leeftijd check</title>
  <style>
    body { font-family: sans-serif; }
    #output { font-weight: bold; margin-top: 15px; }
  </style>
</head>
<body>

  <h1>Voer je leeftijd in</h1>

  <input type="number" id="leeftijdInput" placeholder="Typ je leeftijd">
  <button>Check mijn leeftijd</button>

  <p id="output"></p>

  <script>
    function checkLeeftijd() {
      let leeftijd = Number(document.getElementById("leeftijdInput").value);
      let boodschap = "";

      if (leeftijd >= 18) {
        boodschap = "Je bent volwassen.";
      } else {
        boodschap = "Je bent een kind.";
      }

      document.getElementById("output").innerText = boodschap;
    }
  </script>

</body>
</html>

💡 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 wordtdocument.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

  1. Zorg ervoor dat de knop wordt gekoppeld aan de JavaScript functie checkLeeftijd(). 
  2. 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.
  3. Test op een leeftijd <0 en laat dan een boodscahp zien dat de onvoer niet geldig is.

🧠 Reflectie

📤 Inleveren

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

💡 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

<!DOCTYPE html>
<html>
<head>
  <title>Korting berekenen</title>
</head>
<body>

  <h1>Bereken de korting</h1>

  <p>Vul een bedrag en een kortingspercentage in:</p>

  <input type="number" id="bedragInput" placeholder="Bedrag in euro's">
  <input type="number" id="kortingInput" placeholder="Korting in %">
  <button onclick="berekenKorting()">Bereken</button>

  <script>
    function berekenKorting() {
      let bedrag = Number(document.getElementById("bedragInput").value);
      let korting = Number(document.getElementById("kortingInput").value);

      let kortingBedrag = bedrag * (korting / 100);
      let nieuwePrijs = bedrag - kortingBedrag;

      console.log("Origineel bedrag: €" + bedrag.toFixed(2));
      console.log("Korting: " + korting + "%");
      console.log("Nieuwe prijs: €" + nieuwePrijs.toFixed(2));
    }
  </script>

</body>
</html>

🛠️ Opdracht

  1. Test het formulier met verschillende bedragen en percentages
  2. Controleer of het resultaat klopt in de console
  3. 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.
  4. Maak CSS stijl aanpassingen naar eigen inzicht zodat de pagina er netjes uitziet.

🧠 Reflectie

📤 Inleveren

  1. De complete geteste en werkende HTML/JS/CSS in één HTML bestand.

--

Portfolio Challenge

1 Persoonlijke website – HTML & vormgeving

🎯 Leerdoelen

🛠️ 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:

Elke pagina bevat:

🛠️ Opdracht

  1. Bouw een pagina voor de homepage (index .html ).
  2. Bouw een pagina voor je profiel (profiel.html).
  3. Bouw een pagina voor je overmij (overmij.html).
  4. 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

📤 Inleveren

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)

 Vervolgpagina Over mij (overmij.html)

Vervolgpagina Mijn visie (visie.html)

📤 Inleveren

--

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:

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 <!DOCTYPE html> 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 <h1>...</h1> of <p>...</p>?

HTML werkt met tags. Die tags geven betekenis aan de tekst: <h1> betekent een kop (grote titel), <p> betekent een paragraaf (stukje tekst). Het zorgt voor structuur op je pagina.

5. Wat is het verschil tussen <strong> en <em> in HTML?

<strong> maakt tekst vet en betekent: dit is belangrijk. <em> maakt tekst schuin en betekent: leg hier nadruk op. Beide zorgen dat de tekst opvalt, maar op een andere manier.

6. Waarom gebruik je <br> in plaats van <p>?

Met <br> breek je alleen de regel af, bijvoorbeeld in een adres of opsomming. <p> is voor een heel nieuw stukje tekst, paragraaf (met ruimte ervoor en erna).

<br> staat voor " break", en <p> 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 <ul> en een <ol> lijst?

<ul> is een opsomming zonder volgorde (met bolletjes).

<ol> 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 <td> of <th> hebben.

10. Wat zou een formulier kunnen doen op een echte website?

Een formulier kan gegevens van een gebruiker opslaan of verzenden. Denk aan: aanmelden, iets bestellen, contact opnemen of een vraag stellen. In de les doet het formulier nog niets, maar met PHP of JavaScript kun je het echt laten werken.

CSS

1. Waarom gebruiken we CSS op een webpagina?

CSS zorgt ervoor dat een website er mooi uitziet. Je kunt kleuren, lettertypes en indeling aanpassen. Zonder CSS ziet een site er saai uit: alleen zwart-wit tekst zonder stijl.

2. Wat is het verschil tussen inline CSS en een style-blok?

Inline CSS staat direct in het HTML-element. Een style-blok zet je bovenin de pagina in de <head>. Daarmee kun je stijlen herhalen en overzichtelijker werken.

3. Waarom is het handig om een style-blok te gebruiken in plaats van inline CSS?

Met een style-blok kun je meerdere elementen tegelijk opmaken. Je hoeft dan niet elke keer dezelfde stijlregels te herhalen. Dat maakt je code netter en makkelijker aan te passen.

4. Wat is een class in CSS en waarom gebruik je dat?

Een class is een naam die je aan meerdere HTML-elementen kunt geven. Zo kun je dezelfde opmaak toepassen op verschillende plekken. Handig als je bijvoorbeeld meerdere blokken dezelfde kleur wilt geven.

5. Wat is het verschil tussen een element-selector, een class-selector en een id-selector?

Een element-selector (zoals p) geldt voor alle paragrafen. Een class-selector (zoals .belangrijk) geldt voor elementen met die class. Een id-selector (zoals #titel) is uniek en gebruik je maar één keer.

6. Wat is het box-model en waarom is het belangrijk?

Het box-model laat zien hoe ruimte om een element werkt: de tekst zit in het midden (content), dan padding, een border en buitenste ruimte heet margin. Hiermee bepaal je hoe groot een blok is en hoeveel ruimte ertussen zit.

7. Wat is het verschil tussen margin en padding?

Padding is de ruimte binnenin een element, tussen de tekst en de rand. Margin is de ruimte buiten een element, tussen het blok en andere blokken.

8. Waarom gebruik je flexbox voor layout?

Flexbox maakt het makkelijk om blokken netjes naast of onder elkaar te zetten. Je kunt ze makkelijk centreren of ruimte tussen de blokken maken, zonder moeilijke trucjes.

9. Wat betekent responsive design en hoe helpt flexbox daarbij?

Responsive design betekent dat je website er goed uitziet op elk scherm, groot of klein. Flexbox zorgt ervoor dat blokken automatisch aanpassen aan de schermgrootte.

10. Wat gebeurt er als je een element meerdere classes geeft?

Dan worden de stijlen van alle classes toegepast op dat element. Zo kun je stijlen combineren, bijvoorbeeld .menu en .speciaal. Dit geeft je veel controle over de opmaak.

JavaScript

1. Wat doet JavaScript op een webpagina?

JavaScript zorgt ervoor dat de webpagina dingen kan doen, zoals reageren op klikken of iets laten zien als je op een knop drukt. Zonder JavaScript is een pagina stil. Met JavaScript kun je hem interactief maken.

2. Wat is het verschil tussen HTML, CSS en JavaScript?

HTML is de inhoud, CSS is de opmaak (zoals kleuren en lettertypes) en JavaScript zorgt voor actie (zoals iets doen als je klikt of typt).

3. Waarom gebruiken programmeurs vaak de console?

De console laat zien wat er in de code gebeurt. Je kunt er fouten opsporen en controleren of je code werkt zoals je denkt. Het is een soort gereedschapskist.

4. Wat is een variabele en waarom gebruik je die?

Een variabele is een soort doosje waarin je iets bewaart, zoals een naam of een getal. Zo kun je er later nog iets mee doen of het laten zien.

5. Wat is het verschil tussen let en const?

Met let kun je het later nog veranderen, met const niet. Dus const gebruik je als iets altijd hetzelfde moet blijven.

6. Waarom zijn functies handig in je code?

Een functie is een stukje code dat je een naam geeft. Je kunt het steeds opnieuw gebruiken. Zo hoef je niet elke keer alles opnieuw te typen.

7. Wat is een parameter in een functie?

Een parameter is informatie die je aan een functie meegeeft. Zo kun je de functie flexibeler maken, bijvoorbeeld iemand begroeten met zijn eigen naam.

8. Wat is een voorwaarde (if-statement) en waar gebruik je die voor?

Een voorwaarde kijkt of iets waar is. Bijvoorbeeld: "Ben je 18 of ouder?" Als ja, dan doe je iets. Als nee, dan iets anders. Zo kun je keuzes maken in je code.

9. Wat is een event in JavaScript?

Een event is iets dat gebeurt, zoals een klik of iets typen. Met JavaScript kun je zeggen: als dit gebeurt, voer dan deze code uit.

Voorbeelden van events zijn: 'click', 'mouseover', 'keydown', ....

10. Hoe haal je invoer uit een formulier met JavaScript?

Je gebruikt document.getElementById("id").value om op te halen wat iemand in een vakje heeft getypt. Zo kun je iets met die invoer doen, zoals berekenen of controleren.

🛠️ Opdracht

Maak de kennis-check. 

📤 Inleveren

Aan het einde van de kennis-check ontvang je een certificaat. Maak een schermafdruk en lever deze in.