Vibe Codenvoor docenten
Vibe Coden Basis
  1. 1Wat is Vibe Coden?
  2. 2Hoe werkt deze cursus?
  3. 3Van onderwijsprobleem naar bouwidee
  4. 4Je eerste simpele HTML-webapp maken
  5. 5Delen en publiceren
  6. 6Testen en verbeteren
  7. 7Stijl en uitstraling verbeteren
  8. 8Afbeeldingen, bestanden en downloads toevoegen
  9. 9Samenvatting en eindopdracht
  10. 10Vooruitblik op de gevorderde cursus
Bekijk de route
Vibe Coden Gevorderd
  1. 1Werken met een dedicated vibe code tool
  2. 2Een database koppelen met Supabase
  3. 3Supabase slim en veilig gebruiken
  4. 4Ontwerp bewust voor leren
  5. 5Een sterk bouwplan maken
  6. 6Slim itereren zonder je app kapot te maken
  7. 7Geef je project een vast geheugen
  8. 8AI als tester gebruiken
  9. 9Slimmer opslaan met GitHub
  10. 10Slim publiceren via Vercel of Netlify
  11. 11Zet je webapp als app op je telefoon
  12. 12Volledig voorbeeld en eindopdracht
Bekijk de route
Vibe Coden Expert
  1. 1AI toevoegen aan je onderwijswebapp
  2. 2Welke AI-modellen zijn er en hoe vergelijk je ze?
  3. 3OpenRouter: account en credits veilig instellen
  4. 4Klein experiment 1: een AI-uitlegknop
  5. 5Deploy je AI-integratie veilig
  6. 6Veilig en betaalbaar bouwen
  7. 7Andere modaliteiten: AI kan meer dan tekst
  8. 8Volledig voorbeeld: Quick Quiz
  9. 9Afsluiting: bedankt en blijf bouwen
Bekijk de route
Best practicesOver mij

Les 3 van 10

Van onderwijsprobleem naar bouwidee

Je kiest een klein probleem of lesmoment en maakt daar een concreet, bouwbaar idee van voor je eerste webapp.

Voorbeelden

Waar kun je klein beginnen?

Je kiest vandaag nog geen groot project. Je zoekt één klein lesmoment waar een simpele webapp direct iets nuttigs kan doen.

0 van 9

stappen zichtbaar

Check je idee

Kies iets dat zonder extra techniek werkt.

Voor deze basisroute kies je een appje dat meteen in de browser kan werken. Database, accounts, opgeslagen leerlinggegevens en ingebouwde AI komen later.

  • Geen database nodig
  • Geen leerlingdata opslaan
  • Geen ingebouwde AI nodig

Wel krachtig genoeg voor een eerste succeservaring.

Begin rustig.

Klik door de voorbeelden heen en kijk hoe een groot idee steeds kleiner wordt.

Bouwidee-formule

Kopieer deze bouwidee-formule

Kopieer deze formule en vervang alles tussen [blokhaken] door jouw eigen woorden. Zo wordt je idee concreet genoeg om in les 4 aan AI te geven.

Voor [doelgroep] wil ik een appje dat [één duidelijke actie] doet, zodat [het leren makkelijker wordt].

Goed voorbeeld 1 van 3

Voor mijn havo 3-economieklas wil ik een appje dat uitlegt hoe marktvormen werken, zodat het leren makkelijker wordt.

Nu jij

Maak je bouwidee concreet

Vul de drie onderdelen in. Onderaan zie je meteen de zin die je in les 4 kunt gebruiken voor je eerste bouwprompt.

Jouw bouwidee

Voor [doelgroep] wil ik een appje dat [een duidelijke actie] doet, zodat [het leren makkelijker wordt].

Vul de drie onderdelen zo concreet mogelijk in.

Is je idee klein genoeg?

Kies eerlijk. Als het nog groot voelt, is dat geen probleem: kleiner maken is precies de oefening.

Nu doen

Actie van deze les

Kies je eerste bouwidee

Kies één klein bouwidee dat je in de volgende les gaat laten maken.

0van 4 stappen gedaan

Checklist

0 van 4 gedaan

Bezig
Vul de bouwidee-maker in.
Kopieer je bouwidee.
Check of je idee klein genoeg is.
Leg je idee aan iemand uit. Snapt diegene binnen 10 seconden wat je appje moet doen?
Klaar als:

Je hebt één klein bouwidee klaar dat iemand anders snel begrijpt en dat in de volgende les gebouwd kan worden.

Vragen en opmerkingen

Praat verder over deze les

Stel een vraag, lees mee of help een andere cursist op weg.

0 vragenAlles is beantwoord
Vragen laden...

Voortgang bewaren

Markeer deze les als afgerond

Zo weet je straks precies waar je bent gebleven.

Volgende stap

Klaar om je eerste webapp te bouwen?

In les 4 geef je je bouwidee aan AI en laat je een eerste simpele HTML-webapp maken.

Door naar les 4: je eerste simpele HTML-webapp maken