fix: add lesson 3
This commit is contained in:
Tim Rijkse
231
v2/Les03-Cursor-Basics/Les03-Docenttekst-Notes.md
Normal file
231
v2/Les03-Cursor-Basics/Les03-Docenttekst-Notes.md
Normal file
@@ -0,0 +1,231 @@
|
||||
# Les 3 - Keynote Notes
|
||||
|
||||
**Spreektijd:** ~55 min | **Hands-on:** ~75 min | **Pauze:** 15 min (10:15-10:30)
|
||||
|
||||
---
|
||||
|
||||
## BLOK 1: WELKOM & MEDEDELING (10 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 1: Titelslide
|
||||
- Welkom Les 3, vandaag: Cursor
|
||||
- "Dit wordt je nieuwe favoriete tool!"
|
||||
|
||||
---
|
||||
|
||||
### Slide 2: Planning
|
||||
- 09:00-09:30: Setup + Installatie
|
||||
- 09:30-09:58: Features + Skills + Request tips
|
||||
- 09:58-10:13: Live Demo nieuw project
|
||||
- 10:13-10:15: Start Hands-on
|
||||
- 10:15-10:30: PAUZE
|
||||
- 10:30-11:45: Hands-on vervolg
|
||||
- 11:45-12:00: Afsluiting
|
||||
|
||||
---
|
||||
|
||||
### Slide 3: Terugblik Les 2
|
||||
- **OpenCode problemen:** token limits, EACCES, permission denied
|
||||
- "Niet jullie schuld, beperking platform"
|
||||
- **Waarom Cursor:** voor developers, meer requests, ingebouwde terminal, Skills
|
||||
|
||||
---
|
||||
|
||||
### Slide 4: Wat is Cursor?
|
||||
- VS Code + AI ingebouwd
|
||||
- **Gratis Student plan:** 500 fast requests/maand
|
||||
- **5 features:** Chat, Inline Edit, Composer, Tab Completion, @mentions
|
||||
- Hobby EERST → Student upgrade later
|
||||
|
||||
---
|
||||
|
||||
## BLOK 2: INSTALLATIE & SETUP (20 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 5: Download Cursor
|
||||
- cursor.com → juiste OS versie
|
||||
- macOS: Intel of Apple Silicon (let op!)
|
||||
- Windows: Installer
|
||||
- "Allemaal gedownload?"
|
||||
|
||||
---
|
||||
|
||||
### Slide 6: Account Aanmaken
|
||||
- Sign Up → **Hobby account EERST**
|
||||
- Email + wachtwoord verifiëren
|
||||
- Student upgrade: cursor.com/students (later)
|
||||
- ✓ CHECKPOINT: Cursor geopend, account gemaakt
|
||||
|
||||
---
|
||||
|
||||
### Slide 7: Interface Tour
|
||||
- Activity Bar (links), Sidebar (files), Editor (midden)
|
||||
- **Chat Panel:** Ctrl+L (rechts)
|
||||
- **Terminal:** Ctrl+` (onderin) → alles in 1 window!
|
||||
|
||||
---
|
||||
|
||||
### Slide 8: Terminal Setup Check
|
||||
- **SAMEN DOEN** - iedereen tegelijk
|
||||
- `node -v` (v20+)
|
||||
- `git --version` (2.x+)
|
||||
- `npm -v` (10.x+)
|
||||
- `npx -v` (10.x+) → **nodig voor create-next-app!**
|
||||
- Help bij errors, CHECKPOINT
|
||||
|
||||
---
|
||||
|
||||
## BLOK 3: CURSOR FEATURES (15 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 9: Chat Panel (Ctrl+L)
|
||||
- Vragen over code, AI ziet hele codebase
|
||||
- Wees specifiek → bespaart requests
|
||||
- "Analyseer dit project" → AI leest alles
|
||||
|
||||
---
|
||||
|
||||
### Slide 10: Inline Edit (Ctrl+K)
|
||||
- Select code → Ctrl+K → instructie → Accept/Reject
|
||||
- Voorbeeld: inline styles → Tailwind
|
||||
- Voor: kleine aanpassingen, styling fixes
|
||||
|
||||
---
|
||||
|
||||
### Slide 11: Composer (Ctrl+I)
|
||||
- Multi-file, grote taken
|
||||
- "Voeg pagina toe" → AI maakt alles
|
||||
- Preview → Accept → instant
|
||||
|
||||
---
|
||||
|
||||
### Slide 12: Tab Completion
|
||||
- AI voorspelt code, druk Tab
|
||||
- **GRATIS - kost geen premium request!**
|
||||
- Benadrukken: gebruik dit voor kleine dingen
|
||||
|
||||
---
|
||||
|
||||
### Slide 13: @ Mentions
|
||||
- @file, @folder, @web, @docs
|
||||
- **@docs belangrijk:** verwijst naar geïnstalleerde docs
|
||||
- "Hoe werkt App Router? @docs Next.js"
|
||||
|
||||
---
|
||||
|
||||
## BLOK 4: SKILLS, RULES & REQUESTS (15 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 14: Cursor Skills Installeren
|
||||
- **SAMEN DOEN!**
|
||||
- Settings → Features → Docs → Add
|
||||
- Toevoegen: nextjs.org/docs, react.dev, tailwindcss.com/docs
|
||||
- Test: Chat + @docs Next.js
|
||||
- ✓ CHECKPOINT: Docs toegevoegd
|
||||
|
||||
---
|
||||
|
||||
### Slide 15: .cursorrules via Chat
|
||||
- NIET handmatig schrijven
|
||||
- Chat (Ctrl+L): "Genereer .cursorrules voor Next.js + Tailwind + TypeScript"
|
||||
- Kopieer → maak bestand → save
|
||||
- **1 request = goed besteed**
|
||||
|
||||
---
|
||||
|
||||
### Slide 16: Request Management
|
||||
- Hobby = beperkte requests
|
||||
- **Tab Completion = GRATIS**
|
||||
- Chat/Composer/Inline Edit = 1 request
|
||||
- Tips: denk eerst, combineer taken, gebruik Tab Completion
|
||||
- "3 kleine prompts = 3 requests. 1 grote prompt = 1 request!"
|
||||
|
||||
---
|
||||
|
||||
## BLOK 5: LIVE DEMO (15 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 17: Demo Nieuw Project (blijft op scherm)
|
||||
1. mkdir + git init (1 min)
|
||||
2. npx create-next-app@latest . (2 min)
|
||||
- TypeScript, Tailwind, App Router: allemaal Yes
|
||||
3. npm run dev → localhost:3000 (1 min)
|
||||
4. Chat: genereer .cursorrules (3 min, 1 request)
|
||||
5. Composer: HeroSection component (4 min, 1 request)
|
||||
6. Refresh browser → toon resultaat (1 min)
|
||||
7. git add + commit (1 min)
|
||||
- **"Van niks naar werkende site in 15 min!"**
|
||||
|
||||
---
|
||||
|
||||
## BLOK 6: HANDS-ON (75 min + 15 min pauze)
|
||||
|
||||
---
|
||||
|
||||
### Slide 18: Opdracht (blijft op scherm)
|
||||
- STAP 1: mkdir + git init + npx create-next-app + npm run dev
|
||||
- STAP 2: Check Skills/Docs, genereer .cursorrules via Chat
|
||||
- STAP 3: Bouw componenten (Hero, Features, Form, Footer)
|
||||
- STAP 4: git commit
|
||||
- **Let op requests! Max ~6-7 in de les**
|
||||
- ☕ Pauze 10:15-10:30
|
||||
|
||||
**Checks:**
|
||||
- 10:45: "Wie heeft npx gedaan? .cursorrules? Component?"
|
||||
- 11:00: "Wie heeft 2 componenten? Requests over?"
|
||||
- 11:30: "Wie heeft gecommit?"
|
||||
|
||||
---
|
||||
|
||||
## BLOK 7: AFSLUITING (15 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 19: Resultaten
|
||||
- 3-4 studenten tonen werk
|
||||
- "Welke componenten? Hoeveel requests?"
|
||||
|
||||
---
|
||||
|
||||
### Slide 20: Samenvatting
|
||||
- ✅ Cursor setup + Skills/Docs
|
||||
- ✅ .cursorrules via AI Chat
|
||||
- ✅ npx create-next-app workflow
|
||||
- ✅ Chat, Composer, Inline Edit, Tab Completion
|
||||
- ✅ Request management (Tab = gratis!)
|
||||
|
||||
---
|
||||
|
||||
### Slide 21: Huiswerk - Debug Challenge
|
||||
- Download zip van Teams
|
||||
- **Fouten:** missende deps, syntax errors, inline styles
|
||||
- Fix met Cursor terminal + AI
|
||||
- Push naar GitHub
|
||||
- Post op Teams: link + screenshot + beschrijving
|
||||
|
||||
---
|
||||
|
||||
### Slide 22: Volgende Les
|
||||
- Les 4: Effectief Prompting & Iteratief Werken
|
||||
- Huiswerk MOET af zijn!
|
||||
|
||||
---
|
||||
|
||||
## TIMING SUMMARY
|
||||
|
||||
| Blok | Onderdeel | Duur |
|
||||
|------|-----------|------|
|
||||
| 1 | Welkom & Mededeling | 10 min |
|
||||
| 2 | Installatie & Setup | 20 min |
|
||||
| 3 | Cursor Features | 15 min |
|
||||
| 4 | Skills, Rules & Requests | 15 min |
|
||||
| 5 | Live Demo | 15 min |
|
||||
| **PAUZE** | | **15 min** |
|
||||
| 6 | Hands-On | 75 min |
|
||||
| 7 | Afsluiting | 15 min |
|
||||
| **TOTAAL** | | **180 min** |
|
||||
Reference in New Issue
Block a user