fix: add lesson files

Les01-Introductie-AI/Les01-Slide-Overzicht.md

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