Website maken met AI: zo pak je het aan

Met een websitebouwer zit je vast aan sjablonen en een abonnement. Met vibe coding beschrijf je precies wat je wilt en is het resultaat echt van jou: je kunt het aanpassen, uitbreiden en hosten waar je wilt. En je hoeft geen code te kunnen schrijven.

Een website laten maken door een bureau is vaak de beste keus als je weinig tijd hebt. Maar wil je zelf de regie houden en later zelf dingen aanpassen, dan is zelf bouwen met AI een goed alternatief. Een nieuwe pagina of een andere tekst is dan een kwestie van een opdracht geven.

Je hoeft daarvoor geen code te leren lezen. Wel helpt het om op hoofdlijnen te weten hoe een website in elkaar zit: pagina's, een menu, afbeeldingen en een stijlbestand dat de kleuren en lettertypes bepaalt. Dat leer je vanzelf terwijl je bouwt, omdat de AI uitlegt wat hij maakt.

• sjablonen

  Websitebouwer

  Je kiest een sjabloon en vult het in. Snel en overzichtelijk, maar je zit vast aan wat het sjabloon toelaat en aan het platform.

• cms

  WordPress

  Veel gebruikt en met heel veel uitbreidingen. Je hebt veel mogelijkheden, maar moet ook leren werken met thema's, plug-ins en updates.

• vibe coding

  Zelf bouwen met AI

  Je beschrijft wat je wilt en de AI schrijft de code. Je bent vrij in vormgeving en functies, en de bestanden zijn van jou. Je moet wel zelf testen en het online zetten.

1. 1

   Bepaal het doel

   Wat moet een bezoeker doen? Contact opnemen, iets kopen, zich aanmelden?

2. 2

   Verzamel je materiaal

   Logo, kleuren, teksten en foto's. Hoe beter je input, hoe beter het resultaat.

3. 3

   Beschrijf de pagina's

   Vertel de AI welke pagina's je wilt en wat er op elke pagina moet staan.

4. 4

   Test op je eigen computer

   Start de site lokaal met npm run dev en bekijk hem op localhost, voordat iemand anders hem ziet.

5. 5

   Stuur bij op details

   Lettertype, ruimte, knoppen, de weergave op telefoon. Vraag om aanpassingen tot het klopt.

6. 6

   Zet hem online

   Bewaar je code in GitHub, publiceer de site en koppel je eigen domeinnaam.

Begin met het grote plaatje: wat voor bedrijf of project het is, voor wie de site is en welke sfeer je wilt. Noem je kleuren en lettertypes, of geef een voorbeeldsite die je mooi vindt en zeg wat je eraan aanspreekt.

Bouw daarna pagina voor pagina. Vraag eerst om de homepage, kijk of de stijl klopt en ga dan verder met de volgende pagina. Zo voorkom je dat je aan het eind alles moet omgooien omdat de basis niet goed was.

Vergeet deze onderdelen niet te vragen:

• Een menu dat ook op de telefoon goed werkt
• Een contactformulier of duidelijke manier om contact op te nemen
• Een footer met je gegevens en een privacyverklaring
• Afbeeldingen met een korte omschrijving voor wie ze niet kan zien

SEO betekent zorgen dat je site goed gevonden wordt in Google. Een mooie site levert pas iets op als mensen hem vinden. Let op:

• Een duidelijke paginatitel en omschrijving per pagina
• Koppen die zeggen waar de pagina over gaat
• Snelle laadtijd en goede weergave op telefoon
• Teksten die antwoord geven op de vragen van je bezoekers
• Logische adressen voor je pagina's, zoals /contact en /diensten

De AI bouwt wat je vraagt. Vraag dus expliciet om een titel en omschrijving per pagina, en controleer of elke pagina één duidelijke hoofdkop heeft.

Schrijf je teksten bij voorkeur zelf, of laat de AI een eerste versie maken die je daarna in je eigen woorden herschrijft. Bezoekers en Google waarderen teksten die echt over jouw bedrijf gaan, met de woorden die je klanten zelf gebruiken.

Zolang je site alleen op je eigen computer staat, kan niemand hem zien. Online zetten betekent dat je de bestanden op een server zet die altijd aan staat. In de cursus bewaar je je code eerst in GitHub en zet je hem vanaf daar online.

Daarna koppel je je eigen domeinnaam, zoals jouwbedrijf.nl. Dat doe je bij de partij waar je de domeinnaam hebt gekocht. Elke wijziging die je later maakt, zet je op dezelfde manier online.