# Les 3: Cursor Basics

> ✅ **Deze les is volledig uitgewerkt**

## Lesmateriaal

- [Slide Overzicht](../Les03-Cursor-Basics/Les03-Slide-Overzicht.md)
- [Docenttekst](../Les03-Cursor-Basics/Les03-Docenttekst.md)
- [Docenttekst Autocue](../Les03-Cursor-Basics/Les03-Docenttekst-Autocue.md)
- [Lesstof](../Les03-Cursor-Basics/Les03-Lesstof.md)
- [Lesopdracht](../Les03-Cursor-Basics/Les03-Lesopdracht.md)

---

## Deel
**Deel 1 — AI Foundations** (Les 1-3)

## Beschrijving
Praktische introductie van Cursor als de AI-powered editor voor de rest van de opleiding. Studenten activeren hun gratis Pro Student plan via cursor.com/students, configureren Skills/Docs voor Next.js + React + Tailwind, en bouwen hun eerste Hero-component met de drie hoofdsneltoetsen (Tab, Cmd+K, Cmd+L).

---

## Te Behandelen

### Theorie + demo (klassikaal)
- Wat is Cursor? VS Code-fork met AI ingebouwd
- Student Plan via cursor.com/students (500 fast requests/maand)
- Installatie + Pro Student verificatie
- Skills/Docs: Next.js, React, Tailwind toevoegen
- Eerste project via `npx create-next-app@latest`
- De drie hoofdsneltoetsen:
  - **Tab** — auto-completion (gratis, onbeperkt)
  - **Cmd+K** — inline edit (1 request per gebruik)
  - **Cmd+L** — chat-paneel (1 request per nieuwe context)
- Context via `@`-mentions (file, folder, code, docs, web, git)
- Request management (500/maand slim besteden)
- `.cursorrules` introductie

### Live demo's
1. Vanaf nul `npx create-next-app` + Cursor openen
2. Skills/Docs configureren
3. Hero-component bouwen via Cmd+L
4. Styling-tweak via Cmd+K

---

## Tools
- Cursor (Pro Student plan, gratis voor NOVI-studenten)
- Node.js + `npx`
- Next.js (App Router) + TypeScript + Tailwind CSS
- Git

---

## Lesopdracht (na pauze, ±75 minuten)

Studenten bouwen in hun eigen gescaffolde project:
1. `.cursorrules` genereren via Cmd+L
2. Hero-component bouwen (Cmd+L met specifieke prompt)
3. Styling-tweak op de CTA-knoppen (Cmd+K)
4. Eén extra feature naar keuze: FeatureCards / ContactForm / Footer
5. Eerste git commit

**Inleveren:** screenshot van `localhost:3000` + welke optie (A/B/C) gekozen.

---

## Leerdoelen
Na deze les kan de student:
- Cursor installeren en het Student Plan activeren
- Skills/Docs configureren voor Next.js, React en Tailwind
- Een nieuw Next.js project opzetten via `npx create-next-app`
- De drie hoofdsneltoetsen (Tab, Cmd+K, Cmd+L) actief gebruiken
- Context-mentions toepassen in chat (`@file`, `@folder`, `@docs`)
- Requests efficiënt beheren door taken te combineren in één prompt
- Een `.cursorrules`-bestand schrijven voor zijn project
- Componenten bouwen via Cmd+L en bijwerken via Cmd+K
- Een eerste git commit maken na een AI-gestuurde build