fix: add lesson files
This commit is contained in:
Tim Rijkse
177
Samenvattingen/Les01-Samenvatting.md
Normal file
177
Samenvattingen/Les01-Samenvatting.md
Normal file
@@ -0,0 +1,177 @@
|
||||
# Les 1: Introductie tot AI en Large Language Models
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 1: Fundamentals** (Les 1-3)
|
||||
|
||||
## Beschrijving
|
||||
Kennismaking met AI, LLMs, ChatGPT en de basis van prompt engineering. Praktische workflow van schets op papier naar werkende website met v0.dev.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Wat is AI?
|
||||
- Het AI-landschap: ChatGPT, Claude, Grok, Gemini
|
||||
- Gratis vs betaalde modellen (features, context windows, rate limits)
|
||||
- Wanneer welk model gebruiken
|
||||
- Large Language Models (LLMs) en next-token prediction
|
||||
- Hallucinaties en verificatie
|
||||
|
||||
### ChatGPT in de Praktijk
|
||||
- Interface rondleiding
|
||||
- Model kiezen (GPT-4o, GPT-4o with canvas, GPT-4)
|
||||
- Tijdelijke chat (privacy)
|
||||
- Afbeeldingen analyseren (image-to-text) ← Cruciaal voor workflow!
|
||||
- Bestanden uploaden (PDF, documenten)
|
||||
- Custom Instructions
|
||||
- Het geheugen van ChatGPT
|
||||
|
||||
### Prompt Engineering Basics
|
||||
- Wat is een prompt?
|
||||
- Slechte vs goede prompts
|
||||
- Prompt framework: Rol, Context, Taak, Format
|
||||
- **Tech stack specificeren** (React, Tailwind CSS)
|
||||
- **Kleuren en look & feel** (hex codes, stijl beschrijvingen)
|
||||
- Praktische tips
|
||||
|
||||
### De Slimme Workflow: Schets → Website
|
||||
1. **TEKEN** je idee op papier
|
||||
2. Maak een **FOTO** van je tekening
|
||||
3. Upload naar **CHATGPT** + beschrijf je wensen (tech stack, kleuren, stijl)
|
||||
4. ChatGPT maakt een gedetailleerde **PROMPT**
|
||||
5. Plak die prompt in **V0.DEV** → Website!
|
||||
6. **DEPLOY** naar Vercel
|
||||
|
||||
### v0.dev Demo
|
||||
- Wat is v0.dev (Vercel's AI UI generator)
|
||||
- Van schets naar code
|
||||
- Itereren met follow-up prompts
|
||||
- Deployment naar Vercel via GitHub
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- ChatGPT (chat.openai.com)
|
||||
- Claude (claude.ai) - optioneel
|
||||
- v0.dev
|
||||
- Vercel
|
||||
- GitHub
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### De Workflow Doorlopen
|
||||
|
||||
**Stap 1: Tekenen (10 min)**
|
||||
- Teken een hero section op papier
|
||||
- Simpele blokken en lijnen zijn genoeg
|
||||
- Geef layout aan: headline, tekst, button, afbeelding placeholder
|
||||
|
||||
**Stap 2: Foto maken (2 min)**
|
||||
- Maak duidelijke foto met telefoon
|
||||
|
||||
**Stap 3: ChatGPT - Schets + Beschrijving (15 min)**
|
||||
|
||||
Upload foto en beschrijf:
|
||||
```
|
||||
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: [bijv. Primary #2563EB]
|
||||
Stijl: [bijv. Modern, minimalistisch]
|
||||
Doel: [bijv. SaaS landingspagina]
|
||||
```
|
||||
|
||||
**Stap 4: Prompt kopiëren (1 min)**
|
||||
- Kopieer de gegenereerde Engelse prompt
|
||||
|
||||
**Stap 5: v0.dev genereren (15 min)**
|
||||
- Plak prompt in v0.dev
|
||||
- Itereer indien nodig
|
||||
- Let op: ~7 gratis generaties per dag
|
||||
|
||||
**Stap 6: Deploy naar Vercel (10 min)**
|
||||
- Add Integration → GitHub koppelen
|
||||
- v0 maakt automatisch repository
|
||||
- Deploy → Live URL!
|
||||
|
||||
### Op te Leveren
|
||||
- Foto van papieren schets
|
||||
- Screenshot ChatGPT conversatie
|
||||
- Screenshot v0.dev resultaat
|
||||
- Vercel URL
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Deel 1: Reflectie (500 woorden)
|
||||
Schrijf over je eerste ervaring met AI tools:
|
||||
- Wat heb ik geleerd?
|
||||
- Mijn ervaring met de workflow
|
||||
- Kritische kanttekeningen
|
||||
- Vooruitblik
|
||||
|
||||
### Deel 2: AI Use Cases (5 stuks)
|
||||
Bedenk 5 concrete use cases voor AI in development:
|
||||
- De situatie
|
||||
- De AI-toepassing
|
||||
- Het verwachte resultaat
|
||||
- Mogelijke valkuilen
|
||||
|
||||
### Deel 3: Tweede Schets → Website
|
||||
Doorloop de workflow opnieuw met een ANDER component:
|
||||
- Features section
|
||||
- Pricing table
|
||||
- Testimonials sectie
|
||||
- Contact formulier
|
||||
- Footer
|
||||
- Of eigen keuze
|
||||
|
||||
**Specificeer weer:**
|
||||
- Tech stack (React + Tailwind)
|
||||
- Kleuren
|
||||
- Stijl/Look & Feel
|
||||
- Doel
|
||||
|
||||
**Inleveren:** Via Teams chat
|
||||
|
||||
---
|
||||
|
||||
## Timing Overzicht
|
||||
|
||||
| Blok | Onderwerp | Duur |
|
||||
|------|-----------|------|
|
||||
| 1 | Welkom & Introductie | 13 min |
|
||||
| 2 | Wat is AI? | 20 min |
|
||||
| 3 | AI Landscape | 12 min |
|
||||
| 4 | ChatGPT in de Praktijk | 25 min |
|
||||
| 5 | Prompt Engineering | 15 min |
|
||||
| 6 | Live Demo v0.dev | 27 min |
|
||||
| 7 | Hands-on Opdracht | 53 min |
|
||||
| 8 | Afsluiting | 15 min |
|
||||
|
||||
**Totaal: 180 minuten (3 uur)**
|
||||
|
||||
---
|
||||
|
||||
## Benodigdheden
|
||||
- Laptop met internetverbinding
|
||||
- **Papier en pen** ← Belangrijk!
|
||||
- ChatGPT account (gratis)
|
||||
- GitHub account
|
||||
- Projectiescherm (docent)
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Uitleggen hoe LLMs werken (next-token prediction)
|
||||
- Het AI-landschap beschrijven (ChatGPT, Claude, Gemini, Grok)
|
||||
- ChatGPT praktisch gebruiken (interface, afbeeldingen, documenten)
|
||||
- Effectieve prompts schrijven met tech stack, kleuren en stijl
|
||||
- De schets-naar-website workflow toepassen
|
||||
- Een component genereren in v0.dev en deployen naar Vercel
|
||||
Reference in New Issue
Block a user