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?

πŸ”° 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?

πŸ”° 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?

πŸ› οΈ 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!

πŸ”° 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?

πŸ”° Wat gaan we doen?

πŸ› οΈ 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.

πŸ› οΈ 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 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 basistekst 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.
  2. De paragraaf wordt gecentreerd, doe dit ook met deΒ h1.

πŸ“€ 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 beginne 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:

h1 {
  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
  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

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:

Voorbeeld:

.blok {
  border: 2px solid black;
  padding: 20px;
  margin: 15px;
  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 reflecteivragen in eigen woorden en lever dat in, in een txt- of PDF bestand.

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="gerecht">Pizza Margherita</div>
<div class="gerecht">Spaghetti Bolognese</div>
.gerecht {
  background-color: lightyellow;
  padding: 10px;
  border: 1px solid gray;
  margin-bottom: 10px;
}

πŸ› οΈ 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>

  .gerecht {
    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="gerecht">Pizza Margherita</div>
  <div class="gerecht special">Truffelpasta met parmezaan</div>
  <div class="gerecht">Ravioli met spinazie en ricotta</div>
  <div class="gerecht special">Chef’s surprise</div>

</body>
</html>
  1. Vul de CSS aan coor de class special
  2. Pas zelf de kleuren, marges of lettertypes aan zoals jij het mooier vindt
  3. Voeg minstens twee eigen gerechten toe aan de lijst
  4. Gebruik bij minstens twee items de extra class special voor extra opmaak

🧠 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;
      border-radius: 10px;
    }

    .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
  3. Geef de blokken afgeronde hoeken (border-radius) van bijvoorbeeld 15px

🧠 Reflectie

πŸ“€ Inleveren

  1. Maak een screenshot van jouw homepage met drie duidelijk gestylede blokken

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 ene respnisve 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.

πŸ“€ 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?

Wat kun je met JavaScript doen?

πŸ”§ 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 en een functie 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>

πŸ› οΈ 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

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 Formulieren en getElementById

In deze les leer je hoe je met JavaScript een waarde uit een formulier kunt ophalen. Zo kun je reageren op wat de gebruiker invoert, zoals een naam of leeftijd.

🎯 Leerdoelen

πŸ’‘ Wat is getElementById?

Met document.getElementById("...") zoek je een element op in je HTML via zijn id. Daarna kun je de waarde ophalen met .value.

let naam = document.getElementById("naamInput").value;
console.log("Welkom, " + naam);

Belangrijk:

πŸ› οΈ Opdracht – Begroet de gebruiker met zijn naam

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

  <h1>Wie ben jij?</h1>

  <input type="text" id="naamInput" placeholder="Typ je naam">
  <button onclick="begroet()">Klik op mij</button>

  <script>
    function begroet() {
      let naam = document.getElementById("naamInput").value;
      console.log("Hallo " + naam + "!");
    }
  </script>

</body>
</html>
  1. Probeer het formulier uit in je browser: typ een naam, klik op de knop en bekijk de console
  2. Pas de tekst aan zodat de begroeting anders klinkt ("Welkom terug", "Hey", ...)
  3. Voeg daarna een tweede invoerveld toe voor leeftijd, en toon ook die in de console

Voorbeeld uitbreiding:

<input type="number" id="leeftijdInput" placeholder="Typ je leeftijd">
let leeftijd = document.getElementById("leeftijdInput").value;
console.log("Je bent " + leeftijd + " jaar oud.");

🧠 Reflectie

πŸ“€ Inleveren

  1. Maak een screenshot van je code en console-uitvoer na invoer van naam en leeftijd

7 If-statements op formulierinput

In deze les leer je hoe je met JavaScript beslissingen kunt maken op basis van wat de gebruiker invoert. Bijvoorbeeld: als de gebruiker 18 jaar of ouder is, toon dan een andere boodschap dan wanneer de gebruiker jonger is.

🎯 Leerdoelen

πŸ’‘ If op invoer

We halen eerst de leeftijd op uit een inputveld met .value en gebruiken daarna if om een beslissing te maken:

let leeftijd = document.getElementById("leeftijdInput").value;

if (leeftijd >= 18) {
  console.log("Je bent volwassen");
} else {
  console.log("Je bent nog minderjarig");
}

πŸ› οΈ Opdracht – Leeftijd controleren

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

  <h1>Voer je leeftijd in</h1>

  <input type="number" id="leeftijdInput" placeholder="Typ je leeftijd">
  <button onclick="checkLeeftijd()">Check</button>

  <script>
    function checkLeeftijd() {
      let leeftijd = document.getElementById("leeftijdInput").value;
      leeftijd = Number(leeftijd); // omzetten naar getal

      if (leeftijd >= 18) {
        console.log("Je bent volwassen.");
      } else if (leeftijd >= 13) {
        console.log("Je bent een tiener.");
      } else {
        console.log("Je bent een kind.");
      }
    }
  </script>

</body>
</html>
  1. Probeer verschillende leeftijden in te voeren en bekijk de console
  2. Pas de boodschappen aan zodat ze iets meer over jou zeggen
  3. Maak daarna nog één extra else if-regel, bijvoorbeeld voor 65+: console.log("Je bent een senior");

🧠 Reflectie

πŸ“€ Inleveren

  1. Maak een screenshot van je HTML-code en van de console-uitvoer voor minstens 3 leeftijden

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;

πŸ› οΈ Opdracht – Reken de prijs met korting uit

  1. Maak een nieuw HTML-bestand in Phoenix Code: korting.html
  2. Typ deze code als basis:
<!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>
  1. Test het formulier met verschillende bedragen en percentages
  2. Controleer of het resultaat klopt in de console
  3. Pas eventueel de tekst aan naar jouw stijl

🧠 Reflectie

πŸ“€ Inleveren

  1. Voer minstens twee voorbeeldberekeningen uit en maak een screenshot van de console

--

Portfolio Challenge

O1 - Ontwerp de basis pagina's

Bouw een website die over jezelf gaat, de teksten van je website ga je tijdens de persoonlijk profileren lessen opstellen.

De opdracht:

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!

Inleveren bij deze opdracht:

  1. index.html
  2. profiel.html
  3. overmij.html
  4. visie.html

  5. screenshot van index.html in browser
  6. screenshot van profiel .html in browser
  7. screenshot van overmij.html in browser
  8. screenshot van visie.html in browser

O2 - Maak de website compleet

Plaats jouw opdrachten van Persoonlijk Profileren op jouw website. De vorm mag jezelf bepalen.

De vervolgpagina's vul je met onderstaande:

Vervolgpagina Mijn profiel:
- Plaats hier een foto van jezelf
- Schrijf hier je naam, leeftijd, de stad waar je woont

Vervolgpagina Over mij:
- Plaats hier de 6 lesopdrachten van persoonlijk profileren (tijdlijn, normen &waarden, DISC, kernkwadranten, SWOT analyse, 360 graden feedback)

Vervolgpagina Mijn visie:

Als je tevreden bent kun je de files inleveren en tonen aan een van de docenten.

Inleveren bij deze opdracht: