# Bijlage A: Lesopdracht Les 1

## Van Schets naar Website met AI

**Cursus:** AI Fundamentals
**Les:** 1 - Introductie AI & Large Language Models
**Duur:** ~55 minuten
**Werkvorm:** Individueel

---

## Leerdoelen

Na deze opdracht kun je:
- Een idee visualiseren door te tekenen
- 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
- Zelfstandig een project deployen naar Vercel

---

## Wat ga je maken?

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:**
- Minimaal **3 secties** (bijv. hero, features, pricing, testimonials, footer)
- Minimaal **1 carousel** (image slider of testimonial slider)
- Minimaal **1 accordion** (FAQ of uitklapbare features)
- Je bent vrij in wat je tekent en welk "product" je bedenkt!

---

## De Workflow

```
1. TEKEN je idee op papier
       ↓
2. Maak een FOTO van je tekening
       ↓
3. Upload naar CHATGPT + beschrijf je wensen
       ↓
4. ChatGPT maakt een gedetailleerde PROMPT
       ↓
5. Plak die prompt in V0.DEV → Website!
       ↓
6. DEPLOY naar Vercel
```

---

## Stappenplan

### Stap 1: Tekenen (15 min)

Pak pen en papier en teken je complete landingspagina. Je hoeft geen kunstenaar te zijn!

**Teken:**
- 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 en afbeelding placeholders

**Tips:**
- Simpele blokken en lijnen zijn genoeg
- Schrijf bij elementen wat ze zijn
- Denk na over de flow van je pagina

### Stap 2: Foto maken (2 min)

Maak een duidelijke foto van je tekening met je telefoon.
- Zorg voor goede belichting
- Houd de camera recht boven de tekening
- Check of alles leesbaar is

### Stap 3: ChatGPT Project - Schets + Beschrijving (15 min)

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 complete landingspagina.

Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.

**Context:**
- Type website: [SaaS / Portfolio / Webshop / Blog / etc.]
- Naam/bedrijf: [Verzin een naam, bijv. "TaskFlow"]
- Doelgroep: [Bijv. startups, developers, consumenten]

**Tech stack:**
- Gebruik React met Tailwind CSS
- Maak het responsive (mobile-first)

**Kleuren:**
- Primary: [bijv. #2563EB (blauw) of beschrijf: "warm oranje"]
- Secondary: [optioneel]
- Of: [beschrijf het thema: "donker met neon accenten"]

**Stijl/Look & Feel:**
- [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 complete landingspagina.

Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.

**Context:**
- Type website: SaaS landingspagina
- Naam/bedrijf: TaskFlow
- Doelgroep: Startups en kleine bedrijven

**Tech stack:**
- Gebruik React met Tailwind CSS
- Maak het responsive (mobile-first)

**Kleuren:**
- Primary: #2563EB (blauw)
- Secondary: #1E40AF (donkerder blauw)

**Stijl/Look & Feel:**
- Modern en minimalistisch
- 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.
```

### Stap 4: Prompt kopiëren (1 min)

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 (20 min)

1. Ga naar [v0.dev](https://v0.dev)
2. Log in met je Vercel/GitHub account
3. Plak de prompt van ChatGPT
4. Klik op genereren
5. Bekijk het resultaat

**Itereren voor carousel en accordion:**
Als de carousel of accordion er niet (goed) in zit, gebruik follow-up prompts:
- "Add a testimonial carousel with 3 slides"
- "Add an FAQ accordion section"
- "Make the carousel auto-scroll"
- "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)

**Dit ga je zelf uitzoeken!** Dit is een belangrijke skill als developer.

**Hints:**
- Je hebt een GitHub account nodig (maak gratis aan op github.com)
- Zoek naar "Add Integration" of "Deploy" in v0.dev
- v0 kan koppelen met GitHub → Vercel deployt automatisch

**Resultaat:**
- Je krijgt een live URL: `jouw-project.vercel.app`
- Je code staat nu ook in GitHub

**Vastgelopen?**
- Vraag eerst een klasgenoot om hulp
- Probeer het 5 minuten zelf voordat je de docent vraagt
- Google is je vriend: "v0.dev deploy to vercel"

---

## Op te leveren

Aan het einde van de les heb je:

1. **Je originele tekening:**
   - 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 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 landingspagina

---

## Specificaties Checklist

Zorg dat je in je ChatGPT prompt het volgende hebt gespecificeerd:

| Element | Voorbeeld |
|---------|-----------|
| ✅ Tech stack | "React met Tailwind CSS" |
| ✅ Kleuren | "#2563EB" of "warm oranje thema" |
| ✅ Stijl | "Modern, minimalistisch" |
| ✅ Type website | "SaaS landingspagina" |
| ✅ Responsive | "Mobile-first design" |
| ✅ Carousel | "Testimonial slider" of "Image carousel" |
| ✅ Accordion | "FAQ sectie" of "Uitklapbare features" |

---

## Beoordeling

Deze opdracht wordt niet formeel beoordeeld, maar is essentiële oefening voor de rest van de cursus.

**Waar let de docent op:**
- Heb je alle stappen doorlopen?
- Heeft je landingspagina minimaal 3 secties?
- 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?

---

## Hulp nodig?

- Vraag je buurman/buurvrouw
- Steek je hand op voor de docent
- Check de officiële documentatie: [v0.dev/docs](https://v0.dev/docs)

---

## Bonus: Extra uitdaging

Klaar en tijd over? Probeer:

1. **Extra interactie:** Voeg een contact formulier of newsletter signup toe
2. **Andere stijl:** Genereer dezelfde schets met een compleet andere look & feel (dark mode?)
3. **Animaties:** Voeg scroll-animaties of hover-effecten toe via prompts
4. **Help een klasgenoot:** Uitleggen is de beste manier om te leren!

---

*Succes en veel plezier met je eerste AI-gegenereerde website!*
