# 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!*