fix: update
This commit is contained in:
@@ -87,6 +87,10 @@ Hoe maak ik een nieuwe pagina in Next.js?
|
|||||||
|
|
||||||
Druk `Tab` om naar Build mode (🔨) te gaan.
|
Druk `Tab` om naar Build mode (🔨) te gaan.
|
||||||
|
|
||||||
|
**💡 BELANGRIJK: Eén prompt per taak!**
|
||||||
|
|
||||||
|
Splits je werk op in kleine stappen. Niet alles in één prompt!
|
||||||
|
|
||||||
**Opdracht: Maak een nieuwe pagina met componenten**
|
**Opdracht: Maak een nieuwe pagina met componenten**
|
||||||
|
|
||||||
#### Stap 1: Kies je pagina
|
#### Stap 1: Kies je pagina
|
||||||
@@ -95,19 +99,29 @@ Kies één van deze opties:
|
|||||||
- **Services** - Diensten pagina
|
- **Services** - Diensten pagina
|
||||||
- **Contact** - Contact pagina
|
- **Contact** - Contact pagina
|
||||||
|
|
||||||
#### Stap 2: Maak de pagina aan
|
#### Stap 2: Maak de pagina structuur
|
||||||
|
**Prompt 1:**
|
||||||
```
|
```
|
||||||
Maak een nieuwe pagina /about (of /services of /contact).
|
Maak een nieuwe pagina /about (of /services of /contact) met een basis layout.
|
||||||
De pagina moet minimaal 2 componenten bevatten:
|
```
|
||||||
- Een hero sectie met titel en beschrijving
|
|
||||||
- Een content sectie (bijv. team cards, diensten lijst, of contact info)
|
#### Stap 3: Voeg componenten toe
|
||||||
|
**Prompt 2:**
|
||||||
|
```
|
||||||
|
Voeg een hero sectie toe aan de /about pagina met titel en beschrijving.
|
||||||
Gebruik Tailwind CSS voor styling.
|
Gebruik Tailwind CSS voor styling.
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Stap 3: Voeg navigatie toe
|
**Prompt 3:**
|
||||||
|
```
|
||||||
|
Voeg een content sectie toe onder de hero (bijv. team cards, diensten lijst, of contact info).
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Stap 4: Voeg navigatie toe
|
||||||
|
**Prompt 4:**
|
||||||
```
|
```
|
||||||
@app/page.tsx
|
@app/page.tsx
|
||||||
Voeg een link toe naar de nieuwe pagina.
|
Voeg een link toe naar de /about pagina.
|
||||||
De link moet zichtbaar zijn in de hero of header.
|
De link moet zichtbaar zijn in de hero of header.
|
||||||
Gebruik Next.js Link component.
|
Gebruik Next.js Link component.
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -21,18 +21,26 @@ Kies bij de prompts:
|
|||||||
- Tailwind CSS: Yes
|
- Tailwind CSS: Yes
|
||||||
- App Router: Yes
|
- App Router: Yes
|
||||||
|
|
||||||
### Stap 2: Configureer OpenCode
|
### Stap 2: Configureer OpenCode Desktop App
|
||||||
|
|
||||||
```bash
|
1. Open de Desktop App
|
||||||
opencode
|
2. Open je projectfolder
|
||||||
```
|
3. Selecteer OpenCode Zen → GLM 4.7 (gratis)
|
||||||
|
|
||||||
Selecteer OpenCode Zen → GLM 4.7 (gratis).
|
|
||||||
|
|
||||||
### Stap 3: Bouw minimaal 3 componenten
|
### Stap 3: Bouw minimaal 3 componenten
|
||||||
|
|
||||||
Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
|
Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
|
||||||
|
|
||||||
|
**⚠️ BELANGRIJK: Eén prompt per taak!**
|
||||||
|
|
||||||
|
Maak niet één grote prompt voor alles. Verdeel je werk:
|
||||||
|
- Prompt 1: "Maak een Header component met logo en navigatie"
|
||||||
|
- Prompt 2: "Voeg een mobile hamburger menu toe aan de Header"
|
||||||
|
- Prompt 3: "Maak een Hero section met headline en buttons"
|
||||||
|
- etc.
|
||||||
|
|
||||||
|
**Houd je prompts bij!** Je moet ze inleveren (zie Opdracht 2).
|
||||||
|
|
||||||
**Verplichte componenten:**
|
**Verplichte componenten:**
|
||||||
|
|
||||||
#### 1. Header/Navbar
|
#### 1. Header/Navbar
|
||||||
@@ -108,62 +116,42 @@ git push -u origin main
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Opdracht 2: Reflectie (300 woorden)
|
## Opdracht 2: Houd je Prompts Bij!
|
||||||
|
|
||||||
Schrijf over je OpenCode ervaring.
|
**Belangrijk:** Houd tijdens het bouwen een lijst bij van alle prompts die je gebruikt.
|
||||||
|
|
||||||
### Beantwoord deze vragen:
|
**Voorbeeld format:**
|
||||||
|
```
|
||||||
|
1. [Plan] "Analyseer dit project en beschrijf de folder structuur"
|
||||||
|
2. [Build] "Maak een Header component met logo links en navigatie rechts"
|
||||||
|
3. [Build] "Voeg een hamburger menu toe voor mobile"
|
||||||
|
4. [Build] "Maak een Hero section met grote headline en gradient achtergrond"
|
||||||
|
5. [Build] "Voeg twee buttons toe aan de Hero: primair en secundair"
|
||||||
|
6. [Build] "Maak een Features sectie met 3 cards in een grid"
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
1. **Les vs Huiswerk**
|
**Waarom?**
|
||||||
- Wat was het verschil tussen werken met een bestaand project (les) en een nieuw project (huiswerk)?
|
- In Les 3 gaan we iedereen langs
|
||||||
- Wat vond je makkelijker/moeilijker?
|
- We bespreken hoeveel prompts je hebt gebruikt
|
||||||
|
- En of je het werk goed hebt opgesplitst (één prompt per taak)
|
||||||
|
|
||||||
2. **Plan vs Build mode**
|
**Dit hoef je niet in te leveren**, maar zorg dat je het kunt laten zien in de les!
|
||||||
- Hoe heb je Plan mode gebruikt?
|
|
||||||
- Wanneer switch je naar Build?
|
|
||||||
|
|
||||||
3. **Vergelijking met v0**
|
|
||||||
- Hoe verschilt OpenCode van v0.dev?
|
|
||||||
- Wat zijn voor- en nadelen van beide?
|
|
||||||
|
|
||||||
4. **Workflow**
|
|
||||||
- Hoe vaak heb je gepusht naar Vercel?
|
|
||||||
- Wat is je ideale workflow geworden?
|
|
||||||
|
|
||||||
5. **Tips voor jezelf**
|
|
||||||
- Welke shortcuts gebruik je het meest?
|
|
||||||
- Wat zou je volgende keer anders doen?
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Inleveren via Teams
|
## Inleveren via Teams (voor Les 3)
|
||||||
|
|
||||||
1. **Link naar live website** (Vercel URL)
|
Post in Teams:
|
||||||
2. **Link naar GitHub repository**
|
1. **Link naar Vercel** (je live website)
|
||||||
3. **Screenshots** van je 3 componenten (desktop + mobile)
|
2. **Link naar GitHub** (je repository)
|
||||||
4. **Reflectie** als tekst of document
|
|
||||||
|
|
||||||
---
|
Dat is alles! In Les 3 gaan we kort iedereen langs:
|
||||||
|
- Bekijken wat je hebt gemaakt
|
||||||
|
- Bespreken hoeveel prompts je hebt gebruikt
|
||||||
|
- Delen wat goed werkte en wat niet
|
||||||
|
|
||||||
## Beoordeling
|
**💡 Tip:** Houd je prompt geschiedenis bij (zie Deel A hierboven) - we bespreken dit in de les!
|
||||||
|
|
||||||
| Onderdeel | Punten |
|
|
||||||
|-----------|--------|
|
|
||||||
| Header/Navbar compleet + responsive | 2 |
|
|
||||||
| Hero Section compleet | 2 |
|
|
||||||
| Derde component compleet | 2 |
|
|
||||||
| Deployed op Vercel | 1 |
|
|
||||||
| Reflectie (inhoud + inzicht) | 3 |
|
|
||||||
| **Totaal** | **10** |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Bonus (optioneel)
|
|
||||||
|
|
||||||
- [ ] Voeg meer dan 3 componenten toe
|
|
||||||
- [ ] Implementeer dark mode
|
|
||||||
- [ ] Voeg animaties toe met Framer Motion
|
|
||||||
- [ ] Maak meerdere pagina's
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -172,3 +160,4 @@ Schrijf over je OpenCode ervaring.
|
|||||||
- Check de OpenCode documentatie: opencode.ai/docs
|
- Check de OpenCode documentatie: opencode.ai/docs
|
||||||
- Bekijk de les slides nogmaals
|
- Bekijk de les slides nogmaals
|
||||||
- Stel vragen in Teams
|
- Stel vragen in Teams
|
||||||
|
- Stel vragen in Teams
|
||||||
|
|||||||
@@ -54,6 +54,9 @@
|
|||||||
- **Plan (📋):** leest, analyseert, verandert NIETS
|
- **Plan (📋):** leest, analyseert, verandert NIETS
|
||||||
- **Build (🔨):** schrijft code, maakt bestanden
|
- **Build (🔨):** schrijft code, maakt bestanden
|
||||||
- Wisselen: `Tab`
|
- Wisselen: `Tab`
|
||||||
|
- **💡 Eén prompt per taak!**
|
||||||
|
- ❌ "Maak complete website"
|
||||||
|
- ✅ "Maak header" → "Voeg hero toe" → etc.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -216,7 +219,8 @@ Help bij opstartproblemen:
|
|||||||
- create-next-app → 3 componenten
|
- create-next-app → 3 componenten
|
||||||
- Push naar GitHub
|
- Push naar GitHub
|
||||||
- **Vercel: Import Project** (zie slide 17!)
|
- **Vercel: Import Project** (zie slide 17!)
|
||||||
- 300 woorden reflectie
|
- **Inleveren:** Vercel + GitHub link in Teams
|
||||||
|
- **Les 3:** Iedereen langs, prompts bespreken
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -71,6 +71,10 @@ _[Wijs naar de problemen]_
|
|||||||
|
|
||||||
"Wisselen doe je met Tab. Workflow: eerst Plan om te begrijpen, dan Build om te bouwen."
|
"Wisselen doe je met Tab. Workflow: eerst Plan om te begrijpen, dan Build om te bouwen."
|
||||||
|
|
||||||
|
_[Belangrijk punt - benadrukken!]_
|
||||||
|
|
||||||
|
"En dit is cruciaal: **één prompt per taak**. Vraag niet 'maak een complete website met alles erop en eraan'. Splits het op: eerst de header, dan de hero, dan de volgende sectie. Zo houd je controle en kun je elk onderdeel goed reviewen."
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 7: Shortcuts
|
### Slide 7: Shortcuts
|
||||||
@@ -338,7 +342,7 @@ _[Ruimte voor vragen]_
|
|||||||
|
|
||||||
"Stappen: create-next-app, bouw 3 componenten, push naar GitHub, en dan - belangrijk - Vercel Import Project. Zoals ik eerder liet zien."
|
"Stappen: create-next-app, bouw 3 componenten, push naar GitHub, en dan - belangrijk - Vercel Import Project. Zoals ik eerder liet zien."
|
||||||
|
|
||||||
"In de huiswerkopdracht staan alle stappen uitgeschreven. Plus 300 woorden reflectie."
|
"Inleveren via Teams: gewoon je Vercel link en GitHub link. Volgende les gaan we iedereen even langs en bespreken we je prompts. Hoeveel prompts heb je gebruikt? Hoe heb je je werk opgesplitst? Dus houd je prompts bij!"
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -89,6 +89,10 @@
|
|||||||
|
|
||||||
**Workflow:** Plan → begrijpen → Build → bouwen
|
**Workflow:** Plan → begrijpen → Build → bouwen
|
||||||
|
|
||||||
|
**💡 Tip: Eén prompt per taak!**
|
||||||
|
- ❌ "Maak een complete website met header, hero en footer"
|
||||||
|
- ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer"
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Slide 7: Keyboard Shortcuts
|
### Slide 7: Keyboard Shortcuts
|
||||||
@@ -247,6 +251,12 @@ Of gebruik GitHub Desktop!
|
|||||||
- Voeg link op homepage toe naar de nieuwe pagina
|
- Voeg link op homepage toe naar de nieuwe pagina
|
||||||
4. Push naar GitHub → bekijk live!
|
4. Push naar GitHub → bekijk live!
|
||||||
|
|
||||||
|
**💡 Onthoud: Eén prompt per taak!**
|
||||||
|
- Eerst de pagina structuur
|
||||||
|
- Dan component 1
|
||||||
|
- Dan component 2
|
||||||
|
- Dan de link op homepage
|
||||||
|
|
||||||
**Doel:** Minimaal 2 keer deployen naar Vercel
|
**Doel:** Minimaal 2 keer deployen naar Vercel
|
||||||
|
|
||||||
**Tijd:** 85 minuten (09:50-10:15 + 10:30-11:30)
|
**Tijd:** 85 minuten (09:50-10:15 + 10:30-11:30)
|
||||||
@@ -284,9 +294,14 @@ Of gebruik GitHub Desktop!
|
|||||||
2. Bouw 3 componenten met OpenCode
|
2. Bouw 3 componenten met OpenCode
|
||||||
3. Push naar GitHub
|
3. Push naar GitHub
|
||||||
4. Vercel: Import Project → Deploy
|
4. Vercel: Import Project → Deploy
|
||||||
5. 300 woorden reflectie
|
|
||||||
|
|
||||||
**Stappen voor Vercel: zie slide 16!**
|
**Inleveren via Teams:**
|
||||||
|
- Link naar Vercel
|
||||||
|
- Link naar GitHub
|
||||||
|
|
||||||
|
**In Les 3:** We gaan iedereen langs en bespreken je prompts!
|
||||||
|
|
||||||
|
**Stappen voor Vercel: zie slide 17!**
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user