fix: deploy change
This commit is contained in:
Tim Rijkse
@@ -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:**
|
||||
- Headline (kop)
|
||||
- Subtext (ondertitel/beschrijving)
|
||||
- Call-to-action button
|
||||
- Visueel element (afbeelding placeholder of illustratie)
|
||||
**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!
|
||||
|
||||
---
|
||||
|
||||
@@ -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
|
||||
- Afbeelding placeholders (vierkant met X erdoor)
|
||||
- Buttons en afbeelding placeholders
|
||||
|
||||
**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:**
|
||||
Als het resultaat niet perfect is, kun je verfijnen:
|
||||
- "Make the button larger"
|
||||
- "Add more padding"
|
||||
- "Change the headline font to be bolder"
|
||||
- "Add a subtle gradient background"
|
||||
**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)
|
||||
|
||||
**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:**
|
||||
1. Klik op "Add Integration" in de linkerzijbalk van v0.dev
|
||||
2. Koppel je GitHub account (eenmalig)
|
||||
3. v0 maakt automatisch een repository aan in je GitHub
|
||||
4. Klik op "Deploy" of "Publish"
|
||||
**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
|
||||
- Elke update in v0 → automatisch opnieuw gedeployd
|
||||
|
||||
**Problemen?**
|
||||
- Geen GitHub account? Maak er nu een aan op github.com
|
||||
- v0 vraagt niet om GitHub? Check of je bent ingelogd in v0.dev
|
||||
- Deployment mislukt? Vraag de docent om hulp
|
||||
**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"
|
||||
|
||||
---
|
||||
|
||||
@@ -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?
|
||||
- Lijkt het eindresultaat op je originele schets?
|
||||
- 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?
|
||||
|
||||
---
|
||||
@@ -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
|
||||
2. **Andere stijl:** Genereer dezelfde schets met een compleet andere look & feel
|
||||
3. **Iteratie experiment:** Kijk hoeveel je kunt veranderen met follow-up prompts in v0
|
||||
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!
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user