diff --git a/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md b/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md index 2bae83f..4dc8619 100644 --- a/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md +++ b/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md @@ -87,6 +87,10 @@ Hoe maak ik een nieuwe pagina in Next.js? 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** #### Stap 1: Kies je pagina @@ -95,19 +99,29 @@ Kies één van deze opties: - **Services** - Diensten 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). -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) +Maak een nieuwe pagina /about (of /services of /contact) met een basis layout. +``` + +#### 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. ``` -#### 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 -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. Gebruik Next.js Link component. ``` diff --git a/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md b/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md index 3363731..2c74040 100644 --- a/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md +++ b/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md @@ -21,18 +21,26 @@ Kies bij de prompts: - Tailwind CSS: Yes - App Router: Yes -### Stap 2: Configureer OpenCode +### Stap 2: Configureer OpenCode Desktop App -```bash -opencode -``` - -Selecteer OpenCode Zen → GLM 4.7 (gratis). +1. Open de Desktop App +2. Open je projectfolder +3. Selecteer OpenCode Zen → GLM 4.7 (gratis) ### Stap 3: Bouw minimaal 3 componenten 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:** #### 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** - - Wat was het verschil tussen werken met een bestaand project (les) en een nieuw project (huiswerk)? - - Wat vond je makkelijker/moeilijker? +**Waarom?** +- In Les 3 gaan we iedereen langs +- We bespreken hoeveel prompts je hebt gebruikt +- En of je het werk goed hebt opgesplitst (één prompt per taak) -2. **Plan vs Build mode** - - 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? +**Dit hoef je niet in te leveren**, maar zorg dat je het kunt laten zien in de les! --- -## Inleveren via Teams +## Inleveren via Teams (voor Les 3) -1. **Link naar live website** (Vercel URL) -2. **Link naar GitHub repository** -3. **Screenshots** van je 3 componenten (desktop + mobile) -4. **Reflectie** als tekst of document +Post in Teams: +1. **Link naar Vercel** (je live website) +2. **Link naar GitHub** (je repository) ---- +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 - -| 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 +**💡 Tip:** Houd je prompt geschiedenis bij (zie Deel A hierboven) - we bespreken dit in de les! --- @@ -172,3 +160,4 @@ Schrijf over je OpenCode ervaring. - Check de OpenCode documentatie: opencode.ai/docs - Bekijk de les slides nogmaals - Stel vragen in Teams +- Stel vragen in Teams diff --git a/Les02-OpenCode/Les02-Docenttekst-Notes.md b/Les02-OpenCode/Les02-Docenttekst-Notes.md index f3206a1..d04c14a 100644 --- a/Les02-OpenCode/Les02-Docenttekst-Notes.md +++ b/Les02-OpenCode/Les02-Docenttekst-Notes.md @@ -54,6 +54,9 @@ - **Plan (📋):** leest, analyseert, verandert NIETS - **Build (🔨):** schrijft code, maakt bestanden - 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 - Push naar GitHub - **Vercel: Import Project** (zie slide 17!) -- 300 woorden reflectie +- **Inleveren:** Vercel + GitHub link in Teams +- **Les 3:** Iedereen langs, prompts bespreken --- diff --git a/Les02-OpenCode/Les02-Docenttekst.md b/Les02-OpenCode/Les02-Docenttekst.md index 49b701e..f26b3a8 100644 --- a/Les02-OpenCode/Les02-Docenttekst.md +++ b/Les02-OpenCode/Les02-Docenttekst.md @@ -71,6 +71,10 @@ _[Wijs naar de problemen]_ "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 @@ -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." -"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!" --- diff --git a/Les02-OpenCode/Les02-Slide-Overzicht.md b/Les02-OpenCode/Les02-Slide-Overzicht.md index b088450..08774d4 100644 --- a/Les02-OpenCode/Les02-Slide-Overzicht.md +++ b/Les02-OpenCode/Les02-Slide-Overzicht.md @@ -89,6 +89,10 @@ **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 @@ -247,6 +251,12 @@ Of gebruik GitHub Desktop! - Voeg link op homepage toe naar de nieuwe pagina 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 **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 3. Push naar GitHub 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!** ---