# 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)** | |
|---|---|
| **Benodigdheden** | Laptop met internetverbinding, projectiescherm, **papier en pen voor elke student**, toegang tot v0.dev, ChatGPT account, GitHub account, Vercel 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 (~20 min) |
| | | - Hands-on opdracht: bouw een complete landingspagina (~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, GitHub en Vercel account heeft. Laat studenten die dit nog moeten doen dit nu aanmaken. Tip: Vercel koppelen met GitHub is het makkelijkst. |
| | | |
| **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-5, GPT-5 with canvas, GPT-5.2. |
| | | |
| | | **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. |
| | | |
| | | **ChatGPT Projects (3 min)** |
| | | Demonstreer Projects: werkruimtes met eigen instructies, bestanden en geheugen. |
| | | |
| | | **Praktijk: Instellen ChatGPT (5 min)** |
| | | Studenten stellen Custom Instructions in + maken Project "Les 1 - v0.dev Prompt Engineer". |
| | | |
| | | **Dit project gebruiken we straks voor de v0.dev demo!** |
| | | |
| **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-105** | **Live Demo: v0.dev** | *Instructievorm: live demonstratie (20 min)* |
| | | *Doel:* "Wow-moment" creëren met de schets-naar-website workflow |
| | | |
| | | **Introductie v0.dev + Workflow (5 min)** |
| | | Leg uit wat v0.dev is en de 5-stappen workflow: |
| | | 1. TEKEN op papier |
| | | 2. FOTO maken |
| | | 3. Upload naar CHATGPT + beschrijf wensen |
| | | 4. ChatGPT maakt PROMPT |
| | | 5. Plak in V0.DEV → Website! |
| | | |
| | | **Live Demo (15 min)** |
| | | Voer de hele workflow uit in één vloeiende demo: |
| | | - Teken simpele hero section op papier |
| | | - Foto maken en uploaden naar ChatGPT Project |
| | | - Prompt genereren met tech stack, kleuren, stijl |
| | | - Kopiëren naar v0.dev en genereren |
| | | - Itereren met follow-up prompts |
| | | |
| | | **BELANGRIJK: Deployment NIET live doen!** |
| | | Leg kort uit hoe het werkt (Add Integration → GitHub → Deploy), maar studenten zoeken dit straks zelf uit. |
| | | |
| | | **Clue: De schets is je startpunt, ChatGPT is je vertaler, v0.dev is je bouwer.** |
| | | |
| **105-160** | **Hands-on Opdracht** | *Werkvorm: individueel werken (55 min)* |
| | | *Doel:* Zelfstandig de workflow doorlopen |
| | | |
| | | **Opdracht introductie (5 min)** |
| | | Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten bouwen een **complete landingspagina**: |
| | | - Minimaal **3 secties** (hero, features, pricing, etc.) |
| | | - Minimaal **1 carousel** (image/testimonial slider) |
| | | - Minimaal **1 accordion** (FAQ of uitklapbare content) |
| | | - **Deployment:** Zelf uitzoeken! |
| | | |
| | | **Benodigdheden check** |
| | | Zorg dat iedereen papier en pen heeft! |
| | | |
| | | **Zelfstandig werken (45 min)** |
| | | Loop rond en help studenten waar nodig. Let op: |
| | | - Hebben ze 3+ secties getekend? |
| | | - Carousel en accordion in de schets? |
| | | - Volledigheid van ChatGPT prompt (tech stack, kleuren, stijl) |
| | | - Deployment: laat ze eerst zelf zoeken, help pas daarna |
| | | |
| | | **Tussentijdse check (halverwege)** |
| | | "Wie heeft 3+ secties? Carousel en accordion gepland?" |
| | | "Begin met deployen als je v0 resultaat hebt!" |
| | | |
| | | **Clue: Het doel is de workflow leren, niet perfectie!** |
| | | |
| **160-180** | **Afsluiting** | *Werkvorm: klassikaal gesprek (20 min)* |
| | | |
| | | **Resultaten delen (8 min)** |
| | | Vraag 2-3 studenten om te delen: |
| | | - Laat je schets en v0 resultaat zien |
| | | - Wat ging goed? Wat was lastig? |
| | | |
| | | **Samenvatting (4 min)** |
| | | - LLMs en next-token prediction |
| | | - Prompt engineering: tech stack, kleuren, stijl |
| | | - **De workflow: Schets → ChatGPT → v0.dev → Website** |
| | | |
| | | **Huiswerk (5 min)** |
| | | 1. **Reflectie (500 woorden)** met deelvragen: |
| | |    - Wat vond je verrassend aan werken met AI? |
| | |    - Wat ging goed? Wat vond je lastig? |
| | |    - Hoe zie je AI jouw werk als developer veranderen? |
| | | 2. **Breid je v0 website uit** met minimaal 1 nieuwe sectie |
| | | - Inleveren via Teams, voor volgende les |
| | | |
| | | **Afsluiting** |
| | | Bedank de studenten. Tot volgende week! |

---

## Timing Overzicht

| Blok | Onderwerp | Start | Eind | Duur |
|------|-----------|-------|------|------|
| 1 | Welkom & Introductie | 0:00 | 0:15 | 15 min |
| 2 | Wat is AI? | 0:15 | 0:40 | 25 min |
| 3 | AI Landscape | 0:40 | 0:50 | 10 min |
| 4 | ChatGPT in de Praktijk | 0:50 | 1:10 | 20 min |
| 5 | Prompt Engineering | 1:10 | 1:25 | 15 min |
| 6 | Live Demo v0.dev | 1:25 | 1:45 | 20 min |
| 7 | Hands-on Opdracht | 1:45 | 2:40 | 55 min |
| 8 | Afsluiting | 2:40 | 3:00 | 20 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 en Website Uitbreiding
