# Les 3: Cursor Setup & Basics

> ✅ **Les gegeven op woensdag 26 februari 2026**
>
> Lesmateriaal volledig uitgewerkt:
> - [Slide-Overzicht](../Les03-Cursor-Basics/Les03-Slide-Overzicht.md)
> - [Lesplan](../Les03-Cursor-Basics/Les03-Lesplan.md)
> - [Docenttekst](../Les03-Cursor-Basics/Les03-Docenttekst.md)
> - [Keynote Notes](../Les03-Cursor-Basics/Les03-Docenttekst-Notes.md)
> - [Lesopdracht](../Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md)
> - [Huiswerkopdracht](../Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md)
> - [Hands-On Opdracht (PDF)](../Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf)
> - [Huiswerkopdracht (PDF)](../Les03-Cursor-Basics/Les03-Huiswerkopdracht.pdf)
> - Debug Challenge zips: standaard (5 fouten), hard (12 fouten), super hard (18 fouten)

---

## Hoofdstuk
**Deel 1: AI Foundations** (Les 1-4)

## Context
Oorspronkelijk zou les 3 gaan over AI Ethics, Privacy & Security. Tim heeft besloten om in plaats daarvan een praktische les over Cursor te geven. Dit sluit beter aan bij wat studenten nodig hebben en was een goede keuze — studenten waren enthousiast.

## Beschrijving
Praktische les over Cursor als primaire AI-powered editor. Studenten leren Cursor installeren, configureren en gebruiken om een compleet Next.js project op te zetten.

---

## Te Behandelen

### Blok 1: Cursor Overzicht (15 min)
- Wat is Cursor? VS Code fork met AI
- Free vs Pro vs Student Plan (500 fast requests/maand)
- Request types: Tab Completion (gratis), Chat, Composer, Inline Edit (elk 1 request)

### Blok 2: Samen Doen — Setup Check (10 min)
- Terminal check: node -v, git --version, npm -v, npx -v
- Cursor Student Plan activeren via cursor.com/students

### Blok 3: Cursor Skills & Docs (10 min)
- Settings → Features → Docs: Next.js, React, Tailwind toevoegen
- @docs mentions in Chat voor framework-specifieke hulp

### Blok 4: Nieuw Project Aanmaken (15 min)
- git init → npx create-next-app@latest
- TypeScript, Tailwind, App Router, src/ directory

### Blok 5: .cursorrules Genereren (10 min)
- Via Cursor Chat (Ctrl+L / Cmd+L) — kost 1 request
- Project-specifieke regels voor Next.js, Tailwind, TypeScript

### Blok 6: Keyboard Shortcuts & Request Management (15 min)
- Tab = gratis autocomplete
- Ctrl+K / Cmd+K = Inline Edit (1 request)
- Ctrl+L / Cmd+L = Chat (1 request)
- Ctrl+I / Cmd+I = Composer (1 request)
- Slim combineren van taken in 1 prompt

### Pauze (15 min)

### Blok 7: Hands-On — Bouw Componenten (75 min)
- Taak 1: Hero Component via Composer
- Taak 2: Styling tweaken via Inline Edit
- Taak 3: Extra feature naar keuze (FeatureCards, ContactForm, of Footer)
- Git commit
- Verder bouwen voor wie klaar is

---

## Tools
- Cursor (Student Plan — gratis Pro voor studenten)
- Git & GitHub
- Node.js + npx
- Next.js, TypeScript, Tailwind CSS

---

## Lesopdracht (75 min — hands-on na pauze)
Beschikbaar als losse PDF: [Les03-Hands-On-Opdracht.pdf](../Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf)

Stappen:
1. Nieuw project aanmaken (git init, npx create-next-app, npm run dev)
2. Cursor configureren (Skills/Docs, .cursorrules genereren)
3. Componenten bouwen (Hero via Composer, styling via Inline Edit, extra feature)
4. Git commit

---

## Huiswerk: Debug Challenge

Studenten krijgen een intentioneel kapot Next.js project en moeten het repareren met Cursor. Drie moeilijkheidsniveaus:

| Niveau | Fouten | Categorieën | Geschatte tijd |
|--------|--------|-------------|----------------|
| **Standaard** | 5 | Missing deps, typos, missing imports, inline styles → Tailwind | 1.5-2 uur |
| **Hard** | 12 | + logische fouten, React anti-patterns, useEffect bugs | 2-3 uur |
| **Super Hard** | 18 | + Next.js Server/Client, circular deps, TypeScript, Context | 3-4 uur |

Inleveren via Teams: GitHub link + screenshot + beschrijving van gefixt fouten.

Deadline: Vóór Les 4.

---

## Leerdoelen
Na deze les kan de student:
- Cursor installeren en het Student Plan activeren
- Skills/Docs configureren voor Next.js, React en Tailwind
- Een .cursorrules bestand genereren via Cursor Chat
- Een nieuw Next.js project opzetten met npx create-next-app
- De keyboard shortcuts (Tab, Ctrl+K, Ctrl+L, Ctrl+I) toepassen
- Requests efficiënt beheren door taken te combineren
- Componenten bouwen met Composer en Inline Edit
- Fouten debuggen met behulp van Cursor