← Terug naar het startscherm

🛠️ Hoe is deze site gemaakt?

Elke website, ook deze, is gemaakt van tekst. Die tekst is geschreven in drie talen die je computer begrijpt: HTML, CSS en JavaScript.

Een website is net een huis

Elke taal heeft zijn eigen taak. Vergelijk het maar met het bouwen van een huis:

HTMLde muren en kamers: wát staat er op de pagina
CSSde verf en meubels: hoe ziet het eruit
JavaScriptde stroom: wat gebeurt er als je klikt
HTML

HTML: de bouwstenen

Met HTML zet je dingen op de pagina: een kop, een stukje tekst, een plaatje of een knop. Je zet ze tussen labels (tags) met punthaken, zoals <h3> voor een kop. Een label gaat open en weer dicht, met een schuine streep: </h3>.

<h3>Mijn wezen</h3>
<p>Het heet Bliep en
houdt van <b>robots</b>.</p>
Zo ziet het eruit

Mijn wezen

Het heet Bliep en houdt van robots.

CSS

CSS: het uiterlijk

Met CSS bepaal je hoe alles eruitziet: kleuren, lettertypes, ronde hoeken en waar iets staat. Je kiest eerst wat je wilt veranderen (bijvoorbeeld alle koppen), en dan hoe.

.kaart {
  background: lichtpaars;
  border-radius: 16px;
  text-align: center;
}
h3 {
  color: paars;
}
Zo ziet het eruit

Mijn wezen

Het heet Bliep en houdt van robots.

Probeer de knop: zonder CSS is het dezelfde HTML, maar dan saai. Alle kleuren en vormen op deze site komen uit CSS.

JavaScript

JavaScript: het brein

Met JavaScript laat je de pagina iets doen. Bijvoorbeeld: als iemand op een knop klikt, tel er één bij op en laat dat zien. Zo werken ook de tafels, de coins en hulprobot Pixel.

let klikken = 0;

knop.onclick = () => {
  klikken = klikken + 1;
  teller.textContent = klikken;
};
Probeer het zelf
0

🤖 Hoe heeft meester Finn deze site gebouwd?

Eerlijk is eerlijk: meester Finn heeft deze site niet helemaal zelf getypt. Hij heeft hulp gehad van een AI-codeerassistent. Dat is een computerprogramma dat code kan schrijven als je in gewone woorden uitlegt wat je wilt. Bijvoorbeeld: "Maak een knop waarmee leerlingen een nieuw blokje kunnen kopen."

Maar de AI doet het niet alleen. Een website maken met AI gaat in drie stappen, en die doet meester Finn zelf:

  1. 1. Zelf bedenken

    Wat wil ik maken, voor wie, en waarom? Welke oefeningen helpen jullie echt? Dat weet de AI niet; dat weet de juf of meester die jullie kent.

  2. 2. Controleren

    Klopt wat de AI maakt? Zijn de antwoorden in de oefeningen goed? Is het veilig, en blijven jullie gegevens privé? Een AI kan namelijk ook fouten maken, net als mensen.

  3. 3. Testen

    Alles uitproberen, op een laptop én een Chromebook. En als er toch iets mis is, hoort meester Finn het graag. Leerlingen hebben via Pixel al echte fouten gemeld, die daarna zijn opgelost!

💡 AI is een handig gereedschap, net als een rekenmachine. Maar je moet nog steeds zelf nadenken: wat wil je maken, klopt het, en werkt het echt?

🎨 De Ontwerpstudio: dezelfde stappen als jij

In de Ontwerpstudio maak jij een spel of uitleg voor een kind uit groep 4. Daarbij doorloop je de ontwerpcyclus. Wist je dat meester Finn de Ontwerpstudio zelf ook zo heeft gemaakt?

  1. Plannen

    Eerst bedenken voor wie het is (jullie, groep 8) en wat je ervan moet leren: werken zoals een echte ontwerper. Pas daarna begon het bouwen.

  2. Bouwen

    De AI-codeerassistent hielp met het schrijven van de code. Meester Finn vertelde precies wat er moest gebeuren.

  3. Laten testen

    Alles werd uitgeprobeerd, ook als gast en op een Chromebook. Daarna testen jullie het in de klas.

  4. Verbeteren

    Wat niet goed werkte of niet duidelijk was, werd aangepast. Jullie tips via Pixel helpen daar ook bij!

💡 De AI hielp met de code. Maar wat je leert, hoe de lessen gaan en welke gegevens er wel en niet bewaard worden, heeft meester Finn zelf bepaald en gecontroleerd. Daarom vraagt de Ontwerpstudio bijvoorbeeld om een bijnaam en nooit om je echte naam.

🎨 Naar de Ontwerpstudio🛡️ Wat wordt er bewaard?

🔎 Weetjes over deze site

Elke pagina is een los bestand, zoals index.html voor het startscherm en tafels.html voor de tafels.

Je voortgang en coins worden bewaard in een database: een soort grote online tabel. Daarom zie je op elke Chromebook dezelfde coins.

Je ICT-wezen is gemaakt in 3D met een JavaScript-hulpmiddel dat three.js heet. Elk onderdeel is gemaakt van bollen, kegels en ringen.

Wil je de echte code van een pagina zien? Druk op een computer op Ctrl + U. Je ziet dan precies dezelfde soort HTML, CSS en JavaScript als hierboven.