79 lines
2.7 KiB
Markdown
79 lines
2.7 KiB
Markdown
# 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
|