fix: attachments
This commit is contained in:
Tim Rijkse
@@ -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
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user