Les 3: Cursor Basics

✅ Deze les is volledig uitgewerkt

Lesmateriaal

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

Vanaf nul npx create-next-app + Cursor openen
Skills/Docs configureren
Hero-component bouwen via Cmd+L
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:

.cursorrules genereren via Cmd+L
Hero-component bouwen (Cmd+L met specifieke prompt)
Styling-tweak op de CTA-knoppen (Cmd+K)
Eén extra feature naar keuze: FeatureCards / ContactForm / Footer
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

2.7 KiB Raw Blame History