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 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?

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

--