fix: deploy change

Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md

@@ -16,21 +16,21 @@ Na deze opdracht kun je:
 - ChatGPT gebruiken om een schets om te zetten naar een gedetailleerde prompt
 - Tech stack, kleuren en stijl specificeren in je prompt
 - v0.dev gebruiken om UI-componenten te genereren
-- Een project deployen naar Vercel
+- Zelfstandig een project deployen naar Vercel
 
 ---
 
 ## Wat ga je maken?
 
-Je gaat een **hero section** bouwen voor een fictieve website. Het bijzondere? **Je begint met een tekening op papier!**
+Je gaat een **complete landingspagina** bouwen voor een fictief product of bedrijf. Het bijzondere? **Je begint met een tekening op papier!**
 
 Je tekening wordt, via ChatGPT en v0.dev, een echte, werkende website die online staat.
 
-**Vereiste elementen in je hero section:**
+**Vereiste elementen:**
-- Headline (kop)
+- Minimaal **3 secties** (bijv. hero, features, pricing, testimonials, footer)
-- Subtext (ondertitel/beschrijving)
+- Minimaal **1 carousel** (image slider of testimonial slider)
-- Call-to-action button
+- Minimaal **1 accordion** (FAQ of uitklapbare features)
-- Visueel element (afbeelding placeholder of illustratie)
+- Je bent vrij in wat je tekent en welk "product" je bedenkt!
 
 ---
 
@@ -54,20 +54,21 @@ Je tekening wordt, via ChatGPT en v0.dev, een echte, werkende website die online
 
 ## Stappenplan
 
-### Stap 1: Tekenen (10 min)
+### Stap 1: Tekenen (15 min)
 
-Pak pen en papier en teken je hero section. Je hoeft geen kunstenaar te zijn!
+Pak pen en papier en teken je complete landingspagina. Je hoeft geen kunstenaar te zijn!
 
 **Teken:**
-- De layout (waar staat wat?)
+- Meerdere secties onder elkaar (minimaal 3!)
+- Geef aan waar je carousel komt
+- Geef aan waar je accordion komt
 - Tekst indicaties (schrijf "HEADLINE" of de echte tekst)
-- Buttons
+- Buttons en afbeelding placeholders
-- Afbeelding placeholders (vierkant met X erdoor)
 
 **Tips:**
 - Simpele blokken en lijnen zijn genoeg
-- Geef aan wat links en rechts staat
 - Schrijf bij elementen wat ze zijn
+- Denk na over de flow van je pagina
 
 ### Stap 2: Foto maken (2 min)
 
@@ -76,14 +77,14 @@ Maak een duidelijke foto van je tekening met je telefoon.
 - Houd de camera recht boven de tekening
 - Check of alles leesbaar is
 
-### Stap 3: ChatGPT - Schets + Beschrijving (15 min)
+### Stap 3: ChatGPT Project - Schets + Beschrijving (15 min)
 
-Open ChatGPT en upload je foto. Voeg een gedetailleerde beschrijving toe.
+Open je ChatGPT Project "Les 1 - v0.dev Prompt Engineer" en upload je foto. Voeg een gedetailleerde beschrijving toe.
 
 **Gebruik dit template:**
 
 ```
-Dit is een schets voor een hero section van mijn website.
+Dit is een schets voor een complete landingspagina.
 
 Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
 
@@ -105,13 +106,15 @@ Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
 - [Kies: Modern / Minimalistisch / Speels / Corporate / Retro / etc.]
 - [Extra: "Met subtiele animaties" of "Clean en zakelijk"]
 
+**Let op:** Er moet een carousel in zitten en een accordion.
+
 Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
 ```
 
 **Voorbeeld ingevuld:**
 
 ```
-Dit is een schets voor een hero section van mijn website.
+Dit is een schets voor een complete landingspagina.
 
 Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
 
@@ -133,6 +136,8 @@ Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
 - Professioneel maar toegankelijk
 - Subtiele hover animaties op buttons
 
+**Let op:** Er moet een carousel in zitten en een accordion.
+
 Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
 ```
 
@@ -142,7 +147,7 @@ ChatGPT genereert een gedetailleerde prompt. Kopieer deze volledig.
 
 **Let op:** De prompt is in het Engels - v0.dev werkt het beste met Engelse prompts.
 
-### Stap 5: v0.dev - Genereren (15 min)
+### Stap 5: v0.dev - Genereren (20 min)
 
 1. Ga naar [v0.dev](https://v0.dev)
 2. Log in met je Vercel/GitHub account
@@ -150,34 +155,32 @@ ChatGPT genereert een gedetailleerde prompt. Kopieer deze volledig.
 4. Klik op genereren
 5. Bekijk het resultaat
 
-**Itereren:**
+**Itereren voor carousel en accordion:**
-Als het resultaat niet perfect is, kun je verfijnen:
+Als de carousel of accordion er niet (goed) in zit, gebruik follow-up prompts:
-- "Make the button larger"
+- "Add a testimonial carousel with 3 slides"
-- "Add more padding"
+- "Add an FAQ accordion section"
-- "Change the headline font to be bolder"
+- "Make the carousel auto-scroll"
-- "Add a subtle gradient background"
+- "Style the accordion with smooth animations"
 
 **Let op:** Je hebt ~7 gratis generaties per dag. Gebruik ze slim!
 
 ### Stap 6: Deploy naar Vercel (10 min)
 
-**Vereist:** GitHub account (maak gratis aan op github.com als je die nog niet hebt)
+**Dit ga je zelf uitzoeken!** Dit is een belangrijke skill als developer.
 
-**Deployment in 4 stappen:**
+**Hints:**
-1. Klik op "Add Integration" in de linkerzijbalk van v0.dev
+- Je hebt een GitHub account nodig (maak gratis aan op github.com)
-2. Koppel je GitHub account (eenmalig)
+- Zoek naar "Add Integration" of "Deploy" in v0.dev
-3. v0 maakt automatisch een repository aan in je GitHub
+- v0 kan koppelen met GitHub → Vercel deployt automatisch
-4. Klik op "Deploy" of "Publish"
 
 **Resultaat:**
 - Je krijgt een live URL: `jouw-project.vercel.app`
 - Je code staat nu ook in GitHub
-- Elke update in v0 → automatisch opnieuw gedeployd
 
-**Problemen?**
+**Vastgelopen?**
-- Geen GitHub account? Maak er nu een aan op github.com
+- Vraag eerst een klasgenoot om hulp
-- v0 vraagt niet om GitHub? Check of je bent ingelogd in v0.dev
+- Probeer het 5 minuten zelf voordat je de docent vraagt
-- Deployment mislukt? Vraag de docent om hulp
+- Google is je vriend: "v0.dev deploy to vercel"
 
 ---
 
@@ -186,18 +189,19 @@ Als het resultaat niet perfect is, kun je verfijnen:
 Aan het einde van de les heb je:
 
 1. **Je originele tekening:**
-   - Foto van je papieren schets
+   - Foto van je papieren schets (met 3+ secties zichtbaar)
 
 2. **ChatGPT conversatie:**
    - Screenshot van je prompt + de gegenereerde output
    - Noteer welke specificaties je meegaf (tech stack, kleuren, stijl)
 
 3. **v0.dev project:**
-   - Screenshot van je gegenereerde hero section
+   - Screenshot van je landingspagina met **carousel** zichtbaar
+   - Screenshot van je landingspagina met **accordion** zichtbaar
    - Eventuele iteratie-prompts die je gebruikte
 
 4. **Live deployment:**
-   - Vercel URL van je gedeployde hero section
+   - Vercel URL van je gedeployde landingspagina
 
 ---
 
@@ -212,6 +216,8 @@ Zorg dat je in je ChatGPT prompt het volgende hebt gespecificeerd:
 | ✅ Stijl | "Modern, minimalistisch" |
 | ✅ Type website | "SaaS landingspagina" |
 | ✅ Responsive | "Mobile-first design" |
+| ✅ Carousel | "Testimonial slider" of "Image carousel" |
+| ✅ Accordion | "FAQ sectie" of "Uitklapbare features" |
 
 ---
 
@@ -221,8 +227,10 @@ Deze opdracht wordt niet formeel beoordeeld, maar is essentiële oefening voor d
 
 **Waar let de docent op:**
 - Heb je alle stappen doorlopen?
-- Heb je je specificaties duidelijk gecommuniceerd?
+- Heeft je landingspagina minimaal 3 secties?
-- Lijkt het eindresultaat op je originele schets?
+- Zit er een werkende carousel in?
+- Zit er een werkende accordion in?
+- Heb je de deployment zelf uitgezocht?
 - Kun je uitleggen hoe de workflow werkt?
 
 ---
@@ -239,9 +247,10 @@ Deze opdracht wordt niet formeel beoordeeld, maar is essentiële oefening voor d
 
 Klaar en tijd over? Probeer:
 
-1. **Tweede component:** Maak een pricing table of features section
+1. **Extra interactie:** Voeg een contact formulier of newsletter signup toe
-2. **Andere stijl:** Genereer dezelfde schets met een compleet andere look & feel
+2. **Andere stijl:** Genereer dezelfde schets met een compleet andere look & feel (dark mode?)
-3. **Iteratie experiment:** Kijk hoeveel je kunt veranderen met follow-up prompts in v0
+3. **Animaties:** Voeg scroll-animaties of hover-effecten toe via prompts
+4. **Help een klasgenoot:** Uitleggen is de beste manier om te leren!
 
 ---
 

Les01-Introductie-AI/Les01-Docenttekst.md

@@ -732,21 +732,21 @@ _[Wacht op generatie]_
 
 ---
 
-### Slide 35: Live Demo - Deployen
+### Slide 35: Hoe deploy je naar Vercel?
 
 **[99:00 - 101:00]** _(2 minuten)_
 
-"Laatste stap: hoe krijg je dit online?"
+"Laatste vraag: hoe krijg je dit online? Dat ga ik jullie nu uitleggen, maar niet voordoen."
 
 _[Wijs naar de interface]_
 
-"In v0 zie je een optie om te deployen. V0 vraagt je om je GitHub account te koppelen. Als je dat doet, maakt v0 automatisch een repository aan met je code."
+"In v0 zie je een optie om te deployen. Je klikt op 'Add Integration', koppelt je GitHub account, en v0 maakt automatisch een repository aan. Dan deployt Vercel je code - binnen een minuut heb je een live URL."
 
-"Dan deployt Vercel - het bedrijf achter v0 - je code automatisch. Binnen een minuut heb je een live URL die iedereen kan bezoeken."
+_[Met nadruk]_
 
-_[Toon resultaat]_
+"Maar dit ga ik niet live doen. Waarom niet? Omdat jullie dit straks zelf gaan uitzoeken. Dat is onderdeel van de opdracht. Het is niet moeilijk, en je leert meer door het zelf te doen."
 
-"Van een tekening op papier naar een live website. In minder dan vijftien minuten. Dat is de kracht van deze workflow."
+"Van een tekening op papier naar een live website. Dat is de kracht van deze workflow. En straks gaan jullie dat bewijzen."
 
 ---
 
@@ -756,31 +756,33 @@ _[Toon resultaat]_
 
 **[101:00 - 106:00]** _(5 minuten uitleg)_
 
-"Nu zijn jullie aan de beurt. De opdracht is precies wat ik net deed."
+"Nu zijn jullie aan de beurt. Maar let op - jullie opdracht is groter dan mijn demo."
 
 _[Pak papier en pennen - deel uit als nodig]_
 
-"Jullie gaan een hero section bouwen voor een fictief product. Maar - en dit is belangrijk - jullie beginnen met TEKENEN."
+"Ik heb een simpele hero section laten zien. Jullie gaan een complete landingspagina bouwen."
+
+_[Wijs naar de vereisten]_
+
+"De vereisten zijn: minimaal drie secties. Denk aan hero, features, pricing, testimonials, footer - kies zelf wat je wilt."
+
+"Daarnaast moet je minimaal één carousel hebben - dat kan een image slider zijn of een testimonial slider."
+
+"En minimaal één accordion - bijvoorbeeld voor een FAQ sectie of uitklapbare features."
+
+_[Geef vrijheid]_
+
+"Je bent helemaal vrij in wat je tekent. Bedenk een fictief product, een app, een service - wat je maar wilt. Maak het je eigen."
 
 _[Loop door de stappen]_
 
-"Stap één: pak papier en pen. Teken je hero section. Het hoeft niet mooi - blokken en lijnen zijn genoeg."
+"De stappen zijn hetzelfde: teken op papier, maak een foto, upload naar je ChatGPT Project, genereer in v0.dev, en deploy naar Vercel. Die laatste stap ga je zelf uitzoeken - het is niet moeilijk."
-
-"Stap twee: maak een foto met je telefoon."
-
-"Stap drie: upload naar ChatGPT. Beschrijf je wensen. En vergeet niet: tech stack, kleuren, stijl!"
-
-"Stap vier: kopieer de gegenereerde prompt."
-
-"Stap vijf: plak in v0.dev en genereer."
-
-"Stap zes: als je tijd hebt, deploy naar Vercel."
 
 _[Praktische info]_
 
-"Je hebt 50 minuten. Werk individueel. Documenteer je stappen met screenshots - die heb je nodig voor je inlevering."
+"Je hebt 45 minuten. Werk individueel. Begin met tekenen!"
 
-"Heeft iedereen papier en een pen? Nee? Hier, pak even..."
+"Heeft iedereen papier en een pen?"
 
 ---
 
@@ -795,21 +797,23 @@ _[Studenten werken - loop actief rond en help]_
 **Let op deze veelvoorkomende problemen:**
 
 - Slaan ze de tekenstap over? Stuur ze terug naar papier.
+- Tekenen ze te weinig secties? Herinner aan de 3+ vereiste.
+- Vergeten ze carousel of accordion? Check hun schets.
 - Vergeten ze tech stack/kleuren/stijl in ChatGPT? Herinner ze.
-- v0.dev rate limit? Ze kunnen wachten of je backup screenshots tonen.
+- v0.dev rate limit? Ze kunnen wachten of delen met klasgenoot.
-- GitHub account problemen? Help met aanmaken.
+- Deployment problemen? Laat ze eerst Googlen, help pas daarna.
 
 **Tussentijdse check [125:00]:**
 
-"Even een snelle check. Steek je hand op als je al een prompt uit ChatGPT hebt."
+"Even een snelle check. Wie heeft al minimaal 3 secties getekend?"
 
 _[Tel handen]_
 
-"Mooi. Wie is al in v0.dev aan het genereren?"
+"Mooi. Wie heeft de carousel en accordion in de schets?"
 
 _[Help kort indien nodig]_
 
-"Nog 25 minuten. Focus op je schets, ChatGPT prompt, en v0 generatie. De deployment is een bonus."
+"Nog 25 minuten. Als je v0 resultaat hebt, begin dan met deployen. Vraag een klasgenoot om hulp als je vastloopt."
 
 _[Studenten werken door tot 150:00]_
 

Les01-Introductie-AI/Les01-Slide-Overzicht.md

@@ -662,20 +662,23 @@ Blokken en lijnen zijn genoeg.
 
 ---
 
-### Slide 35: Live Demo - Deployen
+### Slide 35: Hoe deploy je naar Vercel?
 *(2 minuten)*
 
-**Titel:** Live zetten
+**Titel:** Straks: Live zetten
 
 **Inhoud:**
 
-1. Klik "Add Integration"
+**De stappen (dit ga je straks zelf doen):**
+1. Klik "Add Integration" in v0.dev
 2. Koppel GitHub account
 3. v0 maakt automatisch repository
 4. Klik "Deploy" → Live op Vercel!
 
 **Resultaat:** `jouw-project.vercel.app`
 
+*Ik laat dit nu niet zien - jullie gaan dit straks zelf uitzoeken!*
+
 ---
 
 ## BLOK 7: HANDS-ON OPDRACHT (50 minuten)
@@ -687,18 +690,22 @@ Blokken en lijnen zijn genoeg.
 
 **Inhoud:**
 
-**Opdracht:** Jouw tekening wordt een website!
+**Opdracht:** Bouw een complete landingspagina!
+
+**Vereisten:**
+- Minimaal **3 secties** (bijv. hero, features, pricing, testimonials, footer)
+- Minimaal **1 carousel** (image slider of testimonial slider)
+- Minimaal **1 accordion** (FAQ of features)
+- Je bent vrij in wat je tekent en welk "product" je bedenkt
 
 **Stappen:**
-1. **TEKEN** een hero section op papier
+1. **TEKEN** je landingspagina op papier (meerdere secties!)
 2. **FOTO** maken
-3. **CHATGPT:** Upload + beschrijf (tech stack, kleuren, stijl!)
+3. **CHATGPT PROJECT:** Upload + beschrijf je wensen
-4. **PROMPT** kopiëren
+4. **V0.DEV:** Genereer en itereer
-5. **V0.DEV:** Genereren
+5. **DEPLOY:** Zelf naar Vercel (uitzoeken!)
-6. **DEPLOY:** Naar Vercel
 
 **Tijd:** ~45 minuten
-**Benodigdheden:** Papier, pen, ChatGPT, GitHub
 
 ---
 
@@ -709,11 +716,15 @@ Blokken en lijnen zijn genoeg.
 
 **Inhoud:**
 
-**Vergeet niet te specificeren:**
+**Checklist:**
-- Tech stack: React + Tailwind
+- [ ] 3+ secties getekend
-- Kleuren: hex codes of beschrijving
+- [ ] Carousel gepland
-- Stijl: modern, minimalistisch, etc.
+- [ ] Accordion gepland
-- Doel: waarvoor is de website?
+- [ ] Tech stack: React + Tailwind
+- [ ] Kleuren en stijl gespecificeerd
+- [ ] Gedeployed naar Vercel
+
+**Tip:** Begin simpel, voeg complexiteit toe via iteratie!
 
 **Hulp nodig?** Steek je hand op!
 

Samenvattingen/Les01-Samenvatting.md

@@ -93,48 +93,53 @@ Kennismaking met AI, LLMs, ChatGPT en de basis van prompt engineering. Praktisch
 
 ## Lesopdracht (2 uur)
 
-### De Workflow Doorlopen
+### Bouw een Complete Landingspagina
 
-**Stap 1: Tekenen (10 min)**
+**Vereisten:**
-- Teken een hero section op papier
+- Minimaal **3 secties** (bijv. hero, features, pricing, testimonials, footer)
+- Minimaal **1 carousel** (image slider of testimonial slider)
+- Minimaal **1 accordion** (FAQ of uitklapbare features)
+- Vrije keuze in product/onderwerp
+
+**Stap 1: Tekenen (15 min)**
+- Teken je complete landingspagina op papier
+- Meerdere secties! Niet alleen een hero
+- Geef aan waar carousel en accordion komen
 - Simpele blokken en lijnen zijn genoeg
-- Geef layout aan: headline, tekst, button, afbeelding placeholder
 
 **Stap 2: Foto maken (2 min)**
 - Maak duidelijke foto met telefoon
 
-**Stap 3: ChatGPT - Schets + Beschrijving (15 min)**
+**Stap 3: ChatGPT Project (15 min)**
 
-Upload foto en beschrijf:
+Upload foto naar je "Les 1 - v0.dev Prompt Engineer" project:
 ```
-Dit is een schets voor een hero section van mijn website.
+Dit is een schets voor een complete landingspagina.
 
 Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
 
 Tech stack: React met Tailwind CSS
 Kleuren: [bijv. Primary #2563EB]
 Stijl: [bijv. Modern, minimalistisch]
-Doel: [bijv. SaaS landingspagina]
+Doel: [bijv. SaaS landingspagina voor TaskFlow]
+
+Let op: er moet een carousel in zitten en een accordion.
 ```
 
-**Stap 4: Prompt kopiëren (1 min)**
+**Stap 4: v0.dev genereren (20 min)**
-- Kopieer de gegenereerde Engelse prompt
-
-**Stap 5: v0.dev genereren (15 min)**
 - Plak prompt in v0.dev
-- Itereer indien nodig
+- Itereer voor carousel en accordion
 - Let op: ~7 gratis generaties per dag
 
-**Stap 6: Deploy naar Vercel (10 min)**
+**Stap 5: Deploy naar Vercel (10 min)**
-- Add Integration → GitHub koppelen
+- Zelf uitzoeken! (Add Integration → GitHub → Deploy)
-- v0 maakt automatisch repository
+- Vraag klasgenoot om hulp indien nodig
-- Deploy → Live URL!
 
 ### Op te Leveren
-- Foto van papieren schets
+- Foto van papieren schets (met 3+ secties)
-- Screenshot ChatGPT conversatie
+- Screenshot v0.dev resultaat met carousel
-- Screenshot v0.dev resultaat
+- Screenshot v0.dev resultaat met accordion
-- Vercel URL
+- Live Vercel URL
 
 ---