novi-lessons/Les03-Cursor-Basics/Les03-Lesplan.md

Lesplan Les 3: Cursor - AI-Powered Code Editor

---

Lesgegevens

Item	Details
Les	3 van 18
Onderwerp	Cursor - AI-Powered Code Editor
Deel	1: AI Foundations (Les 1-4)
Duur	3 uur (180 minuten)
Spreektijd	~55 minuten
Hands-on	~75 minuten
Pauze	15 minuten (10:15-10:30)

---

Leerdoelen

Na deze les kan de student:

1. Uitleggen wat Cursor is en waarom het beter is dan OpenCode
2. Cursor installeren en een Hobby/Student account aanmaken
3. Cursor Skills/Docs installeren voor Next.js, React en Tailwind
4. Een .cursorrules bestand genereren met AI Chat
5. Een nieuw Next.js project opzetten met npx create-next-app
6. De vijf AI features gebruiken: Chat, Inline Edit, Composer, Tab Completion, @mentions
7. Efficiënt omgaan met requests (Hobby account management)

---

Voorbereiding docent

Technische setup

• Cursor geïnstalleerd
• Student account geactiveerd
• npx create-next-app getest
• Cursor Skills/Docs toegevoegd (Next.js, React, Tailwind)
• Demo .cursorrules gegenereerd
• Huiswerk zipbestand gemaakt (les3-debug-challenge.zip) met:
  • Missende dependencies in package.json
  • Syntax errors in componenten
  • Inline styles die naar Tailwind moeten
  • Missing imports

Student voorkennis (uit Les 1-2)

• GitHub account, basis git
• npm/node.js geïnstalleerd
• Terminal basics

---

Lesverloop

Blok 1: Welkom & Mededeling (10 minuten)

Tijd	Activiteit	Slides
09:00-09:02	Welkom, titelslide	1
09:02-09:04	Planning vandaag	2
09:04-09:07	Terugblik Les 2, waarom Cursor	3
09:07-09:10	Wat is Cursor? Features overzicht	4

Kernboodschap: "Cursor is speciaal gemaakt voor developers. Geen token limits, ingebouwde terminal, gratis Student plan."

---

Blok 2: Installatie & Setup (20 minuten)

Tijd	Activiteit	Slides
09:10-09:13	Download Cursor	5
09:13-09:18	Account aanmaken (Hobby → Student later)	6
09:18-09:22	Interface tour	7
09:22-09:30	Terminal Setup Check SAMEN	8

Checkpoints:

• ✓ Cursor geïnstalleerd en geopend
• ✓ node -v, git --version, npm -v werken

---

Blok 3: Cursor Features (15 minuten)

Tijd	Activiteit	Slides
09:30-09:33	Chat Panel (Ctrl+L)	9
09:33-09:36	Inline Edit (Ctrl+K)	10
09:36-09:39	Composer (Ctrl+I)	11
09:39-09:41	Tab Completion (GRATIS!)	12
09:41-09:43	@ Mentions + @docs	13

Kernboodschap: "Vijf features, elk voor ander doel. Tab Completion is GRATIS - gebruik dat voor kleine dingen!"

---

Blok 4: Skills, Rules & Requests (15 minuten)

Tijd	Activiteit	Slides
09:43-09:48	Cursor Skills installeren (Next.js, React, Tailwind docs) - SAMEN DOEN	14
09:48-09:53	.cursorrules genereren met Chat	15
09:53-09:58	Request management tips (Hobby account)	16

Checkpoints:

• ✓ Docs toegevoegd in Cursor Settings
• ✓ Studenten begrijpen request kosten

Belangrijk: Benadruk dat Tab Completion GRATIS is. Chat/Composer/Inline Edit kosten elk 1 request.

---

Blok 5: Live Demo (15 minuten)

Tijd	Activiteit	Slides
09:58-10:13	LIVE DEMO: Nieuw project workflow	17

Demo flow:

1. mkdir + git init (1 min)
2. npx create-next-app@latest . (2 min)
3. npm run dev → toon localhost:3000 (1 min)
4. Chat: genereer .cursorrules (3 min, 1 request)
5. Composer: maak HeroSection component (4 min, 1 request)
6. Toon resultaat in browser (1 min)
7. git add + commit (1 min)

Doel: Studenten zien de hele workflow in 15 minuten

---

Blok 6: Hands-On Opdracht (75 min + 15 min pauze)

Deel 1 (10:13-10:15, intro + start)

Tijd	Activiteit
10:13-10:15	Opdracht uitleggen (Slide 18 op scherm)

Hands-on Deel 1 (start - 10:15)

Studenten starten met STAP 1 (npx create-next-app)

---

☕ PAUZE (10:15-10:30)

---

Hands-on Deel 2 (10:30-11:45)

Check [10:45]: "Wie heeft npx gedaan? Wie heeft .cursorrules? Wie heeft een component?"

Check [11:00]: "Wie heeft al 2 componenten? Hoeveel requests heb je nog over?"

Check [11:30]: "Wie heeft git gecommit? Wie wil zijn project laten zien?"

---

Blok 7: Afsluiting (15 minuten)

Tijd	Activiteit	Slides
11:45-11:50	Resultaten delen (3-4 studenten)	19
11:50-11:53	Samenvatting	20
11:53-11:58	Huiswerk uitleggen (DEBUG CHALLENGE!)	21
11:58-12:00	Volgende les preview	22

---

Materialen

• Slide-Overzicht: Les03-Slide-Overzicht.md
• Lesopdracht: Les03-Bijlage-A-Lesopdracht.md
• Huiswerkopdracht: Les03-Bijlage-B-Huiswerkopdracht.md

Huiswerk zipbestand voorbereiden

les3-debug-challenge.zip moet bevatten:

• Een Next.js project (App Router, TypeScript, Tailwind)
• package.json met 1-2 missende dependencies (bijv. lucide-react gebruikt maar niet in deps)
• 1-2 syntax errors (missing closing tag, typo in import)
• 3-4 componenten met inline styles (style={{...}}) die naar Tailwind moeten
• Een component met een missing import

---

Veelvoorkomende problemen

Probleem	Oorzaak	Oplossing
npx create-next-app faalt	Node.js te oud	nvm install 20 && nvm use 20
npm run dev werkt niet	Verkeerde folder	cd naar project folder, npm install
Chat/Composer reageert niet	Requests op of internet	Check cursor.com/account, check internet
.cursorrules werkt niet	Niet in root of typo	Check bestandsnaam en locatie
Cursor crash	Memory issue	Restart Cursor
Terminal commands not found	PATH niet goed	Restart Cursor, check nvm

Request Budget Planning

Activiteit	Requests
.cursorrules genereren (Chat)	1
Hero component (Composer)	1
Styling tweaken (Inline Edit)	1
Extra component (Composer)	1
Vragen/debugging (Chat)	2-3
Totaal in de les	~6-7

Tab Completion kost GEEN requests - benadruk dit!

---

Voorbereiding Tim

1-2 dagen voor les:

• npx create-next-app testen op eigen machine
• Cursor Skills/Docs toevoegen
• .cursorrules genereren als demo
• Huiswerk zip maken met fouten
• Upload zip naar Teams

Dag voor les:

• Projector test
• Internet snelheid checken
• Cursor fresh install testen (wie upgrade snel?)

Tijdens les:

• Iedereen npx create-next-app laten draaien
• Terminal checks KRITISCH (slide 8)
• Request management benadrukken
• Active walking tijdens hands-on

---

Succes met Les 3!