Je eerste project bouwen

15 min Beginner Gratis

Je eerste project bouwen

Nu wordt het serieus. In deze les bouw je een echte, complete landingspagina met Claude Code. Je leert het werkproces dat je bij elk project gaat gebruiken.

Voorbereiding

Zorg dat je Claude Code hebt geïnstalleerd (les 2 of 3). Open je terminal en maak een nieuw project aan:

mkdir portfolio-site
cd portfolio-site
git init
claude
Tip

We beginnen met git init zodat Git je werk bijhoudt vanaf het begin. Zo kun je altijd terug naar een eerdere versie als er iets misgaat.

Het werkproces

Elk project met Claude Code volgt hetzelfde patroon:

  1. Jij beschrijft wat je wilt
  2. Claude maakt een plan en laat dat zien
  3. Claude schrijft de code en maakt bestanden aan
  4. Jij bekijkt het resultaat
  5. Jij geeft feedback en Claude past aan
  6. Herhaal tot je tevreden bent

Dit noemen we de prompt-plan-code loop. Het is de kern van werken met Claude Code.

Stap 1: De eerste prompt

Geef Claude een duidelijke opdracht. Hoe specifieker, hoe beter:

Maak een persoonlijke portfolio website voor een freelance designer.

Vereisten:
- Moderne, strakke styling met een donker thema
- Een hero sectie met naam en tagline
- Een "Over mij" sectie
- Een portfolio grid met 6 placeholder projecten
- Een contact sectie met een simpel formulier
- Responsive design (werkt op telefoon en desktop)
- Alles in één HTML bestand met inline CSS

Druk op Enter en kijk wat er gebeurt.

Stap 2: Het plan bekijken

Claude toont eerst een plan. Dat ziet er ongeveer zo uit:

Ik ga een portfolio website maken met de volgende structuur:
- index.html met embedded CSS
- Hero sectie met gradient achtergrond
- CSS Grid voor het portfolio
- Flexbox voor de layout
- Media queries voor responsive design

Zal ik doorgaan?
Info

Claude vraagt altijd om toestemming voordat het bestanden aanmaakt of wijzigt. Dit is een veiligheidsmaatregel. Lees het plan even door en typ yes als het er goed uitziet.

Stap 3: De code bekijken

Na je goedkeuring schrijft Claude de code. Je ziet in je terminal precies welke bestanden worden aangemaakt en wat erin staat.

Als het klaar is, open het resultaat:

# Op Mac:
open index.html

# Op Windows (WSL):
explorer.exe index.html

Dit is het wauw-moment. In minder dan een minuut heb je een complete, werkende website. Met styling, responsive design, en een professionele uitstraling.

Stap 4: Feedback geven

De eerste versie is zelden perfect — en dat hoeft ook niet. Nu komt het itereren. Kijk naar het resultaat en vertel Claude wat je wilt aanpassen:

Het ziet er goed uit! Maar ik wil een paar dingen aanpassen:
- Maak de hero sectie groter, met een subtiele animatie
- Gebruik een blauw-paars gradient in plaats van groen
- Voeg hover effecten toe aan de portfolio kaarten
- Maak het contact formulier mooier

Claude past de code aan. Je hoeft niet te vertellen hoe — alleen wat je wilt.

Stap 5: Opslaan met Git

Tevreden? Laat Claude een Git checkpoint maken:

Sla alles op met git. Commit message: "Eerste versie portfolio site"

Claude voert de Git commando’s uit:

git add .
git commit -m "Eerste versie portfolio site"
Let op

Sla regelmatig op met Git — na elke grote stap. Als Claude later iets kapotmaakt (het gebeurt), kun je altijd terug naar een werkende versie.

Stap 6: Verder bouwen

Nu je de basis hebt, kun je blijven toevoegen:

Voeg een donker/licht modus toggle toe rechtsboven.
Sla de voorkeur op in localStorage.

Of:

Voeg smooth scroll toe zodat de navigatie-links
soepel naar de juiste sectie scrollen.

Elk verzoek bouwt voort op wat er al staat. Claude kent het hele project en past de bestaande code aan.

Het grote plaatje

Wat je net hebt gedaan is het fundament van alles wat komt:

  1. Beschrijf wat je wilt in gewone taal
  2. Bekijk het plan
  3. Review het resultaat
  4. Itereer tot je tevreden bent
  5. Sla op met Git

Dit patroon werkt voor alles — of je nu een simpele webpagina bouwt of een complexe applicatie met een database.

Checkpoint bereikt!

Wat je nu moet kunnen:

Je hebt je eerste echte project gebouwd! Je kent nu het werkproces:

  • Een duidelijke prompt schrijven
  • Het plan van Claude bekijken
  • Het resultaat reviewen en feedback geven
  • Itereren tot je tevreden bent
  • Opslaan met Git

Dit is de basis voor alles wat komt in deze cursus.

Experimenteer!

Probeer nu zelf een paar projecten. Hier zijn ideeën:

  • Een receptenwebsite — met een lijst van je favoriete recepten
  • Een quiz — een interactieve quiz over een onderwerp dat je leuk vindt
  • Een countdown timer — tel af naar een evenement
  • Een weerapp — die het weer ophaalt via een API

Hoe meer je experimenteert, hoe beter je wordt in het geven van goede prompts. En dat is precies wat we in module 2 gaan verdiepen.

Volgende module

In module 2 leer je de essentiële commando’s en sneltoetsen van Claude Code, en hoe je effectief context geeft zodat Claude je beter begrijpt.