Als je een landingspagina of portfolio als één HTML-bestand in je browser wilt openen, zonder website builder.
Je helpt mensen zonder technische achtergrond aan een heel simpele, statische website of landingspagina.
Doel: Eén HTML-bestand met puur HTML. CSS en JavaScript in hetzelfde bestand. Geen frameworks, geen build-tools, geen npm, geen React, geen extra bestanden.
Context:
- Waar de pagina voor is: [WEBSITE-DOEL, BIJV. HONDENUITLAAT, TROUWUITNODIGING, KLEINE WINKEL]
- Hoofdkop: [KOPTEKST OF BEDRIJFSNAAM]
- Korte omschrijving: [EEN OF TWEE ZINNEN OVER WAT JE AANBIEFT]
- Contact of call-to-action: [E-MAIL, TELEFOON, LINK OF KNOOPTEKST]
- Kleuren of stijl (optioneel): [KLEUREN, SFEER OF EEN SITE DIE JE LIKT]
- Extra secties (optioneel): [DIENSTEN, PRIJZEN, FAQ OF FOTO-PLACEHOLDERS]
Succescriteria:
- Eén bestand index.html met HTML, ingesloten CSS en JS in dat ene bestand
- Layout werkt op telefoon en desktop
- Heldere taal. Geen jargon
- De visuele stijl past bij kleuren of sfeer als ik die heb ingevuld
Instructies:
1. Voor de code een korte uitleg in simpel Nederlands:
- Dit is een heel simpele statische pagina. Geen database, geen login, geen webwinkel.
- Het bestand als index.html op de computer opslaan.
- Om te bekijken: rechtsklik op het HTML-bestand, kies «Openen met» en pak je webbrowser (bijvoorbeeld Chrome of Firefox).
- Teksten kunnen later in een simpele teksteditor worden aangepast.
2. Het volledige index.html-bestand schrijven. Alleen vanilla HTML met ingesloten CSS en plain JavaScript.
3. Als foto's nodig zijn: placeholder-blokken met label in plaats van kapotte afbeeldinglinks.
Outputformaat:
- Begin met de uitleg uit stap 1.
- Daarna de complete index.html in één codeblok.
- Eindig met twee korte tips voor kleine aanpassingen die iemand zelf kan doen.
Stijlregels:
- Geen externe dependencies behalve een gratis font van Google Fonts als dat nodig is
- Geen verzonnen reviews of bedrijfsinfo. Alleen wat ik gaf of duidelijke placeholders zoals <JOUW TELEFOONNUMMER>
Zo gebruik je het
- Handig om ideeën zichtbaar te maken, niet voor interactieve webapps.
- Vraag een tweede versie met een andere look als het eerste ontwerp niet klopt.
- Plak je echte e-mail of telefoonnummer in het opgeslagen bestand na het kopiëren uit de chat.
Tips
- Eén pagina is genoeg voor een eerste versie. Vraag extra secties alleen als je ze echt nodig hebt.
- Als de chat de code afkapt, schrijf «zet de index.html verder waar je gebleven was».
Voorbeeldoutput
Voordat je deze pagina gebruikt
Dit is een heel simpele statische website. Eén bestand op je computer. Geen betalingen, geen wachtwoorden, geen automatische updates.
Sla de code hieronder op als index.html. Om te openen: rechtsklik op het bestand, «Openen met» en je webbrowser.
```html
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zonnige Poten Hondenuitlaat</title>
<style>
/* simpele layout-styles hier */
...
</style>
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
```
Twee snelle aanpassingen: bedrijfsnaam in de hoofdkop wijzigen. [JOUW TELEFOONNUMMER] vervangen door je echte nummer.