Jelle SpanningaJun 16, 2026
Website bouwen met AI: mijn proces 🚀
Website bouwen met AI: mijn proces 🚀
Jelle Spanninga
In deze video laat ik zien hoe ik met behulp van AI een website heb gebouwd voor de freelance-marketeer-challenge. Ik neem je mee door het proces, van de eerste prompts tot het uiteindelijke responsieve resultaat.
Website bouwen met AI: mijn proces 🚀
Jelle Spanninga
In deze video laat ik zien hoe ik met behulp van AI een website heb gebouwd voor de freelance-marketeer-challenge. Ik neem je mee door het proces, van de eerste prompts tot het uiteindelijke responsieve resultaat.
Chapters
00:00
Introductie van de challenge
Introductie van de freelance-marketeer-challenge en het gebruik van Claude.
00:15
Inspiratie en voorbeelden
00:40
AI Afbeeldingen genereren
01:12
Prompt Engineering
01:51
Ontwerpproces en iteraties
02:56
Eindresultaat presentatie
03:55
Hosting en responsiviteit
04:30
Conclusie en evaluatie
Transcript
00:00
Voor de freelance-marketeer-challenge heb ik de website gemaakt met Cloud.
00:06
In deze video ga ik gewoon heel even kort over mijn proces heen en over de verschillende versies, hoe ik uiteindelijk tot mijn laatste versie ben gekomen.
00:15
Ik heb ook zojuist de 25 beste marketing freelance websites online gezet.
00:21
Dat is dus een lijst met de top 25 websites.
00:25
Daar kan je inspiratie het op doen.
00:27
Je kan ze ook makkelijk gebruiken om bijvoorbeeld een AI beter te prompten of bijvoorbeeld daar bepaalde inspiratie of bepaalde dingen uit te pakken.
00:38
Dus dat zou kunnen helpen.
00:40
Ik ben begonnen bij afbeeldingen maken met AI.
00:45
Dat kan inmiddels natuurlijk echt zo goed dat je het heel lastig nog onderscheidt van het echte.
00:51
Ook was ik echt verbaasd over de consistentie van de persoon in dit geval.
00:57
Dus je ziet gewoon bijna geen verschil in telkens een nieuwe foto maken met dezelfde persoon.
01:06
Dus daar was ik echt heel positief verrast over.
01:09
Daar was ik mee begonnen, met het maken van de afbeeldingen.
01:12
Toen ben ik uiteindelijk een prompt gaan maken.
01:16
En ik ben eigenlijk continu die prompt gaan aanvullen, tot die op een gegeven moment 67 pagina's lang is.
01:23
En er staat echt van alles in.
01:25
Er staat eigenlijk gewoon hele code in.
01:28
Er staat instructie in van bepaalde animatie.
01:32
Het is echt één lange, gewoon één hele lange prompt eigenlijk.
01:38
Dit is eigenlijk een beetje waarmee ik begon.
01:41
Nee, sorry, dat zeg ik niet goed.
01:44
Hiermee begon ik een beetje.
01:46
Dus dit was ook een beetje waar ik vandaan kwam.
01:51
Vervolgens een paar versies verder.
01:53
Ik wilde hier eigenlijk iets van een animatieachtig iets doen, maar dat heb ik toch uiteindelijk niet gedaan.
02:00
Deze bento grid heb ik er ook uitgehaald uiteindelijk.
02:06
Dit is weer een nieuwe versie.
02:08
Ik ga eigenlijk gewoon zo even door de verschillende versies heen.
02:11
Hier had ik hem nog anders.
02:14
Hier was hij nog niet helemaal responsief.
02:16
Hier ook nog geen logo aan de linksboven.
02:20
Die heb ik hier dan wel.
02:22
Hier vond ik de teksten nog iets wat te lang, waardoor het iets wat druk werd, vond ik.
02:27
Dus dan heb ik die wat kleiner gemaakt, de teksten.
02:30
Dat is denk ik hier.
02:32
Dus hier is de tekst alweer wat kleiner.
02:34
Hier is de tekst nog kleiner.
02:36
En dit is wel veel meer richting de laatste versie die ik heb gemaakt.
02:43
En uiteindelijk is dit nog weer een wat latere versie En dit is de laatste versie die ik heb gemaakt, die zal ik even wat langer laten zien.
02:56
Eigenlijk alles wat je hier ziet is door middel van Cloud Code gemaakt.
03:02
Je ziet de afbeelding, nou moet ik wel zeggen trouwens de afbeeldingen zijn niet gemaakt met Cloud, dus dat is nog wel even goed om aan te geven.
03:11
Verder werkt alles gewoon, dus het is gewoon een one-pager die gewoon linkt naar de secties op dezelfde pagina.
03:21
Vervolgens is het aanbod een gratis LinkedIn-audit.
03:27
En ja, ze zijn de teksten ook op zich netjes geschreven.
03:31
Het design is denk ik best wel netjes.
03:34
Het is niet heel erg opvallend AI, denk ik.
03:40
Hier een mooie bento grid.
03:42
Hier op zich deze sectie.
03:45
Belangrijk over onze sectie.
03:48
En hier vervolgens een beetje de call to action sectie van het formulier.
03:52
En ja, dat is hem eigenlijk al.
03:55
Ik heb hem ook even op een Netlify domein gezet.
04:01
zodat je hem makkelijk kan bekijken.
04:04
Het ging eigenlijk echt heel erg soepel, dus dat zou ik zeker aanraden om, mocht je websites maken met cloud, om daar zeker even naar te kijken.
04:12
Netlify.
04:13
Kan je hem makkelijk op een Netlify testdomein zetten en daar kunnen andere mensen hem ook bekijken.
04:21
Hij is ook best mooi responsive gemaakt.
04:25
Dat ziet er dan zo uit.
04:30
Al met al ben ik hier denk ik zo'n...
04:36
Ja, ik denk iets langer dan een uur mee bezig geweest.
04:38
Dus ik denk echt een prima resultaat voor de tijd waarmee ik ermee bezig ben geweest.
04:44
En ja, ik denk sowieso gewoon een prima algeheel eindresultaat.
04:49
Dus daar ben ik best tevreden mee.
04:52
Ik hoop dat het enigszins inzichtelijk was wat ik heb gemaakt.
04:58
Mocht je er vragen over hebben, laat het dan vooral weten en dan spreek ik je.
Comments
Comments
No comments yet