16 KiB
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:
- Training: Model leest miljarden teksten (boeken, websites, code)
- Patroonherkenning: Leert statistische verbanden tussen woorden
- Voorspelling: Voorspelt steeds het volgende woord dat "logisch" volgt
- 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 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:
- Open ChatGPT (chat.openai.com)
- Start een nieuwe chat
- Stel een vraag over een programmeerconcept
- 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:
- Rol: "Je bent een senior frontend developer..."
- Context: "...die werkt aan een SaaS landingspagina..."
- Taak: "...maak een hero section met..."
- 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:
- Geef een rol: "Je bent een expert in..."
- Wees specifiek: Niet "maak iets moois" maar "maak een hero met gradient"
- Specificeer tech stack: "React, Tailwind, TypeScript"
- Beschrijf look & feel: Kleuren, stijl, sfeer
- Geef voorbeelden: "Zoals de website van Stripe"
- 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:
- Klik "Add Integration" (linkerzijbalk)
- Koppel je GitHub account
- v0 maakt automatisch een repository
- 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:
- TEKEN een hero section op papier
- FOTO maken van je tekening
- CHATGPT: Upload foto + beschrijf je wensen
- PROMPT: Kopieer de gegenereerde prompt
- V0.DEV: Plak prompt en genereer
- 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:
- Je schets: "Dit is een hero section met..."
- Tech stack: "Gebruik React met Tailwind CSS"
- Kleuren: "Primary kleur #2563EB" of "Blauw thema"
- Stijl: "Modern, minimalistisch" of "Speels en kleurrijk"
- 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:
- "Add Integration" → koppel GitHub
- v0 maakt automatisch repo aan
- "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):
- Schrijf reflectie (500 woorden) over je eerste AI-ervaring
- Bedenk 5 concrete use cases voor AI in jouw werk
- Maak een tweede schets voor een andere pagina/component
- Doorloop de workflow opnieuw (schets → ChatGPT → v0 → deploy)
- 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