← Terug naar modules
🏗️

Een project bouwen met Claude Code

⏱️25 min|Module 3

Van losse bestanden naar een echt project

Je kunt nu met Claude praten en bestanden maken. Maar de echte kracht zit in het bouwen van complete projecten.

In deze module maken we samen een persoonlijke webpagina. Geen ingewikkeld framework, gewoon HTML en CSS die je direct in je browser kunt openen.

Wat je leert

  • Een project opzetten met Claude
  • Meerdere bestanden laten samenwerken
  • Claude's suggesties begrijpen en bijsturen
  • Je resultaat bekijken in de browser

Stap 1: Een nieuwe projectmap

Laten we fris beginnen. Open je terminal:

mkdir mijn-website
cd mijn-website
claude

Je staat nu in een lege map, klaar om te bouwen.

Stap 2: Vertel Claude wat je wilt

Nu gaan we Claude een duidelijke opdracht geven. Typ:

Ik wil een simpele persoonlijke webpagina maken met:
- Een welkomstboodschap met mijn naam
- Een korte "over mij" sectie
- Een lijstje met 3 hobby's
- Mooie styling met kleuren

Maak dit met HTML en CSS in aparte bestanden.

Kijk wat Claude doet:

  1. Hij maakt een plan
  2. Hij vraagt toestemming per bestand
  3. Hij legt uit wat elk bestand doet

Geef toestemming met y of a (always voor deze sessie).

Stap 3: Bekijk het resultaat

Je hebt nu waarschijnlijk twee bestanden:

  • index.html - De structuur van je pagina
  • styles.css - De vormgeving

Om je website te zien:

Op Mac:

open index.html

Op Windows:

start index.html

Je browser opent en je ziet je website!

Stap 4: Aanpassingen maken

De site is misschien niet precies wat je wilde. Geen probleem. Vraag Claude om aanpassingen:

Kun je de achtergrondkleur donkerblauw maken en de tekst wit?

Of:

Voeg een foto placeholder toe bovenaan de pagina

Of:

Maak de hobby's als kaartjes met een schaduw eromheen

Elke keer past Claude de bestanden aan. Vernieuw je browser om het resultaat te zien.

Stap 5: Leren door te kijken

Een van de beste manieren om te leren is door te vragen wat Claude deed:

Leg uit wat de CSS code doet die je net schreef

Claude geeft dan een uitleg die past bij jouw niveau. Hoe meer je vraagt, hoe meer je leert.

Tips voor goede opdrachten

Na deze module heb je een gevoel voor hoe Claude werkt. Hier zijn tips om hem effectiever te gebruiken:

Wees specifiek

  • Vaag: "Maak het mooier"
  • Specifiek: "Maak de knoppen groter en voeg een hover effect toe"

Geef context

  • Zonder context: "Voeg een formulier toe"
  • Met context: "Voeg een contactformulier toe met velden voor naam, email en bericht"

Vraag om uitleg

  • "Waarom heb je het zo gedaan?"
  • "Wat doet deze regel code?"
  • "Zijn er andere manieren om dit te doen?"

Itereer

Je hoeft niet alles in een keer perfect te krijgen. Vraag om kleine aanpassingen, bekijk het resultaat, en ga verder.

Probeer het zelf

Bouw verder aan je website. Hier zijn ideeen:

  1. "Voeg een navigatiemenu toe bovenaan"
  2. "Maak een tweede pagina met meer details over een hobby"
  3. "Voeg animaties toe als je over elementen hovert"
  4. "Maak de website responsive zodat hij op telefoons ook goed werkt"

Samenvatting

Je hebt geleerd:

  • [x] Een project opzetten vanaf nul
  • [x] Claude een duidelijke opdracht geven
  • [x] Meerdere bestanden laten aanmaken
  • [x] Je resultaat bekijken in de browser
  • [x] Iteratief verbeteren met feedback

Dit is de basis workflow die je voor elk project gebruikt:

  1. Beschrijf wat je wilt
  2. Laat Claude bouwen
  3. Bekijk het resultaat
  4. Vraag om aanpassingen
  5. Herhaal

Wat nu?

Je hebt nu de fundamenten onder de knie. Van hier kun je alle kanten op:

  • Bouw een complexer project (een rekenmachine, een to-do app)
  • Leer over /help en alle beschikbare commando's
  • Experimenteer met code in talen die je nog niet kent
  • Gebruik Claude om bestaande code te begrijpen

De beste manier om te leren? Gewoon doen. Open Claude Code en begin met bouwen!