← Terug naar modules
🏗️

Een compleet project bouwen

⏱️30 min|Module 4

Deze instructies zijn voor Claude Desktop (de applicatie met visuele interface).

Een compleet project bouwen

Nu je de basis kent, gaan we een compleet project bouwen van begin tot eind. Je leert hoe je complexere opdrachten geeft, iteratief werkt, en Claude stuurt naar precies wat je wilt.

Het project: Een persoonlijke blog

We gaan een simpele maar complete blog maken. Niet omdat het ingewikkeld is, maar omdat het alle belangrijke concepten laat zien:

  • Meerdere HTML paginas met consistente styling
  • Navigatie tussen pagina's
  • Data structuur (blog posts)
  • Responsive design
  • JavaScript interactiviteit

Stap 1: Project setup

Maak een nieuwe map voor je blog project:

Via Finder/Explorer:

  • Maak een map "mijn-blog" in de map "ClaudeCodeZandbak" die je eerder al maakte.
  • Open Claude Code
  • Cmd+Shift+O (Mac) of Ctrl+Shift+O (Windows)
  • Selecteer de "mijn-blog" map

Type in de prompt:

Ik wil een nieuw blog project starten. Maak een project structuur aan met mappen voor pages, styles, en scripts.

Claude maakt de mappenstructuur aan. Je ziet de mappenstructuur ontstaan nadat Claude een plan heeft gemaakt:

mijn-blog/ pages/ styles/ scripts/

File browser toont de aangemaakte project structuur

Stap 2: De homepage maken

Nu gaan we de homepage bouwen. Geef Claude een duidelijke opdracht:

Maak een moderne blog homepage (index.html) met: - Een header met titel "Mijn Avonturen" en navigatie menu - Een hero sectie met welkomsttekst - Een grid met 3 blog post previews (dummy content voor nu) - Een footer met copyright Styling: Modern, clean, lichte kleuren, goede spacing. Zet de CSS in styles/main.css en link ernaar.

Let op wat Claude doet:

  1. Planning: Claude denkt na en vertelt zijn aanpak
  2. Files aanmaken:
    • index.html met de structuur
    • styles/main.css met alle styling
  3. Preview: Je ziet alle bestanden in je mappenstructuur

Stap 3: Het resultaat bekijken

Open het bestand:

  • Rechtsklik op index.html in de file browser
  • Kies "Open in Browser"

Je ziet nu een werkende homepage. Niet slecht voor één opdracht, maar waarschijnlijk wil je dingen aanpassen.

Stap 4: Iteratief verfijnen

Dit is waar de desktop app echt schittert. Je kunt stap voor stap aanpassingen vragen en direct het resultaat zien.

Aanpassing 1: Kleuren veranderen

De kleuren zijn wat saai. Maak het speelser: - Header achtergrond: diep blauw (#2c3e50) - Accent kleur voor links en buttons: warm oranje (#e67e22) - Blog card hover effect: lichte schaduw

Claude laat de verschillen zien van styles/main.css. Je ziet precies welke CSS rules veranderen. Klik Accepteer.

Ververs je browserpagina en je ziet de nieuwe kleuren.

Aanpassing 2: Responsiveness

Op mobiel ziet het er niet goed uit. Maak een versie van de pagina zodat ik die ook op en mobiel kan bekijken.

Weer veranderingen in de CSS. Accepteer, ververs de pagina, resize je browser venster naar mobiel formaat. Het werkt!

Aanpassing 3: Content aanpassen

De dummy blog posts zijn te generiek. Vervang ze met deze titels: 1. "Mijn eerste dag als digitale nomade" 2. "De beste koffie van Lissabon" 3. "Waarom ik remote werken geweldig vind" Pas ook de excerpt teksten aan zodat ze bij de titels passen.

Een verandering in index.html, alleen de content wijzigt. Accepteer en ververs.

Stap 5: Meer pagina's toevoegen

Een blog heeft meer dan alleen een homepage:

Maak twee extra pagina's: 1. pages/about.html - About me pagina met: - Zelfde header en footer als homepage - Een sectie over wie ik ben - Een foto placeholder (img tag met dummy src) 2. pages/blog.html - Overzichtspagina met: - Zelfde header en footer - Een lijst van alle blog posts (6 stuks nu) - Elk met titel, datum, excerpt, en "Lees meer" link Zorg dat de navigatie in alle pagina's werkt.

Claude's aanpak:

  1. Maakt pages/about.html
  2. Maakt pages/blog.html
  3. Past index.html aan (navigatie links updaten)
  4. Past mogelijk styles/main.css aan voor nieuwe elementen

Je ziet elk bestand ontstaan. Elke wijziging kun je bekijken voordat je accept.

Stap 6: Interactiviteit toevoegen

Tijd voor wat JavaScript:

Voeg interactiviteit toe: 1. Een "dark mode" toggle knop in de header - Wissel tussen light en dark theme - Bewaar de voorkeur in localStorage 2. Een "Scroll to top" knop die verschijnt als je naar beneden scrolt 3. Blog post cards met een fade-in animatie bij laden Maak een nieuw bestand scripts/main.js voor de JavaScript.

prompt uitkomst interactiviteit

Accept all, refresh, en test de dark mode knop. Het werkt!

Stap 7: Problemen oplossen

Soms werkt iets niet zoals verwacht. Laten we dat simuleren:

De scroll to top knop werkt niet. Debug dit en fix het.

Claude's aanpak:

  1. Leest scripts/main.js
  2. Identificeert het probleem (bijvoorbeeld: event listener wordt te vroeg toegevoegd)
  3. Legt uit wat er mis is
  4. Laat de fix zien in de code

Accept, refresh, getest, het werkt.

Dit is waarom de visuele interface zo waardevol is: je ziet het probleem, de uitleg, en de oplossing in één overzicht.

Stap 8: Polish en details

Laatste verfijningen:

Voeg deze finishing touches toe: - Een favicon (gebruik een emoji via data URI) - Meta tags voor social media sharing - Een smooth scroll behavior voor anchor links - Transitions op alle hover effects (200ms ease)

finishing touches

Claude past meerdere bestanden aan. Je kunt elk apart bekijken:

  • index.html - favicon en meta tags
  • styles/main.css - transitions en smooth scroll
  • Zelfde wijzigingen in about.html en blog.html

Accept all. Je blog ziet er nu professioneel uit.

Het resultaat

Je hebt nu:

  • 3 HTML pagina's met consistente styling
  • Navigatie die werkt
  • Responsive design (mobiel-vriendelijk)
  • Dark mode functionaliteit
  • Smooth scrolling en animaties
  • Professionele meta tags

En dit allemaal zonder één regel code zelf te typen. Je hebt alleen duidelijk gecommuniceerd wat je wilde.

Wat je hebt geleerd

Over de workflow:

  • Start met een duidelijke project scope
  • Bouw in stappen (setup → basis → verfijningen → polish)
  • Gebruik de visuele codeviewer om wijzigingen te begrijpen
  • Accepteer stap voor stap, test tussendoor
  • Debug problemen door Claude te vragen naar errors

Over opdrachten geven:

  • Wees specifiek over wat je wilt
  • Geef context (voor wie, waarom, welke stijl)
  • Vraag om uitleg als iets niet duidelijk is
  • Itereer: begin simpel, voeg toe, verfijn

Over de desktop interface:

  • File browser toont alle wijzigingen
  • Visuele codeviewer laat exact zien wat verandert
  • Accept/Reject geeft je volledige controle
  • Chat geschiedenis behoudt context

Volgende stappen

Je kunt dit project uitbreiden:

Voeg een contact formulier toe met validatie op emailadres
Maak aparte tekstbestanden van de blog posts die ik kan aanpassen
Voeg een zoekfunctie toe voor blog posts
Implementeer een simpele reageermogelijkheid

Elke opdracht volgt dezelfde workflow: vraag het, bekijk de wijzigingen, accepteer, test, verfijn.

Tips voor complexe projecten

Breek grote taken af:

  • ❌ "Bouw een complete blog met database, admin panel, en comments"
  • ✅ Start met statische pagina's, daarna interactiviteit, dan backend

Geef feedback na elke stap:

  • "De spacing tussen blog cards is te groot, maak het 20px"
  • Claude leert van je feedback binnen de sessie

Gebruik de chat history:

  • Scroll terug om te zien wat je eerder vroeg
  • Refereer naar eerdere wijzigingen: "Pas dezelfde stijl toe als bij de header"

Save checkpoints: De desktop app bewaart automatisch je bestanden. Voor veiligheid kun je ook git gebruiken:

Initialiseer git in dit project en maak een eerste commit

Claude helpt je zelfs met version control via de interface.

Exporteer naar een editor: Als je handmatig verder wilt werken, open je project gewoon in je favoriete code editor. Claude's werk is plain HTML/CSS/JS, geen speciale formats.

Dus ga aan de slag. Bouw projecten, experimenteer, maak fouten, en leer van het proces. De desktop app maakt het visueel, veilig, en vooral: leuk.