# Les 3 - Keynote Notes

**Spreektijd:** ~55 min | **Hands-on:** ~75 min | **Pauze:** 15 min (10:15-10:30)

---

## BLOK 1: WELKOM & MEDEDELING (10 min)

---

### Slide 1: Titelslide
- Welkom Les 3, vandaag: Cursor
- "Dit wordt je nieuwe favoriete tool!"

---

### Slide 2: Planning
- 09:00-09:30: Setup + Installatie
- 09:30-09:58: Features + Skills + Request tips
- 09:58-10:13: Live Demo nieuw project
- 10:13-10:15: Start Hands-on
- 10:15-10:30: PAUZE
- 10:30-11:45: Hands-on vervolg
- 11:45-12:00: Afsluiting

---

### Slide 3: Terugblik Les 2
- **OpenCode problemen:** token limits, EACCES, permission denied
- "Niet jullie schuld, beperking platform"
- **Waarom Cursor:** voor developers, meer requests, ingebouwde terminal, Skills

---

### Slide 4: Wat is Cursor?
- VS Code + AI ingebouwd
- **Gratis Student plan:** 500 fast requests/maand
- **5 features:** Chat, Inline Edit, Composer, Tab Completion, @mentions
- Hobby EERST → Student upgrade later

---

## BLOK 2: INSTALLATIE & SETUP (20 min)

---

### Slide 5: Download Cursor
- cursor.com → juiste OS versie
- macOS: Intel of Apple Silicon (let op!)
- Windows: Installer
- "Allemaal gedownload?"

---

### Slide 6: Account Aanmaken
- Sign Up → **Hobby account EERST**
- Email + wachtwoord verifiëren
- Student upgrade: cursor.com/students (later)
- ✓ CHECKPOINT: Cursor geopend, account gemaakt

---

### Slide 7: Interface Tour
- Activity Bar (links), Sidebar (files), Editor (midden)
- **Chat Panel:** Ctrl+L (rechts)
- **Terminal:** Ctrl+` (onderin) → alles in 1 window!

---

### Slide 8: Terminal Setup Check
- **SAMEN DOEN** - iedereen tegelijk
- `node -v` (v20+)
- `git --version` (2.x+)
- `npm -v` (10.x+)
- `npx -v` (10.x+) → **nodig voor create-next-app!**
- Help bij errors, CHECKPOINT

---

## BLOK 3: CURSOR FEATURES (15 min)

---

### Slide 9: Chat Panel (Ctrl+L)
- Vragen over code, AI ziet hele codebase
- Wees specifiek → bespaart requests
- "Analyseer dit project" → AI leest alles

---

### Slide 10: Inline Edit (Ctrl+K)
- Select code → Ctrl+K → instructie → Accept/Reject
- Voorbeeld: inline styles → Tailwind
- Voor: kleine aanpassingen, styling fixes

---

### Slide 11: Composer (Ctrl+I)
- Multi-file, grote taken
- "Voeg pagina toe" → AI maakt alles
- Preview → Accept → instant

---

### Slide 12: Tab Completion
- AI voorspelt code, druk Tab
- **GRATIS - kost geen premium request!**
- Benadrukken: gebruik dit voor kleine dingen

---

### Slide 13: @ Mentions
- @file, @folder, @web, @docs
- **@docs belangrijk:** verwijst naar geïnstalleerde docs
- "Hoe werkt App Router? @docs Next.js"

---

## BLOK 4: SKILLS, RULES & REQUESTS (15 min)

---

### Slide 14: Cursor Skills Installeren
- **SAMEN DOEN!**
- Settings → Features → Docs → Add
- Toevoegen: nextjs.org/docs, react.dev, tailwindcss.com/docs
- Test: Chat + @docs Next.js
- ✓ CHECKPOINT: Docs toegevoegd

---

### Slide 15: .cursorrules via Chat
- NIET handmatig schrijven
- Chat (Ctrl+L): "Genereer .cursorrules voor Next.js + Tailwind + TypeScript"
- Kopieer → maak bestand → save
- **1 request = goed besteed**

---

### Slide 16: Request Management
- Hobby = beperkte requests
- **Tab Completion = GRATIS**
- Chat/Composer/Inline Edit = 1 request
- Tips: denk eerst, combineer taken, gebruik Tab Completion
- "3 kleine prompts = 3 requests. 1 grote prompt = 1 request!"

---

## BLOK 5: LIVE DEMO (15 min)

---

### Slide 17: Demo Nieuw Project (blijft op scherm)
1. mkdir + git init (1 min)
2. npx create-next-app@latest . (2 min)
   - TypeScript, Tailwind, App Router: allemaal Yes
3. npm run dev → localhost:3000 (1 min)
4. Chat: genereer .cursorrules (3 min, 1 request)
5. Composer: HeroSection component (4 min, 1 request)
6. Refresh browser → toon resultaat (1 min)
7. git add + commit (1 min)
- **"Van niks naar werkende site in 15 min!"**

---

## BLOK 6: HANDS-ON (75 min + 15 min pauze)

---

### Slide 18: Opdracht (blijft op scherm)
- STAP 1: mkdir + git init + npx create-next-app + npm run dev
- STAP 2: Check Skills/Docs, genereer .cursorrules via Chat
- STAP 3: Bouw componenten (Hero, Features, Form, Footer)
- STAP 4: git commit
- **Let op requests! Max ~6-7 in de les**
- ☕ Pauze 10:15-10:30

**Checks:**
- 10:45: "Wie heeft npx gedaan? .cursorrules? Component?"
- 11:00: "Wie heeft 2 componenten? Requests over?"
- 11:30: "Wie heeft gecommit?"

---

## BLOK 7: AFSLUITING (15 min)

---

### Slide 19: Resultaten
- 3-4 studenten tonen werk
- "Welke componenten? Hoeveel requests?"

---

### Slide 20: Samenvatting
- ✅ Cursor setup + Skills/Docs
- ✅ .cursorrules via AI Chat
- ✅ npx create-next-app workflow
- ✅ Chat, Composer, Inline Edit, Tab Completion
- ✅ Request management (Tab = gratis!)

---

### Slide 21: Huiswerk - Debug Challenge
- Download zip van Teams
- **Fouten:** missende deps, syntax errors, inline styles
- Fix met Cursor terminal + AI
- Push naar GitHub
- Post op Teams: link + screenshot + beschrijving

---

### Slide 22: Volgende Les
- Les 4: Effectief Prompting & Iteratief Werken
- Huiswerk MOET af zijn!

---

## TIMING SUMMARY

| Blok | Onderdeel | Duur |
|------|-----------|------|
| 1 | Welkom & Mededeling | 10 min |
| 2 | Installatie & Setup | 20 min |
| 3 | Cursor Features | 15 min |
| 4 | Skills, Rules & Requests | 15 min |
| 5 | Live Demo | 15 min |
| **PAUZE** | | **15 min** |
| 6 | Hands-On | 75 min |
| 7 | Afsluiting | 15 min |
| **TOTAAL** | | **180 min** |