From 3b97792d86687b2cbbd5e908ee6491d0c308197b Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Mon, 2 Feb 2026 18:57:58 +0100 Subject: [PATCH] fix: attachments --- .../Les01-Bijlage-B-Huiswerkopdracht.md | 213 +++++------------- Les01-Introductie-AI/Les01-Lesplan.md | 109 ++++----- 2 files changed, 99 insertions(+), 223 deletions(-) diff --git a/Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md b/Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md index ae35647..691e111 100644 --- a/Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md +++ b/Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md @@ -1,192 +1,83 @@ # Bijlage B: Huiswerkopdracht Les 1 -## Reflectie, Use Cases en Tweede Schets +## Voor volgende week **Cursus:** AI Fundamentals **Les:** 1 - Introductie AI & Large Language Models -**Geschatte tijd:** ~2-3 uur -**Deadline:** Voor aanvang les 2 +**Inleveren:** Via Teams, voor de volgende les --- -## Inleiding +## Opdracht 1: Reflectie (500 woorden) -In de les heb je kennisgemaakt met AI en Large Language Models. Je hebt de workflow geleerd: van een tekening op papier, via ChatGPT, naar een werkende website in v0.dev. Met deze huiswerkopdracht ga je dieper nadenken over wat je hebt geleerd en pas je de workflow nog een keer toe. +Schrijf een reflectie over je eerste ervaring met AI-tools. + +### Deelvragen + +Gebruik deze vragen als leidraad: + +1. **Wat vond je verrassend aan werken met AI?** + - Was er iets dat je niet had verwacht? + - Wat viel je op aan de snelheid, kwaliteit of manier van werken? + +2. **Wat ging goed? Wat vond je lastig?** + - Welke stappen in de workflow gingen soepel? + - Waar liep je tegenaan? Hoe heb je dat opgelost? + +3. **Hoe zie je AI jouw werk als developer veranderen?** + - Wat betekent dit voor jouw toekomstige manier van werken? + - Welke taken zou je vaker met AI willen doen? + +### Tips + +- Wees eerlijk en persoonlijk +- Geef concrete voorbeelden uit de les +- Het gaat om jouw ervaring, er zijn geen foute antwoorden +- Schrijf in je eigen woorden (niet door AI laten schrijven!) --- -## Deel 1: Reflectie (500 woorden) +## Opdracht 2: Breid je v0 website uit -Schrijf een reflectie over je eerste ervaringen met AI-tools voor development. +Voeg minimaal **1 nieuwe sectie** toe aan je landingspagina van de les. -**Structuur:** +### Mogelijke secties -### Wat heb ik geleerd? -Beschrijf de belangrijkste inzichten uit de les. Denk aan: -- Wat wist je al over AI voordat je begon? -- Wat was nieuw of verrassend? -- Hoe kijk je nu anders naar AI dan voor de les? - -### Mijn ervaring met de workflow -Reflecteer op de schets-naar-website workflow: -- Hoe voelde het om te beginnen met tekenen? -- Werkte ChatGPT goed als "vertaler" van je schets naar prompt? -- Hoe was het resultaat in v0.dev vergeleken met je verwachting? -- Wat zou je volgende keer anders doen? - -### Kritische kanttekeningen -Wees kritisch: -- Wat zijn mogelijke risico's of beperkingen die je ziet? -- Wanneer zou je AI NIET gebruiken? -- Welke ethische overwegingen komen bij je op? - -### Vooruitblik -Kijk vooruit: -- Hoe denk je AI in te gaan zetten in je werk/studie? -- Welke vaardigheden wil je nog ontwikkelen? - -**Eisen:** -- Minimaal 500 woorden -- Persoonlijk en reflectief (niet alleen opsommen) -- In je eigen woorden (niet door AI laten schrijven!) - ---- - -## Deel 2: AI Use Cases (5 stuks) - -Bedenk **vijf concrete use cases** waarin AI jou kan helpen in je werk als (frontend) developer. - -**Per use case beschrijf je:** - -1. **De situatie:** Welk probleem of welke taak? -2. **De AI-toepassing:** Welke tool zou je gebruiken en hoe? -3. **Het verwachte resultaat:** Wat levert het op? -4. **Mogelijke valkuilen:** Waar moet je op letten? - -**Voorbeeld:** - -| **Use Case** | Responsive navigation menu maken | -|---|---| -| **Situatie** | Ik moet een hamburger menu bouwen dat werkt op alle schermformaten | -| **AI-toepassing** | Schets tekenen → ChatGPT voor prompt → v0.dev voor generatie | -| **Verwacht resultaat** | Werkende code die ik kan aanpassen aan mijn design | -| **Valkuilen** | ARIA-labels checken, testen of het echt responsive is | - -**Denk aan use cases zoals:** -- Code schrijven of debuggen -- Documentatie genereren -- Designs omzetten naar code -- Tests schrijven -- Code reviews -- Learning nieuwe technologieën -- Refactoring -- Performance optimalisatie - ---- - -## Deel 3: Tweede Schets → Website - -Doorloop de workflow van de les **nog een keer**, maar nu voor een ander component. - -### Stap 1: Kies een component -Kies een van deze opties (of verzin zelf iets): -- Features section (3-4 features met iconen) -- Pricing table (3 prijsplannen) -- Testimonials sectie +- Pricing table +- Features overzicht - Contact formulier - Footer met links -- About section met team foto's +- Team sectie +- Extra testimonials +- Newsletter signup -### Stap 2: Teken op papier -Maak een schets van je gekozen component. Denk aan: -- Layout (waar staat wat?) -- Tekst indicaties -- Buttons en links -- Afbeelding placeholders +### Werkwijze -### Stap 3: ChatGPT prompt -Upload je schets naar ChatGPT en beschrijf: -- **Tech stack:** React met Tailwind CSS -- **Kleuren:** Kies een kleurenschema (mag anders zijn dan de les) -- **Stijl:** Beschrijf de look & feel -- **Doel:** Voor welk type website is dit? +Gebruik dezelfde workflow als in de les: -### Stap 4: v0.dev genereren -Gebruik de gegenereerde prompt in v0.dev. +1. **Teken** de nieuwe sectie op papier +2. **Upload** naar je ChatGPT Project +3. **Genereer** in v0.dev (vergeet niet: tech stack, kleuren, stijl!) +4. **Deploy** de update naar Vercel -### Stap 5: Deploy (optioneel) -Als je tijd hebt, deploy naar Vercel. +### Op te leveren -### Documentatie -Lever de volgende screenshots/foto's aan: -1. Foto van je papieren schets -2. Screenshot van je ChatGPT prompt -3. Screenshot van de gegenereerde ChatGPT output -4. Screenshot van het v0.dev resultaat -5. (Optioneel) Vercel URL +- Screenshot van je nieuwe schets +- Screenshot van het v0 resultaat +- Je updated Vercel URL --- ## Inleveren -Lever de volgende onderdelen in via Teams chat: +| Wat | Format | +|-----|--------| +| Reflectie | Word, PDF of direct in Teams | +| Screenshots | Afbeeldingen | +| Vercel URL | Link | -1. **Reflectie** (Word/PDF/Markdown) - - Minimaal 500 woorden - - Duidelijke structuur met kopjes - -2. **Use Cases document** (Word/PDF/Markdown) - - 5 use cases in tabel of lijst formaat - -3. **Tweede Schets documentatie** - - Foto van je schets - - Screenshots van ChatGPT conversatie - - Screenshot van v0.dev resultaat - - (Optioneel) Vercel URL - -**Bestandsnaam:** `[Achternaam]_Les1_Huiswerk.pdf` of stuur los via Teams - ---- - -## Beoordelingscriteria - -| **Onderdeel** | **Punten** | **Criteria** | -|---|---|---| -| Reflectie | 35% | Diepgang, persoonlijke inzichten, kritische houding | -| Use Cases (5x) | 25% | Relevantie, creativiteit, volledigheid | -| Tweede Schets | 40% | Kwaliteit schets, specificaties in prompt, eindresultaat | - -**Let op:** Deze opdracht wordt beoordeeld op **eigen inbreng**. Reflecties die duidelijk door AI zijn geschreven worden niet geaccepteerd. - ---- - -## Tips - -- **Start vroeg** - Gun jezelf tijd om na te denken -- **Wees eerlijk** - Er zijn geen foute reflecties, het gaat om jouw ervaring -- **Experimenteer** - Probeer verschillende specificaties in je prompt -- **Wees specifiek** - Geef duidelijke kleuren, stijl en tech stack mee -- **Documenteer goed** - Screenshots maken terwijl je bezig bent is makkelijker dan achteraf - ---- - -## Checklist Tweede Schets - -Zorg dat je bij je tweede schets het volgende hebt gespecificeerd: - -| Element | Check | -|---------|-------| -| Tech stack (React + Tailwind) | ☐ | -| Kleuren (hex codes of beschrijving) | ☐ | -| Stijl/Look & Feel | ☐ | -| Type website/doelgroep | ☐ | -| Responsive design | ☐ | - ---- - -## Vragen? - -Heb je vragen over de opdracht? Stuur een bericht via Teams. +**Waar:** Teams +**Deadline:** Voor de volgende les --- diff --git a/Les01-Introductie-AI/Les01-Lesplan.md b/Les01-Introductie-AI/Les01-Lesplan.md index a7c7ec0..23d684f 100644 --- a/Les01-Introductie-AI/Les01-Lesplan.md +++ b/Les01-Introductie-AI/Les01-Lesplan.md @@ -30,8 +30,8 @@ | | | - Theorie over AI en LLMs (~45 min) | | | | - Praktijk: ChatGPT leren gebruiken (~25 min) | | | | - Prompt Engineering basics (~15 min) | -| | | - Live demo: van schets naar website (~27 min) | -| | | - Hands-on opdracht: jouw tekening wordt een website (~55 min) | +| | | - Live demo: van schets naar website (~20 min) | +| | | - Hands-on opdracht: bouw een complete landingspagina (~55 min) | | | | | | | | **Leerdoelen van vandaag** | | | | 1. Begrijpen wat AI en LLMs zijn | @@ -135,93 +135,78 @@ | | | | | | | **Clue: Specificeer altijd je tech stack, kleuren en stijl voor consistente resultaten.** | | | | | -| **85-112** | **Live Demo: v0.dev** | *Instructievorm: live demonstratie (27 min)* | +| **85-105** | **Live Demo: v0.dev** | *Instructievorm: live demonstratie (20 min)* | | | | *Doel:* "Wow-moment" creëren met de schets-naar-website workflow | | | | | -| | | **Introductie v0.dev (3 min)** | -| | | Leg uit wat v0.dev is: AI-powered UI generator van Vercel. | -| | | | -| | | **De Slimme Workflow (2 min)** | -| | | Leg de 5-stappen workflow uit: | +| | | **Introductie v0.dev + Workflow (5 min)** | +| | | Leg uit wat v0.dev is en de 5-stappen workflow: | | | | 1. TEKEN op papier | | | | 2. FOTO maken | -| | | 3. Upload naar CHATGPT + beschrijf wensen (tech stack, kleuren, stijl) | +| | | 3. Upload naar CHATGPT + beschrijf wensen | | | | 4. ChatGPT maakt PROMPT | | | | 5. Plak in V0.DEV → Website! | | | | | -| | | **Demo 1: Schets maken (3 min)** | -| | | Teken live op papier een hero section: links tekst + button, rechts afbeelding placeholder. | +| | | **Live Demo (15 min)** | +| | | Voer de hele workflow uit in één vloeiende demo: | +| | | - Teken simpele hero section op papier | +| | | - Foto maken en uploaden naar ChatGPT Project | +| | | - Prompt genereren met tech stack, kleuren, stijl | +| | | - Kopiëren naar v0.dev en genereren | +| | | - Itereren met follow-up prompts | | | | | -| | | **Demo 2: Foto naar ChatGPT (8 min)** | -| | | Upload foto en geef beschrijving mee: | -| | | - "Dit is een schets voor een hero section" | -| | | - Tech stack: React met Tailwind CSS | -| | | - Kleuren: Blauw thema met primary #2563EB | -| | | - Stijl: Modern, minimalistisch, professioneel | -| | | - "Maak hier een gedetailleerde prompt voor v0.dev van" | -| | | | -| | | **Demo 3: Prompt naar v0 (6 min)** | -| | | Kopieer de gegenereerde prompt naar v0.dev. Toon het resultaat. | -| | | | -| | | **Demo 4: Itereren (3 min)** | -| | | Verfijn met follow-up prompts. | -| | | | -| | | **Demo 5: Deployen (2 min)** | -| | | Doorloop het deployment proces: Add Integration → GitHub → Deploy. | +| | | **BELANGRIJK: Deployment NIET live doen!** | +| | | Leg kort uit hoe het werkt (Add Integration → GitHub → Deploy), maar studenten zoeken dit straks zelf uit. | | | | | | | | **Clue: De schets is je startpunt, ChatGPT is je vertaler, v0.dev is je bouwer.** | | | | | -| **112-165** | **Hands-on Opdracht** | *Werkvorm: individueel werken (53 min)* | +| **105-160** | **Hands-on Opdracht** | *Werkvorm: individueel werken (55 min)* | | | | *Doel:* Zelfstandig de workflow doorlopen | | | | | | | | **Opdracht introductie (5 min)** | -| | | Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten gaan: | -| | | 1. **TEKENEN** op papier - hero section | -| | | 2. **FOTO** maken van schets | -| | | 3. **CHATGPT** - upload + beschrijf (tech stack, kleuren, stijl) | -| | | 4. **PROMPT** kopiëren | -| | | 5. **V0.DEV** - genereren | -| | | 6. **DEPLOY** naar Vercel | +| | | Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten bouwen een **complete landingspagina**: | +| | | - Minimaal **3 secties** (hero, features, pricing, etc.) | +| | | - Minimaal **1 carousel** (image/testimonial slider) | +| | | - Minimaal **1 accordion** (FAQ of uitklapbare content) | +| | | - **Deployment:** Zelf uitzoeken! | | | | | | | | **Benodigdheden check** | | | | Zorg dat iedereen papier en pen heeft! | | | | | -| | | **Zelfstandig werken (40 min)** | +| | | **Zelfstandig werken (45 min)** | | | | Loop rond en help studenten waar nodig. Let op: | -| | | - Kwaliteit van de schets (simpel is prima) | +| | | - Hebben ze 3+ secties getekend? | +| | | - Carousel en accordion in de schets? | | | | - Volledigheid van ChatGPT prompt (tech stack, kleuren, stijl) | -| | | - Problemen met v0.dev of deployment | +| | | - Deployment: laat ze eerst zelf zoeken, help pas daarna | | | | | | | | **Tussentijdse check (halverwege)** | -| | | "Wie heeft al een prompt uit ChatGPT?" | -| | | "Wie is al in v0.dev bezig?" | +| | | "Wie heeft 3+ secties? Carousel en accordion gepland?" | +| | | "Begin met deployen als je v0 resultaat hebt!" | | | | | | | | **Clue: Het doel is de workflow leren, niet perfectie!** | | | | | -| **165-180** | **Afsluiting** | *Werkvorm: klassikaal gesprek (15 min)* | +| **160-180** | **Afsluiting** | *Werkvorm: klassikaal gesprek (20 min)* | | | | | -| | | **Korte terugblik (5 min)** | +| | | **Resultaten delen (8 min)** | | | | Vraag 2-3 studenten om te delen: | -| | | - Hoe was de ervaring? | -| | | - Leek het resultaat op je schets? | +| | | - Laat je schets en v0 resultaat zien | +| | | - Wat ging goed? Wat was lastig? | | | | | -| | | **Samenvatting (3 min)** | +| | | **Samenvatting (4 min)** | | | | - LLMs en next-token prediction | | | | - Prompt engineering: tech stack, kleuren, stijl | | | | - **De workflow: Schets → ChatGPT → v0.dev → Website** | | | | | | | | **Huiswerk (5 min)** | -| | | Deel de huiswerkopdracht (zie Bijlage: Huiswerkopdracht): | -| | | - Reflectie schrijven (500 woorden) | -| | | - 5 AI use cases bedenken | -| | | - **Tweede schets doorlopen met andere component** | -| | | - Inleveren via Teams chat | -| | | | -| | | **Vooruitblik** | -| | | Volgende les: Prompt Engineering verdieping. | +| | | 1. **Reflectie (500 woorden)** met deelvragen: | +| | | - Wat vond je verrassend aan werken met AI? | +| | | - Wat ging goed? Wat vond je lastig? | +| | | - Hoe zie je AI jouw werk als developer veranderen? | +| | | 2. **Breid je v0 website uit** met minimaal 1 nieuwe sectie | +| | | - Inleveren via Teams, voor volgende les | | | | | | | | **Afsluiting** | -| | | Bedank de studenten. Wijs op de beschikbaarheid voor vragen (Teams). | +| | | Bedank de studenten. Tot volgende week! | --- @@ -229,14 +214,14 @@ | Blok | Onderwerp | Start | Eind | Duur | |------|-----------|-------|------|------| -| 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min | -| 2 | Wat is AI? | 0:13 | 0:33 | 20 min | -| 3 | AI Landscape | 0:33 | 0:45 | 12 min | -| 4 | ChatGPT in de Praktijk | 0:45 | 1:10 | 25 min | +| 1 | Welkom & Introductie | 0:00 | 0:15 | 15 min | +| 2 | Wat is AI? | 0:15 | 0:40 | 25 min | +| 3 | AI Landscape | 0:40 | 0:50 | 10 min | +| 4 | ChatGPT in de Praktijk | 0:50 | 1:10 | 20 min | | 5 | Prompt Engineering | 1:10 | 1:25 | 15 min | -| 6 | Live Demo v0.dev | 1:25 | 1:52 | 27 min | -| 7 | Hands-on Opdracht | 1:52 | 2:45 | 53 min | -| 8 | Afsluiting | 2:45 | 3:00 | 15 min | +| 6 | Live Demo v0.dev | 1:25 | 1:45 | 20 min | +| 7 | Hands-on Opdracht | 1:45 | 2:40 | 55 min | +| 8 | Afsluiting | 2:40 | 3:00 | 20 min | **Totaal: 180 minuten (3 uur)** @@ -284,4 +269,4 @@ Observeer tijdens de les: ## Bijlagen 1. Bijlage A: Lesopdracht - Van Schets naar Website met AI -2. Bijlage B: Huiswerkopdracht - Reflectie, Use Cases en Tweede Schets +2. Bijlage B: Huiswerkopdracht - Reflectie en Website Uitbreiding