Eén bestand
Vraag AI om alles in één HTML-bestand te zetten. Dat houdt je eerste versie simpel en overzichtelijk.
Les 4 van 10
Je eerste simpele HTML-webapp maken
Je gebruikt je bouwidee uit les 3 en laat AI een eerste werkende versie maken als één simpel HTML-bestand dat je direct kunt openen.
Eerste versie
Vraag om iets dat meteen kan werken
In deze les laat je AI de eerste versie bouwen. Jij hoeft de code nog niet te begrijpen. Jij bewaakt vooral de opdracht: klein, duidelijk en zonder extra techniek.
Geen extra techniek
Geen database, accounts, API-sleutels of ingebouwde AI. De app moet direct in de browser kunnen werken.
Eerst werkend
Je eerste versie hoeft niet mooi of compleet te zijn. Als hij iets doet, heb je iets om te testen.
Prompt
Maak je eerste bouwprompt
Plak je bouwidee uit les 3 hieronder. Dan staat je volledige prompt meteen klaar om naar je AI-chatbot te sturen.
Jouw promptWacht op je bouwidee
Ik ben docent en ik wil een simpele onderwijswebapp maken.
Mijn bouwidee is:
[VUL HIER JE BOUWIDEE UIT LES 3 IN]
Maak een compleet HTML-bestand met HTML, CSS en JavaScript in hetzelfde bestand, zodat ik maar een bestand hoef te downloaden en te openen.
Geef een downloadbaar HTML-bestand terug.Wat wil je terugkrijgen?
Een downloadbaar HTML-bestand. Geen losse uitleg, geen halve code en nog geen extra mappen.
Als AI geen downloadbaar bestand geeft
Maak hier alsnog een downloadbaar HTML-bestand van dat ik direct kan openen in mijn browser. Zet alle HTML, CSS en JavaScript in hetzelfde bestand.
Wat doe je met het antwoord?
Van AI-antwoord naar eerste versie
Het antwoord van AI kan veel code bevatten. Dat is oké. Je hoeft die code nu niet regel voor regel te snappen. Je kijkt of het appje doet wat jij bedoelde.
1. Plak je bouwidee
Vervang de regel tussen haakjes door de zin die je in les 3 hebt gemaakt.
2. Laat AI bouwen
Plak de prompt in je starttool en vraag om een downloadbaar HTML-bestand.
3. Download en open
Klik op download en dubbelklik daarna op het HTML-bestand. Je nieuwe website opent dan in je browser.
4. Nog niet perfectioneren
Schrijf alleen op wat goed werkt en wat nog niet klopt. Online zetten doen we in les 5, verbeteren in les 6.
Nu doen
Actie van deze les
Maak je eerste versie
Laat AI je eerste simpele HTML-webapp maken.
0van 6 stappen gedaan
Checklist
0 van 6 gedaan
Pak je bouwidee uit les 3 erbij.
Plak je bouwidee in de prompt-maker.
Kopieer je persoonlijke bouwprompt.
Plak de prompt in je AI-tool.
Laat AI een downloadbaar HTML-bestand maken.
Download het HTML-bestand en open het door erop te dubbelklikken.
Klaar als:
Je hebt een eerste werkende versie van je webapp, ook als die nog rommelig of onvolledig is.
Vragen en opmerkingen
Praat verder over deze les
Stel een vraag, lees mee of help een andere cursist op weg.
Je kunt alle vragen lezen. Log in of registreer gratis om zelf mee te praten.
Log in of registreer0 vragenAlles is beantwoord
Vragen laden...