fix: line break

2026-01-29 11:13:06 +01:00
parent c7757160ad
commit 8f428f7924
1 changed files with 118 additions and 19 deletions
--- a/Les01-Introductie-AI/Les01-Slide-Overzicht.md
+++ b/Les01-Introductie-AI/Les01-Slide-Overzicht.md
@@ -1,4 +1,5 @@
 # Les 1: Introductie tot AI en Large Language Models
 ## Slide Overzicht (3 uur les)
 ---
@@ -6,6 +7,7 @@
 ## DEEL 1: WELKOM & INTRODUCTIE (13 minuten)
 ### Slide 1: Titelslide
 **Titel:** Introductie tot AI en Large Language Models  
 **Subtitel:** AI Development - Les 1  
 **Docent:** Tim Rijkse  
@@ -14,6 +16,7 @@
 ---
 ### Slide 2: Planning
 **Titel:** Planning
 **Inhoud:**
@@ -23,16 +26,16 @@
 → AI Landscape: de grote spelers
 **14:50 - 15:15**
-→ *Praktijk:* ChatGPT leren gebruiken
+→ _Praktijk:_ ChatGPT leren gebruiken
 **15:15 - 15:30**
 → Prompt Engineering basics
 **15:30 - 16:00**
-→ *Demo:* Van schets naar website met v0.dev
+→ _Demo:_ Van schets naar website met v0.dev
 **16:00 - 16:50**
-→ *Lesopdracht:* Jouw tekening wordt een website
+→ _Lesopdracht:_ Jouw tekening wordt een website
 **16:50 - 17:00**
 → Afsluiting & Huiswerk
@@ -40,9 +43,11 @@
 ---
 ### 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
@@ -56,9 +61,11 @@
 ---
 ### Slide 4: Kennismaking
 **Titel:** Wie zijn jullie?
 **Inhoud:**
 - Naam
 - Achtergrond (werk/studie)
 - Ervaring met AI tools (ChatGPT, Claude, etc.)
@@ -67,9 +74,11 @@
 ---
 ### 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
@@ -81,9 +90,11 @@
 ## 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
@@ -96,15 +107,18 @@
 ---
 ### 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!
@@ -112,12 +126,14 @@
 ---
 ### Slide 8: Next-Token Prediction
 **Titel:** Hoe "denkt" een LLM?
 **Inhoud:**
-**Voorbeeld:** "De kat zat op de ___"
+**Voorbeeld:** "De kat zat op de \_\_\_"
 Het model berekent kansen:
 - "mat" → 65%
 - "stoel" → 15%
 - "bank" → 10%
@@ -126,6 +142,7 @@ Het model berekent kansen:
 → Kiest waarschijnlijk "mat" (maar niet altijd!)
 **Dit verklaart:**
 - Waarom het soms briljant is
 - Waarom het soms onzin produceert
 - Waarom dezelfde vraag verschillende antwoorden geeft
@@ -133,15 +150,18 @@ Het model berekent kansen:
 ---
 ### 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
@@ -153,6 +173,7 @@ Het model berekent kansen:
 ## DEEL 3: HET AI-LANDSCHAP (15 minuten)
 ### Slide 10: De Grote Spelers
 **Titel:** Welke AI tools zijn er?
 **Inhoud:**
@@ -168,6 +189,7 @@ Het model berekent kansen:
 ---
 ### Slide 11: Gratis vs Betaald
 **Titel:** Heb je de betaalde versie nodig?
 **Inhoud:**
@@ -183,6 +205,7 @@ Het model berekent kansen:
 ---
 ### Slide 12: Welke tool voor welke taak?
 **Titel:** Snelle vergelijking
 **Inhoud:**
@@ -201,12 +224,14 @@ Het model berekent kansen:
 ## DEEL 4: CHATGPT IN DE PRAKTIJK (25 minuten)
 ### Slide 13: ChatGPT Interface
 **Titel:** Laten we ChatGPT openen
 **Inhoud:**
-*[Live demonstratie - open chat.openai.com]*
+_[Live demonstratie - open chat.openai.com]_
 **Wat je ziet:**
 - Chatvenster (midden)
 - Nieuwe chat starten (linksboven)
 - Chat geschiedenis (links)
@@ -218,104 +243,121 @@ Het model berekent kansen:
 ---
 ### 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]*
+_[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]*
+_[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]*
+_[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]*
+_[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]*
+_[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
@@ -325,10 +367,12 @@ Het model berekent kansen:
 ---
 ### 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
@@ -336,19 +380,21 @@ Het model berekent kansen:
 **Bonus:** Bekijk je Custom Instructions
-*[Geef 5 minuten om te experimenteren]*
+_[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
@@ -358,15 +404,19 @@ Het model berekent kansen:
 ---
 ### 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
@@ -374,20 +424,24 @@ Het model berekent kansen:
 ---
 ### 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:**
@@ -395,11 +449,13 @@ Het model berekent kansen:
 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!
@@ -407,24 +463,29 @@ De technologieën waarmee je bouwt.
 ---
 ### 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"
@@ -439,10 +500,12 @@ De technologieën waarmee je bouwt.
 ## 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
@@ -454,9 +517,11 @@ 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
       ↓
@@ -471,6 +536,7 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 ```
 **Waarom eerst ChatGPT?**
 - v0 heeft beperkte gratis credits (~7/dag)
 - ChatGPT is "gratis" voor prompt optimalisatie
 - Je tekening + beschrijving = perfecte prompt!
@@ -478,17 +544,20 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 ---
 ### Slide 29: Live Demo - Schets Maken
 **Titel:** Stap 1: Tekenen
 **Inhoud:**
-*[Docent tekent live op papier]*
+_[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
@@ -497,12 +566,14 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 ---
 ### Slide 30: Live Demo - Foto naar ChatGPT
 **Titel:** Stap 2 & 3: Foto + Beschrijving
 **Inhoud:**
-*[Docent maakt foto en upload naar ChatGPT]*
+_[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.
@@ -512,33 +583,37 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 > Stijl: Modern, minimalistisch, professioneel
 > Doel: SaaS landingspagina voor projectmanagement tool"
-*[Toon ChatGPT response]*
+_[Toon ChatGPT response]_
 ---
 ### Slide 31: Live Demo - Prompt naar v0
 **Titel:** Stap 4 & 5: v0.dev
 **Inhoud:**
-*[Docent kopieert prompt naar v0.dev]*
+_[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]*
+_[Toon resultaat]_
 ---
 ### Slide 32: Live Demo - Itereren
 **Titel:** Verfijnen in v0
 **Inhoud:**
-*[Docent itereert op het resultaat]*
+_[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"
@@ -548,16 +623,19 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 ---
 ### 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
@@ -567,12 +645,14 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 ## 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
@@ -586,6 +666,7 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 ---
 ### Slide 35: Opdracht Details
 **Titel:** Wat moet je specificeren?
 **Inhoud:**
@@ -598,20 +679,24 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 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!
@@ -619,14 +704,17 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 ---
 ### 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!
@@ -636,6 +724,7 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 ## DEEL 8: AFSLUITING (10 minuten)
 ### Slide 38: Samenvatting
 **Titel:** Wat hebben we geleerd?
 **Inhoud:**  
@@ -648,10 +737,12 @@ Tekening op papier → Foto → ChatGPT → Prompt → 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
@@ -663,34 +754,42 @@ Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
 ---
 ### 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."*
+_"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