rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add lesson files

Browse Source
This commit is contained in:
Tim Rijkse
2026-01-29 10:18:51 +01:00
commit 3118ceeb8e
23 changed files with 4729 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md Normal file
View File

@@ -0,0 +1,248 @@
# Bijlage A: Lesopdracht Les 1
## Van Schets naar Website met AI
**Cursus:** AI Fundamentals
**Les:** 1 - Introductie AI & Large Language Models
**Duur:** ~55 minuten
**Werkvorm:** Individueel
---
## Leerdoelen
Na deze opdracht kun je:
- Een idee visualiseren door te tekenen
- ChatGPT gebruiken om een schets om te zetten naar een gedetailleerde prompt
- Tech stack, kleuren en stijl specificeren in je prompt
- v0.dev gebruiken om UI-componenten te genereren
- Een project deployen naar Vercel
---
## Wat ga je maken?
Je gaat een **hero section** bouwen voor een fictieve website. Het bijzondere? **Je begint met een tekening op papier!**
Je tekening wordt, via ChatGPT en v0.dev, een echte, werkende website die online staat.
**Vereiste elementen in je hero section:**
- Headline (kop)
- Subtext (ondertitel/beschrijving)
- Call-to-action button
- Visueel element (afbeelding placeholder of illustratie)
---
## De Workflow
```
1. TEKEN je idee op papier
↓
2. Maak een FOTO van je tekening
↓
3. Upload naar CHATGPT + beschrijf je wensen
↓
4. ChatGPT maakt een gedetailleerde PROMPT
↓
5. Plak die prompt in V0.DEV → Website!
↓
6. DEPLOY naar Vercel
```
---
## Stappenplan
### Stap 1: Tekenen (10 min)
Pak pen en papier en teken je hero section. Je hoeft geen kunstenaar te zijn!
**Teken:**
- De layout (waar staat wat?)
- Tekst indicaties (schrijf "HEADLINE" of de echte tekst)
- Buttons
- Afbeelding placeholders (vierkant met X erdoor)
**Tips:**
- Simpele blokken en lijnen zijn genoeg
- Geef aan wat links en rechts staat
- Schrijf bij elementen wat ze zijn
### Stap 2: Foto maken (2 min)
Maak een duidelijke foto van je tekening met je telefoon.
- Zorg voor goede belichting
- Houd de camera recht boven de tekening
- Check of alles leesbaar is
### Stap 3: ChatGPT - Schets + Beschrijving (15 min)
Open ChatGPT en upload je foto. Voeg een gedetailleerde beschrijving toe.
**Gebruik dit template:**
```
Dit is een schets voor een hero section van mijn website.
Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
**Context:**
- Type website: [SaaS / Portfolio / Webshop / Blog / etc.]
- Naam/bedrijf: [Verzin een naam, bijv. "TaskFlow"]
- Doelgroep: [Bijv. startups, developers, consumenten]
**Tech stack:**
- Gebruik React met Tailwind CSS
- Maak het responsive (mobile-first)
**Kleuren:**
- Primary: [bijv. #2563EB (blauw) of beschrijf: "warm oranje"]
- Secondary: [optioneel]
- Of: [beschrijf het thema: "donker met neon accenten"]
**Stijl/Look & Feel:**
- [Kies: Modern / Minimalistisch / Speels / Corporate / Retro / etc.]
- [Extra: "Met subtiele animaties" of "Clean en zakelijk"]
Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
```
**Voorbeeld ingevuld:**
```
Dit is een schets voor een hero section van mijn website.
Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
**Context:**
- Type website: SaaS landingspagina
- Naam/bedrijf: TaskFlow
- Doelgroep: Startups en kleine bedrijven
**Tech stack:**
- Gebruik React met Tailwind CSS
- Maak het responsive (mobile-first)
**Kleuren:**
- Primary: #2563EB (blauw)
- Secondary: #1E40AF (donkerder blauw)
**Stijl/Look & Feel:**
- Modern en minimalistisch
- Professioneel maar toegankelijk
- Subtiele hover animaties op buttons
Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
```
### Stap 4: Prompt kopiëren (1 min)
ChatGPT genereert een gedetailleerde prompt. Kopieer deze volledig.
**Let op:** De prompt is in het Engels - v0.dev werkt het beste met Engelse prompts.
### Stap 5: v0.dev - Genereren (15 min)
1. Ga naar [v0.dev](https://v0.dev)
2. Log in met je Vercel/GitHub account
3. Plak de prompt van ChatGPT
4. Klik op genereren
5. Bekijk het resultaat
**Itereren:**
Als het resultaat niet perfect is, kun je verfijnen:
- "Make the button larger"
- "Add more padding"
- "Change the headline font to be bolder"
- "Add a subtle gradient background"
**Let op:** Je hebt ~7 gratis generaties per dag. Gebruik ze slim!
### Stap 6: Deploy naar Vercel (10 min)
**Vereist:** GitHub account (maak gratis aan op github.com als je die nog niet hebt)
**Deployment in 4 stappen:**
1. Klik op "Add Integration" in de linkerzijbalk van v0.dev
2. Koppel je GitHub account (eenmalig)
3. v0 maakt automatisch een repository aan in je GitHub
4. Klik op "Deploy" of "Publish"
**Resultaat:**
- Je krijgt een live URL: `jouw-project.vercel.app`
- Je code staat nu ook in GitHub
- Elke update in v0 → automatisch opnieuw gedeployd
**Problemen?**
- Geen GitHub account? Maak er nu een aan op github.com
- v0 vraagt niet om GitHub? Check of je bent ingelogd in v0.dev
- Deployment mislukt? Vraag de docent om hulp
---
## Op te leveren
Aan het einde van de les heb je:
1. **Je originele tekening:**
- Foto van je papieren schets
2. **ChatGPT conversatie:**
- Screenshot van je prompt + de gegenereerde output
- Noteer welke specificaties je meegaf (tech stack, kleuren, stijl)
3. **v0.dev project:**
- Screenshot van je gegenereerde hero section
- Eventuele iteratie-prompts die je gebruikte
4. **Live deployment:**
- Vercel URL van je gedeployde hero section
---
## Specificaties Checklist
Zorg dat je in je ChatGPT prompt het volgende hebt gespecificeerd:
| Element | Voorbeeld |
|---------|-----------|
| ✅ Tech stack | "React met Tailwind CSS" |
| ✅ Kleuren | "#2563EB" of "warm oranje thema" |
| ✅ Stijl | "Modern, minimalistisch" |
| ✅ Type website | "SaaS landingspagina" |
| ✅ Responsive | "Mobile-first design" |
---
## Beoordeling
Deze opdracht wordt niet formeel beoordeeld, maar is essentiële oefening voor de rest van de cursus.
**Waar let de docent op:**
- Heb je alle stappen doorlopen?
- Heb je je specificaties duidelijk gecommuniceerd?
- Lijkt het eindresultaat op je originele schets?
- Kun je uitleggen hoe de workflow werkt?
---
## Hulp nodig?
- Vraag je buurman/buurvrouw
- Steek je hand op voor de docent
- Check de officiële documentatie: [v0.dev/docs](https://v0.dev/docs)
---
## Bonus: Extra uitdaging
Klaar en tijd over? Probeer:
1. **Tweede component:** Maak een pricing table of features section
2. **Andere stijl:** Genereer dezelfde schets met een compleet andere look & feel
3. **Iteratie experiment:** Kijk hoeveel je kunt veranderen met follow-up prompts in v0
---
*Succes en veel plezier met je eerste AI-gegenereerde website!*

193
Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md Normal file
View File

@@ -0,0 +1,193 @@
# Bijlage B: Huiswerkopdracht Les 1
## Reflectie, Use Cases en Tweede Schets
**Cursus:** AI Fundamentals
**Les:** 1 - Introductie AI & Large Language Models
**Geschatte tijd:** ~2-3 uur
**Deadline:** Voor aanvang les 2
---
## Inleiding
In de les heb je kennisgemaakt met AI en Large Language Models. Je hebt de workflow geleerd: van een tekening op papier, via ChatGPT, naar een werkende website in v0.dev. Met deze huiswerkopdracht ga je dieper nadenken over wat je hebt geleerd en pas je de workflow nog een keer toe.
---
## Deel 1: Reflectie (500 woorden)
Schrijf een reflectie over je eerste ervaringen met AI-tools voor development.
**Structuur:**
### Wat heb ik geleerd?
Beschrijf de belangrijkste inzichten uit de les. Denk aan:
- Wat wist je al over AI voordat je begon?
- Wat was nieuw of verrassend?
- Hoe kijk je nu anders naar AI dan voor de les?
### Mijn ervaring met de workflow
Reflecteer op de schets-naar-website workflow:
- Hoe voelde het om te beginnen met tekenen?
- Werkte ChatGPT goed als "vertaler" van je schets naar prompt?
- Hoe was het resultaat in v0.dev vergeleken met je verwachting?
- Wat zou je volgende keer anders doen?
### Kritische kanttekeningen
Wees kritisch:
- Wat zijn mogelijke risico's of beperkingen die je ziet?
- Wanneer zou je AI NIET gebruiken?
- Welke ethische overwegingen komen bij je op?
### Vooruitblik
Kijk vooruit:
- Hoe denk je AI in te gaan zetten in je werk/studie?
- Welke vaardigheden wil je nog ontwikkelen?
**Eisen:**
- Minimaal 500 woorden
- Persoonlijk en reflectief (niet alleen opsommen)
- In je eigen woorden (niet door AI laten schrijven!)
---
## Deel 2: AI Use Cases (5 stuks)
Bedenk **vijf concrete use cases** waarin AI jou kan helpen in je werk als (frontend) developer.
**Per use case beschrijf je:**
1. **De situatie:** Welk probleem of welke taak?
2. **De AI-toepassing:** Welke tool zou je gebruiken en hoe?
3. **Het verwachte resultaat:** Wat levert het op?
4. **Mogelijke valkuilen:** Waar moet je op letten?
**Voorbeeld:**
| **Use Case** | Responsive navigation menu maken |
|---|---|
| **Situatie** | Ik moet een hamburger menu bouwen dat werkt op alle schermformaten |
| **AI-toepassing** | Schets tekenen → ChatGPT voor prompt → v0.dev voor generatie |
| **Verwacht resultaat** | Werkende code die ik kan aanpassen aan mijn design |
| **Valkuilen** | ARIA-labels checken, testen of het echt responsive is |
**Denk aan use cases zoals:**
- Code schrijven of debuggen
- Documentatie genereren
- Designs omzetten naar code
- Tests schrijven
- Code reviews
- Learning nieuwe technologieën
- Refactoring
- Performance optimalisatie
---
## Deel 3: Tweede Schets → Website
Doorloop de workflow van de les **nog een keer**, maar nu voor een ander component.
### Stap 1: Kies een component
Kies een van deze opties (of verzin zelf iets):
- Features section (3-4 features met iconen)
- Pricing table (3 prijsplannen)
- Testimonials sectie
- Contact formulier
- Footer met links
- About section met team foto's
### Stap 2: Teken op papier
Maak een schets van je gekozen component. Denk aan:
- Layout (waar staat wat?)
- Tekst indicaties
- Buttons en links
- Afbeelding placeholders
### Stap 3: ChatGPT prompt
Upload je schets naar ChatGPT en beschrijf:
- **Tech stack:** React met Tailwind CSS
- **Kleuren:** Kies een kleurenschema (mag anders zijn dan de les)
- **Stijl:** Beschrijf de look & feel
- **Doel:** Voor welk type website is dit?
### Stap 4: v0.dev genereren
Gebruik de gegenereerde prompt in v0.dev.
### Stap 5: Deploy (optioneel)
Als je tijd hebt, deploy naar Vercel.
### Documentatie
Lever de volgende screenshots/foto's aan:
1. Foto van je papieren schets
2. Screenshot van je ChatGPT prompt
3. Screenshot van de gegenereerde ChatGPT output
4. Screenshot van het v0.dev resultaat
5. (Optioneel) Vercel URL
---
## Inleveren
Lever de volgende onderdelen in via Teams chat:
1. **Reflectie** (Word/PDF/Markdown)
- Minimaal 500 woorden
- Duidelijke structuur met kopjes
2. **Use Cases document** (Word/PDF/Markdown)
- 5 use cases in tabel of lijst formaat
3. **Tweede Schets documentatie**
- Foto van je schets
- Screenshots van ChatGPT conversatie
- Screenshot van v0.dev resultaat
- (Optioneel) Vercel URL
**Bestandsnaam:** `[Achternaam]_Les1_Huiswerk.pdf` of stuur los via Teams
---
## Beoordelingscriteria
| **Onderdeel** | **Punten** | **Criteria** |
|---|---|---|
| Reflectie | 35% | Diepgang, persoonlijke inzichten, kritische houding |
| Use Cases (5x) | 25% | Relevantie, creativiteit, volledigheid |
| Tweede Schets | 40% | Kwaliteit schets, specificaties in prompt, eindresultaat |
**Let op:** Deze opdracht wordt beoordeeld op **eigen inbreng**. Reflecties die duidelijk door AI zijn geschreven worden niet geaccepteerd.
---
## Tips
- **Start vroeg** - Gun jezelf tijd om na te denken
- **Wees eerlijk** - Er zijn geen foute reflecties, het gaat om jouw ervaring
- **Experimenteer** - Probeer verschillende specificaties in je prompt
- **Wees specifiek** - Geef duidelijke kleuren, stijl en tech stack mee
- **Documenteer goed** - Screenshots maken terwijl je bezig bent is makkelijker dan achteraf
---
## Checklist Tweede Schets
Zorg dat je bij je tweede schets het volgende hebt gespecificeerd:
| Element | Check |
|---------|-------|
| Tech stack (React + Tailwind) | ☐ |
| Kleuren (hex codes of beschrijving) | ☐ |
| Stijl/Look & Feel | ☐ |
| Type website/doelgroep | ☐ |
| Responsive design | ☐ |
---
## Vragen?
Heb je vragen over de opdracht? Stuur een bericht via Teams.
---
*Succes!*

719
Les01-Introductie-AI/Les01-Docenttekst.md Normal file
View File

@@ -0,0 +1,719 @@
# Docenttekst Les 1: Introductie AI & Large Language Models
> **Totale lesduur:** 3 uur (180 minuten)
> **Spreektijd docent:** ~70 minuten
> **Format:** Volledig uitgeschreven script per slide
> **Kernworkflow:** Schets op papier → ChatGPT → v0.dev → Website
---
## BLOK 1: WELKOM & INTRODUCTIE (13 minuten)
### Slide 1: Welkomstslide
**[0:00 - 0:30]**
*[Wacht tot iedereen zit, maak oogcontact]*
"Goedemiddag allemaal, welkom bij de eerste les van AI Fundamentals. Fijn dat jullie er zijn. Neem even de tijd om je laptop open te klappen en je spullen klaar te leggen."
*[Korte pauze van 20-30 seconden]*
---
### Slide 2: Planning
**[0:30 - 1:30]**
"Voordat we beginnen, laat ik jullie even zien wat we vandaag gaan doen. Zo weten jullie waar je aan toe bent."
*[Wijs naar de tijdsblokken op de slide]*
"We beginnen met theorie over wat AI is en hoe het werkt. Daarna gaan we praktisch aan de slag met ChatGPT - ik laat zien hoe je die tool effectief gebruikt."
"Dan komt het spannende deel: prompt engineering. Hoe stel je de juiste vraag? Hoe geef je aan welke technologie, kleuren en stijl je wilt?"
*[Met nadruk]*
"En dan de grote finale: ik ga live demonstreren hoe je van een **tekening op papier** naar een **werkende website** gaat. En daarna gaan jullie dat zelf doen."
"Jullie gaan vandaag letterlijk een website bouwen die begint als een schets op papier. Dat is het doel."
---
### Slide 3: Voorstellen docent
**[1:30 - 3:00]**
"Laat ik mezelf even voorstellen. Mijn naam is [NAAM] en ik ben jullie docent voor deze leerlijn. Ik werk zelf als developer en gebruik dagelijks AI-tools in mijn werk."
"Wat ik heel gaaf vind aan dit vak is dat het zo snel verandert - wat vandaag cutting edge is, kan over drie maanden alweer achterhaald zijn. Dat maakt het ook uitdagend om les te geven, maar vooral heel leuk."
"Ik geef hier twee keer per week les en daarnaast werk ik aan mijn eigen projecten. Als je vragen hebt buiten de les om, kun je me altijd bereiken via Teams."
---
### Slide 4: Kennismaking
**[3:00 - 8:00]**
"Maar genoeg over mij - ik ben veel nieuwsgieriger naar jullie. Laten we een snelle ronde doen. Vertel kort je naam en geef antwoord op deze vraag..."
*[Wijs naar de slide]*
"...heb je al eens ChatGPT of een andere AI-tool gebruikt? En zo ja, waarvoor?"
*[Laat iedereen kort reageren - ~5 minuten]*
"Mooi, ik zie dat de meesten van jullie al wel eens met AI hebben gewerkt. Dat is een goed startpunt."
---
### Slide 5: De Leerlijn AI Developer
**[8:00 - 10:00]**
"Even een vooruitblik op wat we de komende 18 weken gaan doen."
*[Wijs naar de drie hoofdstukken]*
"We werken in drie fases. De eerste drie lessen gaan over AI Fundamentals. Daarna, les 4 tot 9, gaan we naar AI Driven Development - echte tools en workflows. En het laatste deel bouwen we richting full-stack applicaties."
"Maar dat is ver weg. Vandaag focussen we op de basis - en vooral op de workflow van schets naar website."
---
### Slide 6: Accounts check
**[10:00 - 13:00]**
*[Iets serieuzer toon]*
"Oké, even een praktisch punt. Hebben jullie allemaal een account aangemaakt bij ChatGPT?"
*[Scan de groep, vraag om handopsteken]*
"Wie heeft nog geen account? Oké, maak die dan nu even aan op chat.openai.com. Het is gratis."
"Je hebt ook een GitHub account nodig voor later vandaag. Als je die niet hebt, maak die ook even aan op github.com."
*[Geef 2-3 minuten]*
"Is iedereen zover? Mooi, dan gaan we de diepte in."
---
## BLOK 2: WAT IS AI? (20 minuten)
### Slide 7: Wat is Artificial Intelligence?
**[13:00 - 16:00]**
"Oké, eerste grote vraag: wat ís eigenlijk AI?"
"AI, of Artificial Intelligence, is een verzamelnaam. Het zijn computersystemen die taken kunnen uitvoeren waarvoor normaal menselijke intelligentie nodig is."
*[Laat dit even bezinken]*
"Denk aan: patronen herkennen, beslissingen nemen, taal begrijpen. Dingen die wij mensen doen met ons brein."
"Nu is er een belangrijk onderscheid. Er is Narrow AI - AI die heel goed is in één specifieke taak. ChatGPT is daar een voorbeeld van. En dan heb je General AI - dat zou AI zijn die alles kan wat een mens kan. Dat bestaat nog niet."
---
### Slide 8: Hoe werken Large Language Models?
**[16:00 - 20:00]**
"Nu de vraag die iedereen heeft: hoe werkt ChatGPT eigenlijk?"
"Een Large Language Model - een LLM - is getraind op gigantische hoeveelheden tekst. En met gigantisch bedoel ik: een groot deel van het internet."
"Het doel? Eigenlijk heel simpel: het volgende woord voorspellen."
*[Laat dit even landen]*
"Ja, echt. ChatGPT, Claude, al die tools - in de kern zijn het voorspelmachines. Ze krijgen tekst en voorspellen wat er logischerwijs daarna komt."
"En ze doen dat zo goed, dat het lijkt alsof ze 'begrijpen' wat je zegt. Maar er zit geen bewustzijn in. Het is geavanceerde patroonherkenning."
---
### Slide 9: Next-Token Prediction
**[20:00 - 23:00]**
"Laat me dit concreet maken met een voorbeeld."
*[Wijs naar de slide]*
"Als ik aan ChatGPT vraag: 'De kat zat op de...' - wat denk je dat hij zegt?"
*[Wacht op antwoorden]*
"Precies, grote kans 'mat'. Waarom? Omdat in alle tekst waarop hij getraind is, die combinatie heel vaak voorkomt."
"Dit verklaart ook waarom je soms hele goede antwoorden krijgt en soms onzin. Er zit randomheid in."
---
### Slide 10: Hallucinaties
**[23:00 - 28:00]**
"En dit brengt me bij een belangrijk punt: hallucinaties."
*[Iets serieuzere toon]*
"AI kan dingen verzinnen. Compleet uit de lucht gegrepen informatie, maar het klinkt heel overtuigend."
"Vraag ChatGPT naar een wetenschappelijk paper, en hij kan je een titel, auteurs en samenvatting geven van iets dat niet bestaat."
"Dit is waarom je AI-output altijd moet checken. Vooral bij feiten, cijfers, namen, referenties."
"Vragen tot zover?"
*[Beantwoord eventuele vragen - 2-3 minuten]*
---
## BLOK 3: HET AI-LANDSCHAP (12 minuten)
### Slide 11: De Grote Spelers
**[33:00 - 36:00]**
"Oké, nu je begrijpt hoe LLMs werken, laten we kijken welke er zijn."
*[Wijs naar de tabel]*
"Dit zijn de grote namen. ChatGPT van OpenAI - dat kennen de meesten. Claude van Anthropic. Gemini van Google. En Grok van xAI."
"Ze hebben allemaal hun sterke punten. Vandaag focussen we vooral op ChatGPT."
---
### Slide 12: Gratis vs Betaald
**[36:00 - 40:00]**
"Even een belangrijk punt: heb je de betaalde versie nodig?"
"Het korte antwoord: nee, niet voor deze cursus. De gratis versie van ChatGPT draait op GPT-4o, en dat is al behoorlijk krachtig."
"Mijn advies: begin gratis. Als je later merkt dat je tegen limieten aanloopt, kun je altijd upgraden."
---
### Slide 13: Welke tool voor welke taak?
**[40:00 - 45:00]**
"Welke tool is het beste? Dat hangt af van wat je wilt doen."
*[Loop door de tabel]*
"Voor snelle code snippets zijn ChatGPT en Claude beide prima. Voor lange documenten is Claude beter. En voor UI componenten - wat we straks gaan doen - gebruiken we v0.dev."
---
## BLOK 4: CHATGPT IN DE PRAKTIJK (25 minuten)
### Slide 14: ChatGPT Interface
**[45:00 - 48:00]**
*[Energieke toon]*
"Oké, open allemaal ChatGPT op je laptop. Ga naar chat.openai.com en log in."
*[Wacht tot iedereen de pagina open heeft - 1 minuut]*
"Iedereen erin? Mooi. Laat me jullie even rondleiden door de interface."
*[Open ChatGPT op het projectiescherm]*
"In het midden heb je het chatvenster. Links zie je je chat geschiedenis. Bovenaan kun je het model kiezen. En rechtsonder vind je instellingen."
---
### Slide 15: Model Kiezen
**[48:00 - 51:00]**
"Kijk even bovenaan je scherm. Daar staat welk model je gebruikt."
"Je hebt een paar opties. GPT-4o is de standaard - snel en voor de meeste taken prima. GPT-4o with canvas is speciaal voor documenten. En GPT-4 is het krachtigste model als je Plus hebt."
"Voor vandaag is GPT-4o perfect."
---
### Slide 16: Tijdelijke Chat
**[51:00 - 54:00]**
"Nu iets belangrijks: tijdelijke chat."
*[Demonstreer waar dit staat]*
"Als je dit aanzet, wordt je gesprek niet opgeslagen en niet gebruikt om het model te trainen. Wanneer gebruik je dit? Als je met gevoelige of werk-gerelateerde informatie werkt."
---
### Slide 17: Afbeeldingen Analyseren
**[54:00 - 58:00]**
*[Dit is een belangrijke slide voor de workflow]*
"Nu een feature die cruciaal is voor wat we straks gaan doen: ChatGPT kan afbeeldingen lezen."
*[Demonstreer live]*
"Ik upload hier een schets..."
*[Upload een simpele tekening]*
"En ik vraag: 'Wat zie je op deze afbeelding?'"
*[Wacht op response]*
"Kijk, hij beschrijft precies wat hij ziet. Dit heet image-to-text, of vision."
*[Met nadruk]*
"Dit gaan we straks gebruiken om jullie schetsen om te zetten naar gedetailleerde prompts. ChatGPT wordt onze 'vertaler' van tekening naar technische specificaties."
---
### Slide 18: Bestanden Uploaden
**[58:00 - 61:00]**
"Hetzelfde geldt voor documenten. Je kunt een PDF uploaden, een Word document, een code bestand."
*[Demonstreer kort]*
"Dit is handig voor documentatie of lange bestanden."
---
### Slide 19: Custom Instructions
**[61:00 - 64:00]**
"Dan nog iets nuttigs: Custom Instructions."
*[Ga naar instellingen → Personalisatie]*
"Hier kun je permanent aangeven wie je bent en hoe ChatGPT moet antwoorden. Bijvoorbeeld: 'Ik ben een frontend developer. Ik werk met React en Tailwind.'"
"Dit scheelt tijd als je steeds dezelfde context moet geven."
---
### Slide 20: Het Geheugen
**[64:00 - 66:00]**
"Kort over geheugen. ChatGPT onthoudt je eerdere chats, maar gebruikt die informatie niet automatisch in nieuwe chats."
"Tip: start een nieuwe chat voor een nieuw onderwerp."
---
### Slide 21: Praktijk Oefening
**[66:00 - 70:00]**
"Oké, nu jullie. Vijf minuten om te experimenteren."
"Drie dingen: start een chat, upload een afbeelding - maak een foto van iets -, en kijk waar de Custom Instructions staan."
*[Geef 5 minuten - loop rond]*
"Oké, tijd. Wie heeft iets interessants ontdekt?"
*[Laat 1-2 studenten kort delen]*
---
## BLOK 5: PROMPT ENGINEERING (15 minuten)
### Slide 22: Wat is Prompt Engineering?
**[70:00 - 73:00]**
"Nu komen we bij een cruciaal onderdeel: prompt engineering."
"Een prompt is simpelweg de instructie die je aan AI geeft. En hier is het belangrijke inzicht: de kwaliteit van je antwoord hangt direct af van de kwaliteit van je vraag."
"Als je een vage vraag stelt, krijg je een vaag antwoord. Als je specifiek bent, krijg je specifieke output."
---
### Slide 23: Slechte vs Goede Prompt
**[73:00 - 76:00]**
"Laat me het verschil laten zien."
*[Wijs naar de slechte prompt]*
"Dit is wat de meeste mensen doen: 'Maak een button'. Drie woorden. Welke taal? Welke stijl? De AI moet alles gokken."
*[Wijs naar de goede prompt]*
"En dit is beter: 'Maak een React button component met Tailwind CSS. Primary styling, blauw, met hover en loading state.'"
"Zie je het verschil? Je specificeert de technologie, de features, de stijl."
---
### Slide 24: Prompt Framework
**[76:00 - 78:00]**
"Er is een framework dat helpt. Vier elementen."
"Eén: Rol. 'Je bent een senior frontend developer'. Twee: Context. 'Je werkt aan een SaaS landingspagina'. Drie: Taak. 'Maak een hero section'. Vier: Format. 'Gebruik React en Tailwind.'"
---
### Slide 25: Tech Stack Specificeren
**[78:00 - 81:00]**
*[Dit is een belangrijke nieuwe slide]*
"Nu iets dat jullie moeten begrijpen: tech stack."
"Wat is een tech stack? De technologieën waarmee je bouwt. Voor deze cursus gebruiken we vooral React en Tailwind CSS."
*[Leg kort uit]*
"React is een JavaScript framework voor user interfaces. Tailwind CSS is een utility-first CSS framework - je bouwt styling met classes."
"Waarom is dit belangrijk? Als je tegen AI zegt 'maak een button', weet hij niet of je HTML, React, Vue, of iets anders wilt. Door je tech stack te specificeren, krijg je bruikbare code."
*[Met nadruk]*
"En goed nieuws: v0.dev genereert automatisch React met Tailwind. Maar je moet het wel meegeven in je prompts!"
---
### Slide 26: Kleuren en Look & Feel
**[81:00 - 84:00]**
"Het volgende dat je moet specificeren: kleuren en stijl."
*[Loop door de opties]*
"Kleuren kun je meegeven als hex codes - bijvoorbeeld #2563EB voor blauw - of beschrijvend, zoals 'warm oranje thema'."
"Stijl beschrijf je met woorden: modern, minimalistisch, speels, corporate, retro..."
"En je kunt referenties gebruiken: 'In de stijl van Stripe.com' vertelt de AI heel veel."
*[Voorbeeld]*
"Een complete specificatie zou zijn: 'Blauw kleurenschema met primary #2563EB. Stijl: modern en minimalistisch. Geschikt voor een B2B SaaS startup.'"
---
### Slide 27: Prompting Tips
**[84:00 - 85:00]**
"Nog even de tips op een rij: geef een rol, wees specifiek, specificeer je tech stack, beschrijf de look & feel, geef voorbeelden als je kunt, en itereer."
"Onthoud: garbage in, garbage out."
---
## BLOK 6: LIVE DEMO V0.DEV (27 minuten)
### Slide 28: Introductie v0.dev
**[85:00 - 88:00]**
*[Energieke toon]*
"Nu wordt het echt leuk. We gaan kijken naar v0.dev."
"Dit is een tool van Vercel - het bedrijf achter Next.js. En het is een gamechanger."
*[Open v0.dev op je scherm]*
"Wat doet v0? Je beschrijft wat je wilt, of je uploadt een schets, en v0 genereert werkende React code met Tailwind CSS. Direct een preview. Direct deploybaar."
"Maar vandaag leren jullie de slimme workflow."
---
### Slide 29: De Slimme Workflow
**[88:00 - 90:00]**
*[Wijs naar het diagram]*
"Dit is de workflow die jullie vandaag gaan leren. Vijf stappen."
"Stap één: je TEKENT je idee op papier. Gewoon pen en papier."
"Stap twee: je maakt een FOTO van je tekening."
"Stap drie: je upload die foto naar CHATGPT en beschrijft je wensen - tech stack, kleuren, stijl."
"Stap vier: ChatGPT maakt een gedetailleerde PROMPT voor je."
"Stap vijf: je plakt die prompt in V0.DEV en je hebt een website!"
*[Leg uit waarom]*
"Waarom doen we het zo? Omdat v0 beperkte gratis credits heeft - ongeveer zeven generaties per dag. ChatGPT is 'gratis'. Door eerst in ChatGPT je prompt te optimaliseren, verspil je geen v0 credits aan slechte prompts."
---
### Slide 30: Live Demo - Schets Maken
**[90:00 - 93:00]**
*[Pak pen en papier - dit is live!]*
"Oké, ik ga dit nu live doen. Kijk mee."
*[Teken terwijl je praat - 2 minuten]*
"Ik teken een hero section. Links een groot tekstvak - hier komt de headline. Daaronder een kleiner vak voor de ondertitel. En daaronder een rechthoek - dat wordt de button."
"Rechts teken ik een groot vierkant met een X erdoor - dat is een placeholder voor een afbeelding."
*[Toon je tekening]*
"Kijk, het is niet mooi. Het hoeft ook niet mooi te zijn. Het gaat erom dat je de layout communiceert. Waar staat wat?"
---
### Slide 31: Live Demo - Foto naar ChatGPT
**[93:00 - 100:00]**
*[Maak foto en upload naar ChatGPT]*
"Ik maak een foto met mijn telefoon... even uploaden naar ChatGPT..."
*[Typ je prompt]*
"Nu typ ik mijn beschrijving. Let op wat ik allemaal meegeef:"
*[Typ hardop]*
"Dit is een schets voor een hero section van mijn website.
Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
Tech stack: React met Tailwind CSS
Kleuren: Blauw thema met primary #2563EB
Stijl: Modern, minimalistisch, professioneel
Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
*[Druk op enter en wacht]*
"Kijk, ChatGPT analyseert mijn schets en maakt er een gedetailleerde Engelse prompt van. Met alle specificaties die ik meegaf."
*[Lees een stuk voor]*
"Hij beschrijft de layout, de kleuren, de stijl... precies wat we nodig hebben voor v0."
---
### Slide 32: Live Demo - Prompt naar v0
**[100:00 - 106:00]**
*[Kopieer en ga naar v0.dev]*
"Ik kopieer deze prompt... ga naar v0.dev... en plak hem hier."
*[Druk op enter]*
"Het duurt even... dertig seconden ongeveer..."
*[Resultaat verschijnt]*
"En kijk! We hebben een hero section. Links de tekst met headline en button, rechts een afbeelding placeholder. Precies wat ik tekende!"
*[Klik op Code tab]*
"En hier is de code. Clean React, Tailwind classes. Dit kun je direct in je project gebruiken."
---
### Slide 33: Live Demo - Itereren
**[106:00 - 109:00]**
"Maar we zijn niet klaar. De kracht is dat je kunt itereren."
*[Typ een follow-up]*
"Ik typ: 'Make the button larger and add a subtle hover animation.'"
*[Wacht op generatie]*
"Kijk - de button is groter. Dit is hoe je met AI werkt. Je gaat in gesprek. Je verfijnt."
---
### Slide 34: Live Demo - Deployen
**[109:00 - 112:00]**
"Laatste stap: hoe krijg je dit online?"
*[Wijs naar de zijbalk]*
"Hier zie je 'Add Integration'. Daar klik je op. V0 vraagt je om je GitHub account te koppelen. Als je dat doet, maakt v0 automatisch een repository aan."
"Dan klik je op 'Deploy'... en v0 pusht je code naar GitHub én deployt naar Vercel."
*[Wacht op deployment]*
"En kijk - we hebben een live URL. Dit is nu een echte website die iedereen kan bezoeken."
*[Met nadruk]*
"Van een tekening op papier naar een live website. In minder dan tien minuten."
---
## BLOK 7: HANDS-ON OPDRACHT (53 minuten)
### Slide 35: Opdracht Introductie
**[112:00 - 117:00]**
"De opdracht die jullie gaan doen is precies wat ik net deed."
*[Pak papier en pennen - deel uit als nodig]*
"Jullie gaan een hero section bouwen. Maar let op: jullie beginnen met TEKENEN."
*[Loop door de stappen]*
"Stap één: teken je hero section op papier. Stap twee: maak een foto. Stap drie: upload naar ChatGPT en beschrijf je wensen - en vergeet niet: tech stack, kleuren, stijl! Stap vier: kopieer de prompt. Stap vijf: plak in v0.dev. Stap zes: deploy naar Vercel."
*[Benodigdheden check]*
"Heeft iedereen papier en een pen? Nee? Hier, pak even..."
*[Praktische info]*
"Je hebt 50 minuten. Werk individueel. Documenteer je stappen met screenshots. Als je vastloopt, vraag hulp."
---
### Slide 36: Aan de slag
**[117:00 - 165:00]**
"Succes!"
*[Studenten werken - loop rond en help waar nodig]*
**Hulp bieden - let op deze punten:**
- Tekenen ze daadwerkelijk? Of slaan ze die stap over?
- Geven ze tech stack, kleuren en stijl mee in ChatGPT?
- Problemen met v0.dev account of deployment?
**Tussentijdse check [135:00]:**
"Even een snelle check. Steek je hand op als je al een prompt uit ChatGPT hebt."
*[Tel handen]*
"Mooi. Wie is al in v0.dev aan het genereren?"
*[Help kort indien nodig]*
"Nog 30 minuten. Focus op in ieder geval je schets, ChatGPT prompt, en v0 generatie. De deployment is bonus als je tijd hebt."
*[Studenten werken door]*
---
## BLOK 8: AFSLUITING (15 minuten)
### Slide 37: Samenvatting
**[165:00 - 168:00]**
"Oké, tijd om af te ronden. Sluit je werk af waar je bent."
*[Wacht tot iedereen aandacht geeft]*
"Laten we even terugkijken. Wat hebben we vandaag gedaan?"
"We hebben geleerd hoe LLMs werken. We hebben ChatGPT praktisch gebruikt. We hebben prompt engineering gehad - specifiek: hoe je tech stack, kleuren en stijl specificeert."
*[Met nadruk]*
"En het belangrijkste: jullie hebben de workflow geleerd. Schets op papier, foto naar ChatGPT, prompt naar v0, en live op het internet."
---
### Slide 38: Huiswerk
**[168:00 - 172:00]**
"Voor volgende week heb je huiswerk."
*[Wijs naar de slide]*
"Je schrijft een reflectie van 500 woorden over je eerste ervaring met AI tools. Je bedenkt vijf concrete use cases voor AI in jouw werk."
*[Met nadruk]*
"En je doorloopt de workflow nog een keer met een ANDERE component. Maak een tweede schets - dit keer voor een pricing table, of een features section, of iets anders. Doorloop alle stappen opnieuw."
"Documenteer met screenshots. Lever in via Teams chat."
---
### Slide 39: Volgende Les
**[172:00 - 175:00]**
"Volgende week gaan we dieper in op prompt engineering. Geavanceerde technieken. Chain of thought. Few-shot learning."
"Zorg dat je huiswerk af is en dat je ChatGPT account werkt."
---
### Slide 40: Afsluiting
**[175:00 - 180:00]**
"Zijn er nog vragen?"
*[Beantwoord eventuele vragen - 3 minuten max]*
"Geen vragen? Dan wil ik jullie bedanken voor jullie aandacht. Het was een goede eerste les."
"En vergeet niet: jullie hebben vandaag een website gebouwd die begon als een tekening. Dat is best bijzonder."
"Tot volgende week!"
*[Einde les]*
---
## APPENDIX: Timing Overzicht
| Blok | Onderwerp | Start | Eind | Duur |
|------|-----------|-------|------|------|
| 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min |
| 2 | Wat is AI? | 0:13 | 0:33 | 20 min |
| 3 | AI Landscape | 0:33 | 0:45 | 12 min |
| 4 | ChatGPT in de Praktijk | 0:45 | 1:10 | 25 min |
| 5 | Prompt Engineering | 1:10 | 1:25 | 15 min |
| 6 | Live Demo v0.dev | 1:25 | 1:52 | 27 min |
| 7 | Hands-on Opdracht | 1:52 | 2:45 | 53 min |
| 8 | Afsluiting | 2:45 | 3:00 | 15 min |
**Totaal: 180 minuten (3 uur)**
---
## Tips voor de docent
1. **Papier en pennen** - CRUCIAAL. Zorg dat iedereen kan tekenen. Heb extra papier en pennen klaar.
2. **Benadruk dat tekenen NIET mooi hoeft** - Studenten kunnen onzeker zijn. Maak duidelijk dat simpele blokken genoeg zijn.
3. **De ChatGPT prompt is de sleutel** - Loop rond en check of studenten volledige specificaties meegeven (tech stack, kleuren, stijl).
4. **Heb backup klaar** - Screenshots van je eigen demo-resultaten voor als v0 traag is of rate limit heeft.
5. **GitHub accounts** - Check vroeg in de les of iedereen dit heeft.
6. **Wandel rond tijdens opdracht** - Actief helpen voorkomt frustratie.
7. **De workflow herinneren** - Schets → Foto → ChatGPT (met specs) → Prompt → v0 → Deploy
---
## Checklist voor studenten
Zorg dat ze in hun ChatGPT prompt specificeren:
| Element | Voorbeeld |
|---------|-----------|
| Tech stack | "React met Tailwind CSS" |
| Kleuren | "#2563EB" of "warm oranje" |
| Stijl | "Modern, minimalistisch" |
| Responsive | "Mobile-first design" |
| Doel | "SaaS landingspagina" |

286
Les01-Introductie-AI/Les01-Lesplan.md Normal file
View File

@@ -0,0 +1,286 @@
# Lesplan Les 1: Introductie AI & Large Language Models
> **Titel cursus:** AI Fundamentals
> **Leeruitkomst/prestatie-indicatoren** waaraan gewerkt wordt:
- De student schrijft effectieve prompts voor tekst-, beeld- en codegeneratie met tools zoals ChatGPT, DALL-E en Midjourney.
- De student past AI op ethische wijze toe en houdt rekening met de valkuilen, waaronder auteursrecht, bias en transparantie.
- De student reflecteert kritisch op het gebruik van AI binnen het creatieve of ontwikkelproces.
---
| **Les 1: Introductie AI & Large Language Models (3 uur)** | |
|---|---|
| **Voorbereiding** | Studenten hebben zich ingeschreven voor een gratis account bij ChatGPT (chat.openai.com) en Claude (claude.ai). Optioneel: GitHub account aangemaakt. |
| **EdHub** | Hfst 1: Introductie AI (indien beschikbaar) |
| **Benodigdheden** | Laptop met internetverbinding, projectiescherm, **papier en pen voor elke student**, toegang tot v0.dev, GitHub account |
| **Bijzonderheden** | Dit lesplan is voor een **fysieke** les. Focus op "wow-factor" en enthousiasmeren. Kernworkflow: schets op papier → ChatGPT → v0.dev → website. |
---
## Lesverloop
| **Tijd (minuten)** | **Onderdeel** | **Werkvorm + toelichting + clue** |
|---|---|---|
| | | |
| **0-13** | **Welkom & Introductie** | **Welkom en kennismaking** |
| | | *Werkvorm: klassikaal gesprek (5 min)* |
| | | Stel jezelf voor als docent. Vraag kort wie de studenten zijn en wat hun achtergrond is met AI. Peiling: "Wie heeft ChatGPT al eens gebruikt?" |
| | | |
| | | **Lesindeling en planning** |
| | | Communiceer duidelijk de structuur van de les: |
| | | - Theorie over AI en LLMs (~45 min) |
| | | - Praktijk: ChatGPT leren gebruiken (~25 min) |
| | | - Prompt Engineering basics (~15 min) |
| | | - Live demo: van schets naar website (~27 min) |
| | | - Hands-on opdracht: jouw tekening wordt een website (~55 min) |
| | | |
| | | **Leerdoelen van vandaag** |
| | | 1. Begrijpen wat AI en LLMs zijn |
| | | 2. ChatGPT praktisch leren gebruiken |
| | | 3. Prompt engineering: tech stack, kleuren, stijl specificeren |
| | | 4. **Van schets op papier naar werkende website** |
| | | |
| | | **Accounts check** |
| | | Check of iedereen een ChatGPT en GitHub account heeft. Laat studenten die dit nog moeten doen dit nu aanmaken. |
| | | |
| **13-33** | **Wat is AI?** | *Inventariseren voorkennis (5 min)* |
| | | *Werkvorm: brainstorm* |
| | | |
| | | Stel de vraag: "Wat is AI volgens jullie?" Laat studenten vrijuit antwoorden. Noteer kernwoorden op het bord/scherm. |
| | | |
| | | *Instructievorm: interactief doceren (15 min)* |
| | | |
| | | **Definitie AI** |
| | | Leg uit dat AI een verzamelnaam is voor systemen die taken uitvoeren waarvoor normaal menselijke intelligentie nodig is. Maak onderscheid tussen: |
| | | - Narrow AI (specifieke taken) |
| | | - General AI (theoretisch, nog niet bereikt) |
| | | |
| | | **Large Language Models (LLMs)** |
| | | Kernuitleg: |
| | | - Getraind op enorme hoeveelheden tekst |
| | | - Voorspellen het volgende woord (next-token prediction) |
| | | - Geen echte "kennis" of "begrip", wel patroonherkenning |
| | | |
| | | *Demonstratie: Next-token prediction (5 min)* |
| | | Open ChatGPT en typ langzaam een zin. Bijvoorbeeld: "De kat zat op de..." |
| | | |
| | | **Hallucinaties** |
| | | Leg uit wat hallucinaties zijn en waarom ze voorkomen. Benadruk het belang van verificatie. |
| | | |
| | | **Clue: LLMs zijn geen databases met feiten, maar statistische modellen die patronen herkennen.** |
| | | |
| **33-45** | **AI Landscape** | *Instructievorm: vergelijkende demonstratie (12 min)* |
| | | |
| | | **De grote spelers** |
| | | Loop door de belangrijkste AI-tools: ChatGPT, Claude, Gemini, Grok. |
| | | |
| | | **Gratis vs Betaald** |
| | | Bespreek kort de verschillen. Conclusie: gratis is voldoende voor deze cursus. |
| | | |
| | | **Welke tool voor welke taak?** |
| | | Korte klassikale discussie. |
| | | |
| | | **Clue: Er is geen "beste" AI-tool - de juiste keuze hangt af van je specifieke use case.** |
| | | |
| **45-70** | **ChatGPT in de Praktijk** | *Werkvorm: interactieve demonstratie met meekijken (25 min)* |
| | | *Doel:* Studenten leren ChatGPT effectief gebruiken |
| | | |
| | | **Interface rondleiding (5 min)** |
| | | Open ChatGPT op het projectiescherm. Laat studenten meekijken en hun eigen ChatGPT openen. |
| | | |
| | | **Model kiezen (3 min)** |
| | | Demonstreer de model selector: GPT-4o, GPT-4o with canvas, GPT-4. |
| | | |
| | | **Tijdelijke Chat (3 min)** |
| | | Demonstreer waar dit staat en wanneer je het gebruikt. |
| | | |
| | | **Afbeeldingen analyseren (5 min)** |
| | | Live demonstratie: upload een schets en laat ChatGPT beschrijven wat hij ziet. **Dit is de basis voor de workflow straks!** |
| | | |
| | | **Bestanden uploaden (3 min)** |
| | | Demonstreer het uploaden van een PDF of document. |
| | | |
| | | **Custom Instructions (3 min)** |
| | | Laat zien waar dit staat en geef voorbeelden. |
| | | |
| | | **Mini-oefening (3 min)** |
| | | Laat studenten experimenteren: start een chat, upload een afbeelding. |
| | | |
| | | **Clue: ChatGPT kan afbeeldingen "lezen" - dit gebruiken we straks om schetsen om te zetten naar prompts.** |
| | | |
| **70-85** | **Prompt Engineering Basics** | *Instructievorm: demonstratie met oefening (15 min)* |
| | | |
| | | **Wat is een prompt?** |
| | | Een prompt is de instructie die je aan een AI geeft. |
| | | |
| | | **Slechte vs Goede Prompt** |
| | | Toon het verschil tussen vage en specifieke prompts. |
| | | |
| | | **Prompt Framework** |
| | | Introduceer: Rol, Context, Taak, Format. |
| | | |
| | | **Tech Stack Specificeren** |
| | | Leg uit wat een tech stack is en waarom je dit moet meegeven: |
| | | - React - JavaScript framework voor UI |
| | | - Tailwind CSS - Utility-first CSS framework |
| | | - "v0.dev genereert automatisch React + Tailwind" |
| | | |
| | | **Kleuren en Look & Feel** |
| | | Leg uit hoe je visuele specificaties meegeeft: |
| | | - Kleuren: hex codes (#2563EB) of beschrijvend ("warm oranje") |
| | | - Stijl: modern, minimalistisch, speels, corporate, etc. |
| | | - Sfeer en referenties: "In de stijl van Stripe.com" |
| | | |
| | | **Clue: Specificeer altijd je tech stack, kleuren en stijl voor consistente resultaten.** |
| | | |
| **85-112** | **Live Demo: v0.dev** | *Instructievorm: live demonstratie (27 min)* |
| | | *Doel:* "Wow-moment" creëren met de schets-naar-website workflow |
| | | |
| | | **Introductie v0.dev (3 min)** |
| | | Leg uit wat v0.dev is: AI-powered UI generator van Vercel. |
| | | |
| | | **De Slimme Workflow (2 min)** |
| | | Leg de 5-stappen workflow uit: |
| | | 1. TEKEN op papier |
| | | 2. FOTO maken |
| | | 3. Upload naar CHATGPT + beschrijf wensen (tech stack, kleuren, stijl) |
| | | 4. ChatGPT maakt PROMPT |
| | | 5. Plak in V0.DEV → Website! |
| | | |
| | | **Demo 1: Schets maken (3 min)** |
| | | Teken live op papier een hero section: links tekst + button, rechts afbeelding placeholder. |
| | | |
| | | **Demo 2: Foto naar ChatGPT (8 min)** |
| | | Upload foto en geef beschrijving mee: |
| | | - "Dit is een schets voor een hero section" |
| | | - Tech stack: React met Tailwind CSS |
| | | - Kleuren: Blauw thema met primary #2563EB |
| | | - Stijl: Modern, minimalistisch, professioneel |
| | | - "Maak hier een gedetailleerde prompt voor v0.dev van" |
| | | |
| | | **Demo 3: Prompt naar v0 (6 min)** |
| | | Kopieer de gegenereerde prompt naar v0.dev. Toon het resultaat. |
| | | |
| | | **Demo 4: Itereren (3 min)** |
| | | Verfijn met follow-up prompts. |
| | | |
| | | **Demo 5: Deployen (2 min)** |
| | | Doorloop het deployment proces: Add Integration → GitHub → Deploy. |
| | | |
| | | **Clue: De schets is je startpunt, ChatGPT is je vertaler, v0.dev is je bouwer.** |
| | | |
| **112-165** | **Hands-on Opdracht** | *Werkvorm: individueel werken (53 min)* |
| | | *Doel:* Zelfstandig de workflow doorlopen |
| | | |
| | | **Opdracht introductie (5 min)** |
| | | Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten gaan: |
| | | 1. **TEKENEN** op papier - hero section |
| | | 2. **FOTO** maken van schets |
| | | 3. **CHATGPT** - upload + beschrijf (tech stack, kleuren, stijl) |
| | | 4. **PROMPT** kopiëren |
| | | 5. **V0.DEV** - genereren |
| | | 6. **DEPLOY** naar Vercel |
| | | |
| | | **Benodigdheden check** |
| | | Zorg dat iedereen papier en pen heeft! |
| | | |
| | | **Zelfstandig werken (40 min)** |
| | | Loop rond en help studenten waar nodig. Let op: |
| | | - Kwaliteit van de schets (simpel is prima) |
| | | - Volledigheid van ChatGPT prompt (tech stack, kleuren, stijl) |
| | | - Problemen met v0.dev of deployment |
| | | |
| | | **Tussentijdse check (halverwege)** |
| | | "Wie heeft al een prompt uit ChatGPT?" |
| | | "Wie is al in v0.dev bezig?" |
| | | |
| | | **Clue: Het doel is de workflow leren, niet perfectie!** |
| | | |
| **165-180** | **Afsluiting** | *Werkvorm: klassikaal gesprek (15 min)* |
| | | |
| | | **Korte terugblik (5 min)** |
| | | Vraag 2-3 studenten om te delen: |
| | | - Hoe was de ervaring? |
| | | - Leek het resultaat op je schets? |
| | | |
| | | **Samenvatting (3 min)** |
| | | - LLMs en next-token prediction |
| | | - Prompt engineering: tech stack, kleuren, stijl |
| | | - **De workflow: Schets → ChatGPT → v0.dev → Website** |
| | | |
| | | **Huiswerk (5 min)** |
| | | Deel de huiswerkopdracht (zie Bijlage: Huiswerkopdracht): |
| | | - Reflectie schrijven (500 woorden) |
| | | - 5 AI use cases bedenken |
| | | - **Tweede schets doorlopen met andere component** |
| | | - Inleveren via Teams chat |
| | | |
| | | **Vooruitblik** |
| | | Volgende les: Prompt Engineering verdieping. |
| | | |
| | | **Afsluiting** |
| | | Bedank de studenten. Wijs op de beschikbaarheid voor vragen (Teams). |
---
## Timing Overzicht
| Blok | Onderwerp | Start | Eind | Duur |
|------|-----------|-------|------|------|
| 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min |
| 2 | Wat is AI? | 0:13 | 0:33 | 20 min |
| 3 | AI Landscape | 0:33 | 0:45 | 12 min |
| 4 | ChatGPT in de Praktijk | 0:45 | 1:10 | 25 min |
| 5 | Prompt Engineering | 1:10 | 1:25 | 15 min |
| 6 | Live Demo v0.dev | 1:25 | 1:52 | 27 min |
| 7 | Hands-on Opdracht | 1:52 | 2:45 | 53 min |
| 8 | Afsluiting | 2:45 | 3:00 | 15 min |
**Totaal: 180 minuten (3 uur)**
---
## Notities voor de docent
### Voorbereiding
- **BELANGRIJK:** Zorg voor papier en pennen voor alle studenten
- Test v0.dev vooraf - soms zijn er rate limits
- Zorg voor backup-schermafbeeldingen mocht live demo falen
- Maak zelf een schets klaar voor de demo
- Zorg dat je eigen accounts werken (ChatGPT, Claude, v0.dev, GitHub)
### De Schets-Workflow - Key Points
- Benadruk dat tekenen NIET mooi hoeft te zijn
- Simpele blokken en lijnen zijn voldoende
- Het gaat om communiceren van layout en structuur
- ChatGPT is de "vertaler" - die maakt de technische prompt
### Prompt Specificaties - Wat moeten studenten meegeven?
1. **Tech stack:** React met Tailwind CSS (v0 default)
2. **Kleuren:** Hex codes of beschrijving
3. **Stijl:** Modern/minimalistisch/speels/corporate etc.
4. **Responsive:** Mobile-first design
5. **Doel:** Type website (SaaS, portfolio, webshop)
### Mogelijke vragen/discussiepunten
- "Kan ik ook mijn eigen schets direct uploaden naar v0?" → Ja, maar ChatGPT maakt de prompt gedetailleerder
- "Wat als mijn tekening lelijk is?" → Maakt niet uit, het gaat om de layout
- "Welke kleuren moet ik kiezen?" → Kies wat je wilt, of gebruik Tailwind default colors
### Differentiatie
- **Snelle studenten:** Laat ze een tweede component maken of experimenteren met andere stijlen
- **Studenten die moeite hebben:** Help met de ChatGPT prompt, geef ze het template
### Assessment indicatoren
Observeer tijdens de les:
- Maken studenten daadwerkelijk een schets?
- Geven ze volledige specificaties mee aan ChatGPT?
- Kunnen ze de workflow zelfstandig doorlopen?
- Begrijpen ze waarom je tech stack/kleuren/stijl specificeert?
---
## Bijlagen
1. Bijlage A: Lesopdracht - Van Schets naar Website met AI
2. Bijlage B: Huiswerkopdracht - Reflectie, Use Cases en Tweede Schets

696
Les01-Introductie-AI/Les01-Slide-Overzicht.md Normal file
View File

@@ -0,0 +1,696 @@
# Les 1: Introductie tot AI en Large Language Models
## Slide Overzicht (3 uur les)
---
## DEEL 1: WELKOM & INTRODUCTIE (13 minuten)
### Slide 1: Titelslide
**Titel:** Introductie tot AI en Large Language Models
**Subtitel:** AI Development - Les 1
**Docent:** [Naam]
**Datum:** [Datum]
---
### Slide 2: Planning
**Titel:** Planning
**Inhoud:**
**14:00 - 14:50**
→ Welkom & kennismaking
→ Theorie: Wat is AI en LLMs
→ AI Landscape: de grote spelers
**14:50 - 15:15**
→ *Praktijk:* ChatGPT leren gebruiken
**15:15 - 15:30**
→ Prompt Engineering basics
**15:30 - 16:00**
→ *Demo:* Van schets naar website met v0.dev
**16:00 - 16:50**
→ *Lesopdracht:* Jouw tekening wordt een website
**16:50 - 17:00**
→ Afsluiting & Huiswerk
---
### Slide 3: Lesoverzicht
**Titel:** Wat gaan we vandaag doen?
**Inhoud:**
- Kennismaking met elkaar en de leerlijn
- Wat is AI en hoe werken LLMs?
- Het AI-landschap: ChatGPT, Claude, Gemini
- **Hands-on: ChatGPT leren gebruiken**
- Prompt engineering: de juiste vraag stellen
- Live demo: van schets naar werkende website
- Zelf aan de slag: **jouw tekening wordt een website!**
**Leerdoel:** Na deze les kun je een schets omzetten naar een gedeployde website met AI.
---
### Slide 4: Kennismaking
**Titel:** Wie zijn jullie?
**Inhoud:**
- Naam
- Achtergrond (werk/studie)
- Ervaring met AI tools (ChatGPT, Claude, etc.)
- Wat hoop je te leren in deze leerlijn?
---
### Slide 5: De Leerlijn AI Developer
**Titel:** Wat gaan we 18 weken lang doen?
**Inhoud:**
- **Hoofdstuk 1 (Les 1-3):** AI Fundamentals - basis begrip en ethiek
- **Hoofdstuk 2 (Les 4-9):** AI Driven Development - tools en workflows
- **Hoofdstuk 3 (Les 10-18):** Full-Stack met AI - productie-klare apps bouwen
**Eindresultaat:** Je bouwt een complete full-stack applicatie met AI assistance
---
## DEEL 2: WAT IS AI? (20 minuten)
### Slide 6: Wat is Artificial Intelligence?
**Titel:** AI - Meer dan een buzzword
**Inhoud:**
- **Definitie:** Computersystemen die taken uitvoeren die normaal menselijke intelligentie vereisen
- **Typen AI:**
- Narrow AI (wat we nu hebben): specifieke taken
- General AI (toekomst): breed menselijk denken
- **Voorbeelden:**
- Aanbevelingen (Netflix, Spotify)
- Spraakassistenten (Siri, Alexa)
- Code generatie (ChatGPT, Copilot)
---
### Slide 7: Hoe werken Large Language Models?
**Titel:** De magie achter ChatGPT en Claude
**Inhoud:**
1. **Training:** Model leest miljarden teksten (boeken, websites, code)
2. **Patroonherkenning:** Leert statistische verbanden tussen woorden
3. **Voorspelling:** Voorspelt steeds het volgende woord dat "logisch" volgt
4. **Output:** Genereert tekst token voor token
**Belangrijk:**
- LLMs "begrijpen" niet echt - ze voorspellen
- Ze kunnen overtuigend klinken maar fout zijn ("hallucinaties")
- Altijd output checken!
---
### Slide 8: Next-Token Prediction
**Titel:** Hoe "denkt" een LLM?
**Inhoud:**
**Voorbeeld:** "De kat zat op de ___"
Het model berekent kansen:
- "mat" → 65%
- "stoel" → 15%
- "bank" → 10%
- "auto" → 2%
→ Kiest waarschijnlijk "mat" (maar niet altijd!)
**Dit verklaart:**
- Waarom het soms briljant is
- Waarom het soms onzin produceert
- Waarom dezelfde vraag verschillende antwoorden geeft
---
### Slide 9: Hallucinaties
**Titel:** Waarom AI soms "liegt"
**Inhoud:**
**Wat zijn hallucinaties?**
- AI verzint informatie die niet bestaat
- Klinkt heel overtuigend
- Bronnen, namen, feiten kunnen compleet verzonnen zijn
**Voorbeelden:**
- Fake wetenschappelijke papers met echte-klinkende titels
- Niet-bestaande wetten of regels
- Verzonnen statistieken
**Regel:** Verifieer altijd belangrijke informatie!
---
## DEEL 3: HET AI-LANDSCHAP (15 minuten)
### Slide 10: De Grote Spelers
**Titel:** Welke AI tools zijn er?
**Inhoud:**
| Tool | Bedrijf | Sterk in |
|------|---------|----------|
| **ChatGPT** | OpenAI | Algemeen, code, creatief |
| **Claude** | Anthropic | Lange teksten, nuance |
| **Gemini** | Google | Google integratie |
| **Grok** | xAI | Actueel nieuws (X/Twitter) |
**Vandaag focussen we op ChatGPT** - de meest gebruikte tool.
---
### Slide 11: Gratis vs Betaald
**Titel:** Heb je de betaalde versie nodig?
**Inhoud:**
| | Gratis | Betaald ($20/maand) |
|---|--------|---------------------|
| **Model** | GPT-4o (goed!) | GPT-4 (beste) |
| **Snelheid** | Langzamer bij drukte | Prioriteit |
| **Limieten** | ~10-15 berichten/3u | 40+ berichten/3u |
| **Features** | Basis | DALL-E, Canvas, meer |
**Voor deze cursus:** Gratis is voldoende!
---
### Slide 12: Welke tool voor welke taak?
**Titel:** Snelle vergelijking
**Inhoud:**
| Taak | Beste keuze |
|------|-------------|
| Snelle code snippets | ChatGPT of Claude |
| Lange documenten analyseren | Claude (200K context) |
| Actueel nieuws | Grok |
| Google Docs integratie | Gemini |
| UI componenten genereren | v0.dev (straks!) |
**Tip:** Professionele developers gebruiken meerdere tools!
---
## DEEL 4: CHATGPT IN DE PRAKTIJK (25 minuten)
### Slide 13: ChatGPT Interface
**Titel:** Laten we ChatGPT openen
**Inhoud:**
*[Live demonstratie - open chat.openai.com]*
**Wat je ziet:**
- Chatvenster (midden)
- Nieuwe chat starten (linksboven)
- Chat geschiedenis (links)
- Model kiezen (bovenaan)
- Instellingen (rechtsonder)
**Actie:** Open nu ChatGPT op je laptop!
---
### Slide 14: Model Kiezen
**Titel:** Welk model gebruik je?
**Inhoud:**
**In ChatGPT kun je kiezen:**
- **GPT-4o** - Standaard, snel, gratis
- **GPT-4o with canvas** - Voor documenten bewerken
- **GPT-4** - Meest krachtig (betaald)
**Tip:** GPT-4o is voor de meeste taken prima!
*[Demonstreer model selector]*
---
### Slide 15: Tijdelijke Chat
**Titel:** Privacy: Tijdelijke Chat
**Inhoud:**
**Wat is tijdelijke chat?**
- Chat wordt NIET opgeslagen in je geschiedenis
- Wordt NIET gebruikt om model te trainen
- Verdwijnt na sluiten
**Wanneer gebruiken?**
- Gevoelige informatie
- Werk-gerelateerde data
- Als je niet wilt dat het wordt onthouden
*[Demonstreer: klik op naam → Temporary Chat]*
---
### Slide 16: Afbeeldingen Analyseren
**Titel:** Image-to-Text in ChatGPT
**Inhoud:**
**Wat kun je doen?**
- Foto uploaden en vragen stellen
- Screenshot laten analyseren
- **Schets laten interpreteren** ← Dit gebruiken we straks!
- Tekst uit afbeelding halen (OCR)
**Voorbeeld use cases:**
- "Beschrijf deze wireframe in detail"
- "Maak van deze schets een gedetailleerde prompt"
- "Zet deze tekening om naar specificaties"
*[Demonstreer met een schets/foto]*
---
### Slide 17: Bestanden Uploaden
**Titel:** PDF's en documenten lezen
**Inhoud:**
**ChatGPT kan:**
- PDF's lezen en samenvatten
- Word documenten analyseren
- Code bestanden reviewen
- Spreadsheets interpreteren
**Hoe?**
- Klik op 📎 (paperclip) icoon
- Sleep bestand in het chatvenster
- Of copy-paste tekst
*[Demonstreer met een kort PDF]*
---
### Slide 18: Custom Instructions
**Titel:** ChatGPT Personaliseren
**Inhoud:**
**Wat zijn Custom Instructions?**
- Permanente instructies die ChatGPT onthoudt
- Hoef je niet elke chat te herhalen
- Zit in Instellingen → Personalisatie
**Handige voorbeelden:**
- "Ik ben een frontend developer, gebruik React en Tailwind"
- "Antwoord in het Nederlands tenzij ik Engels vraag"
- "Geef code voorbeelden met TypeScript"
*[Demonstreer waar dit staat]*
---
### Slide 19: Het Geheugen van ChatGPT
**Titel:** Wat onthoudt ChatGPT?
**Inhoud:**
**ChatGPT onthoudt:**
- Eerdere chats (tenzij tijdelijk)
- Custom instructions
- Dingen die je expliciet vraagt te onthouden
**ChatGPT onthoudt NIET:**
- Automatisch alles uit vorige chats
- Context na lange tijd
- Wat je in andere sessies zei
**Tip:** Start nieuwe chat voor nieuw onderwerp!
---
### Slide 20: Praktijk Oefening
**Titel:** Probeer het zelf! (5 minuten)
**Inhoud:**
**Opdracht:**
1. Open ChatGPT (chat.openai.com)
2. Start een nieuwe chat
3. Stel een vraag over een programmeerconcept
4. Upload een afbeelding en vraag wat erop staat
**Bonus:** Bekijk je Custom Instructions
*[Geef 5 minuten om te experimenteren]*
---
## DEEL 5: PROMPT ENGINEERING (15 minuten)
### Slide 21: Wat is Prompt Engineering?
**Titel:** De kunst van het vragen stellen
**Inhoud:**
**Een prompt is:** De instructie die je aan AI geeft
**Waarom belangrijk?**
- Zelfde vraag, andere formulering = totaal andere output
- Goede prompt = bruikbaar resultaat
- Slechte prompt = frustratie
**Prompt engineering = leren hoe je effectief vraagt**
---
### Slide 22: Slechte vs Goede Prompt
**Titel:** Het verschil zien
**Slechte prompt:**
> "Maak een button"
**Goede prompt:**
> "Maak een React button component met Tailwind CSS. De button moet primary styling hebben (blauw), een hover state, en een loading state met een spinner. TypeScript graag."
**Waarom beter?**
- Specificeert technologie
- Beschrijft gewenste features
- Geeft context
---
### Slide 23: Prompt Framework
**Titel:** 4 elementen van een goede prompt
**Inhoud:**
1. **Rol:** "Je bent een senior frontend developer..."
2. **Context:** "...die werkt aan een SaaS landingspagina..."
3. **Taak:** "...maak een hero section met..."
4. **Format:** "...gebruik React en Tailwind, voeg comments toe"
**Voorbeeld gecombineerd:**
> "Je bent een senior frontend developer. Maak een hero section voor een SaaS website. Gebruik React met Tailwind CSS. Voeg comments toe die uitleggen wat de code doet."
---
### Slide 24: Tech Stack Specificeren
**Titel:** Vertel de AI welke technologie je wilt
**Inhoud:**
**Wat is een tech stack?**
De technologieën waarmee je bouwt.
**Voor deze cursus gebruiken we:**
- **React** - JavaScript framework voor UI
- **Tailwind CSS** - Utility-first CSS framework
- **TypeScript** (optioneel) - Getypeerd JavaScript
**In je prompt:**
> "Gebruik React met Tailwind CSS voor styling. Maak het responsive met mobile-first design."
**Tip:** v0.dev genereert automatisch React + Tailwind!
---
### Slide 25: Kleuren en Look & Feel
**Titel:** Visuele specificaties in je prompt
**Inhoud:**
**Wat kun je specificeren?**
- **Kleuren:** "#2563EB voor primary, #1E40AF voor secondary"
- **Stijl:** "Modern, minimalistisch, professioneel"
- **Sfeer:** "Vriendelijk en toegankelijk" of "Corporate en serieus"
- **Referenties:** "In de stijl van Stripe.com"
**Voorbeeld:**
> "Gebruik een blauw kleurenschema met primary #2563EB. De stijl moet modern en minimalistisch zijn, geschikt voor een B2B SaaS startup."
---
### Slide 26: Prompting Tips
**Titel:** Praktische tips
**Inhoud:**
1. **Geef een rol:** "Je bent een expert in..."
2. **Wees specifiek:** Niet "maak iets moois" maar "maak een hero met gradient"
3. **Specificeer tech stack:** "React, Tailwind, TypeScript"
4. **Beschrijf look & feel:** Kleuren, stijl, sfeer
5. **Geef voorbeelden:** "Zoals de website van Stripe"
6. **Itereer:** Eerste poging is zelden perfect
**Onthoud:** Garbage in = garbage out!
---
## DEEL 6: LIVE DEMO V0.DEV (27 minuten)
### Slide 27: Introductie v0.dev
**Titel:** Van schets naar werkende website
**Inhoud:**
**v0.dev door Vercel:**
- AI-powered UI generator
- Begrijpt tekst EN afbeeldingen
- Genereert React + Tailwind code
- Direct deploybaar naar internet
**Vandaag leer je de workflow:**
Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
---
### Slide 28: De Slimme Workflow
**Titel:** Van schets naar site in 5 stappen
**Inhoud:**
```
1. TEKEN je idee op papier
↓
2. Maak een FOTO van je tekening
↓
3. Upload naar CHATGPT + beschrijf je wensen
(kleuren, stijl, tech stack)
↓
4. ChatGPT maakt een gedetailleerde PROMPT
↓
5. Plak die prompt in V0.DEV → Website!
```
**Waarom eerst ChatGPT?**
- v0 heeft beperkte gratis credits (~7/dag)
- ChatGPT is "gratis" voor prompt optimalisatie
- Je tekening + beschrijving = perfecte prompt!
---
### Slide 29: Live Demo - Schets Maken
**Titel:** Stap 1: Tekenen
**Inhoud:**
*[Docent tekent live op papier]*
**Ik teken een hero section:**
- Links: titel + tekst + button
- Rechts: placeholder voor afbeelding
- Simpele lijnen, geen kunstwerk nodig!
**Belangrijke elementen:**
- Layout (waar staat wat?)
- Tekst indicaties
- Knoppen
- Afbeelding placeholders
---
### Slide 30: Live Demo - Foto naar ChatGPT
**Titel:** Stap 2 & 3: Foto + Beschrijving
**Inhoud:**
*[Docent maakt foto en upload naar ChatGPT]*
**Mijn prompt aan ChatGPT:**
> "Dit is een schets voor een hero section van mijn website.
>
> Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
>
> Tech stack: React met Tailwind CSS
> Kleuren: Blauw thema met primary #2563EB
> Stijl: Modern, minimalistisch, professioneel
> Doel: SaaS landingspagina voor projectmanagement tool"
*[Toon ChatGPT response]*
---
### Slide 31: Live Demo - Prompt naar v0
**Titel:** Stap 4 & 5: v0.dev
**Inhoud:**
*[Docent kopieert prompt naar v0.dev]*
**Let op:**
- Generatie duurt ~30 seconden
- Je krijgt direct een preview
- Code is React + Tailwind
- Precies wat je tekende!
*[Toon resultaat]*
---
### Slide 32: Live Demo - Itereren
**Titel:** Verfijnen in v0
**Inhoud:**
*[Docent itereert op het resultaat]*
**Follow-up prompts:**
- "Make the button larger with a hover animation"
- "Add a floating image placeholder on the right"
- "Change the gradient to be more subtle"
**Dit is de kracht:** In gesprek gaan met de AI!
---
### Slide 33: Live Demo - Deployen
**Titel:** Live zetten
**Inhoud:**
**Deployment in 4 stappen:**
1. Klik "Add Integration" (linkerzijbalk)
2. Koppel je GitHub account
3. v0 maakt automatisch een repository
4. Klik "Deploy" → Live op Vercel!
**Resultaat:**
- URL: `jouw-project.vercel.app`
- Code staat in GitHub
- Elke update → automatisch opnieuw gedeployd
---
## DEEL 7: HANDS-ON OPDRACHT (55 minuten)
### Slide 34: Lesopdracht
**Titel:** Nu zijn jullie aan de beurt!
**Inhoud:**
**Opdracht:** Jouw tekening wordt een website!
**Stappen:**
1. **TEKEN** een hero section op papier
2. **FOTO** maken van je tekening
3. **CHATGPT:** Upload foto + beschrijf je wensen
4. **PROMPT:** Kopieer de gegenereerde prompt
5. **V0.DEV:** Plak prompt en genereer
6. **DEPLOY:** Publiceer naar Vercel
**Tijd:** ~55 minuten
**Benodigdheden:** Papier, pen, ChatGPT account, GitHub account
---
### Slide 35: Opdracht Details
**Titel:** Wat moet je specificeren?
**Inhoud:**
**In je ChatGPT prompt, beschrijf:**
1. **Je schets:** "Dit is een hero section met..."
2. **Tech stack:** "Gebruik React met Tailwind CSS"
3. **Kleuren:** "Primary kleur #2563EB" of "Blauw thema"
4. **Stijl:** "Modern, minimalistisch" of "Speels en kleurrijk"
5. **Doel:** "Voor een SaaS/portfolio/webshop"
**Vraag ChatGPT:**
> "Maak van deze schets en beschrijving een gedetailleerde prompt voor v0.dev"
---
### Slide 36: Tips voor de Opdracht
**Titel:** Succesvol aan de slag
**Inhoud:**
- **Teken simpel:** Blokken en lijnen zijn genoeg
- **Wees specifiek in ChatGPT:** Hoe meer detail, hoe beter de prompt
- **v0 credits:** ~7 per dag, dus optimaliseer prompt eerst!
- **GitHub vereist:** Maak account aan als je die niet hebt
**Deployment in 3 klikken:**
1. "Add Integration" → koppel GitHub
2. v0 maakt automatisch repo aan
3. "Deploy" → live!
---
### Slide 37: Hulpmiddelen
**Titel:** Links en resources
**Inhoud:**
- **ChatGPT:** chat.openai.com
- **v0.dev:** v0.dev
- **GitHub:** github.com
**Hulp nodig?**
- Vraag je buurman/buurvrouw
- Steek je hand op
- AI mag ook helpen!
---
## DEEL 8: AFSLUITING (10 minuten)
### Slide 38: Samenvatting
**Titel:** Wat hebben we geleerd?
**Inhoud:**
✅ Hoe LLMs werken (next-token prediction)
✅ AI-landschap: ChatGPT, Claude, Gemini, Grok
✅ ChatGPT praktisch gebruiken
✅ Prompt engineering: rol, context, tech stack, kleuren
✅ **De workflow: Schets → ChatGPT → v0.dev → Website!**
---
### Slide 39: Huiswerk
**Titel:** Voor volgende week
**Inhoud:**
**Opdracht (2 uur):**
1. Schrijf reflectie (500 woorden) over je eerste AI-ervaring
2. Bedenk 5 concrete use cases voor AI in jouw werk
3. **Maak een tweede schets** voor een andere pagina/component
4. Doorloop de workflow opnieuw (schets → ChatGPT → v0 → deploy)
5. Documenteer resultaten met screenshots
**Inleveren:** Via Teams chat
---
### Slide 40: Volgende Les
**Titel:** Les 2: Prompt Engineering Verdieping
**Inhoud:**
**Wat komt:**
- Geavanceerde prompt technieken
- Chain of thought prompting
- Few-shot learning
- Custom GPTs verkennen
**Voorbereiding:**
- Huiswerk af
- ChatGPT account werkt
---
### Slide 41: Bedankt!
**Titel:** Tot volgende week!
**Inhoud:**
🚀 Succes met het huiswerk!
*"The best way to predict the future is to create it."*
— Alan Kay
---
## Totaal: 41 slides
## Geschatte tijd presentatie: ~70 minuten
## ChatGPT praktijk: ~25 minuten
## Demo v0.dev: ~27 minuten
## Hands-on tijd: ~55 minuten