🧠 Wat ga je leren?

In deze challenge ontdek je hoe je ChatGPT gebruikt als programmeermaatje. Je leert:

  • Hoe je ChatGPT een simpel programma laat schrijven
  • Hoe je code kunt testen in CodePen.io
  • Hoe je feedback vraagt op fouten of uitbreidingen

We maken samen een simpel spelletje: Tic Tac Toe (boter-kaas-en-eieren) met HTML, CSS en JavaScript.

💻 Waarom is dit handig?

Of je nu beginner bent of al wat ervaring hebt: met ChatGPT kun je:

✅ Sneller prototypes bouwen
✅ Begrijpen wat er in je code gebeurt
✅ Leren door samen te werken met een AI

Zelfs als je geen programmeur bent, kun je dit proberen!

🛠️ Stap 1: Open een nieuw project op CodePen

  1. Ga naar https://codepen.io/pen
  2. Je ziet drie vensters: HTML, CSS en JS (JavaScript)
  3. Je hoeft geen account te maken om te testen

Dit is waar we de code van ChatGPT gaan plakken.

💬 Stap 2: Geef een goede prompt in ChatGPT

Gebruik bijvoorbeeld deze prompt:

"Schrijf een simpele versie van het spelletje Tic Tac Toe in HTML, CSS en JavaScript. Laat het spel in de browser werken zonder externe libraries."

ChatGPT genereert dan meestal alle drie de stukken code (HTML, CSS en JS).

📌 Tip: Vraag om uitleg bij elk onderdeel:

"Leg uit wat elk deel van de code doet."

🧪 Stap 3: Test de code in CodePen

  1. Kopieer het HTML-gedeelte in het HTML-venster van CodePen
  2. Kopieer het CSS-gedeelte in het CSS-venster
  3. Kopieer het JavaScript-gedeelte in het JS-venster
  4. Je spel zou nu moeten werken in de live preview 👇
❌ Werkt het niet? Vraag dan in ChatGPT:
"Er zit een fout in je code. Dit krijg ik als foutmelding: ..."

ChatGPT kan de fout uitleggen én verbeteren.

🔁 Stap 4: Breid het spel uit

Laat ChatGPT het spel uitbreiden:

  • "Voeg een restart-knop toe."
  • "Laat het spel stoppen als iemand wint."
  • "Maak het visueel iets mooier met schaduwen en kleuren."

Elke uitbreiding helpt je om te leren hoe front-end code werkt.

📎 Extra oefening

Vraag ChatGPT om iets anders:

"Maak een simpele website met een knop die elke keer dat je klikt een willekeurige kleur laat zien."

Of:

"Laat een kat heen en weer bewegen met CSS-animatie."

Test het in CodePen en ontdek wat er gebeurt!

🎯 Wat kun je hiermee?

  • Leren programmeren met AI-hulp
  • Sneller ideeën omzetten in werkende code
  • Fouten begrijpen én oplossen
  • Creatieve mini-projecten maken (games, animaties, tools)

🚀 Klaar voor de volgende?

In Challenge 6 laat je ChatGPT data analyseren en visualiseren – handig voor cijfers, statistieken of Excel!