← Terug naar modules
⚙️

Een compleet project bouwen

⏱️35 min|Module 3

Een compleet project bouwen via de terminal

Nu je de basis terminal workflow kent, gaan we een compleet project bouwen. Je leert complexere opdrachten geven, efficiënt navigeren, en een professionele workflow opzetten.

Het project: Een persoonlijke blog

We gaan een simpele maar complete blog maken via de terminal. Dit laat alle belangrijke terminal workflow concepten zien:

  • Project setup met directory structuur
  • Meerdere bestanden in één workflow
  • Git integratie voor version control
  • Iteratief verfijnen met diffs
  • Testen en debuggen

Stap 1: Project setup

Maak de project directory en navigeer erheen:

mkdir ~/Projecten/mijn-blog cd ~/Projecten/mijn-blog

Initialiseer git (altijd een goed idee):

git init

Nu vraag je Claude om de basis structuur:

claude "Maak een project structuur aan voor een blog met mappen voor pages, styles, en scripts. Voeg ook een .gitignore toe."

Output:

Creating project structure... [New file: .gitignore] node_modules/ .DS_Store *.log [New directory: pages/] [New directory: styles/] [New directory: scripts/] Create these files and directories? (y/n):

Type y.

Verifieer met:

ls -la

Output:

drwxr-xr-x 6 frank staff 192 Jan 10 10:30 . drwxr-xr-x 15 frank staff 480 Jan 10 10:29 .. drwxr-xr-x 9 frank staff 288 Jan 10 10:30 .git -rw-r--r-- 1 frank staff 45 Jan 10 10:30 .gitignore drwxr-xr-x 2 frank staff 64 Jan 10 10:30 pages drwxr-xr-x 2 frank staff 64 Jan 10 10:30 scripts drwxr-xr-x 2 frank staff 64 Jan 10 10:30 styles

Perfect. Commit deze setup:

git add . git commit -m "Initial project structure"

Stap 2: De homepage maken

Nu gaan we de homepage bouwen met één goed geformuleerde opdracht:

claude "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) - Een footer met copyright Styling: Modern, clean, lichte kleuren, goede spacing. Zet de CSS in styles/main.css en link ernaar."

Claude's output:

I'll create a modern blog homepage with separate CSS. [New file: index.html] <!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mijn Avonturen</title> <link rel="stylesheet" href="styles/main.css"> </head> ... [volledige HTML hier] [New file: styles/main.css] * { margin: 0; padding: 0; box-sizing: border-box; } ... [volledige CSS hier] Create these 2 files? (y/n):

Type y.

Open het in je browser om te testen:

open index.html # Mac start index.html # Windows xdg-open index.html # Linux

Stap 3: Iteratief verfijnen

De homepage werkt, maar je wilt aanpassingen. Hier schittert de terminal workflow.

Aanpassing 1: Kleuren

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

Output toont een diff:

I'll update the color scheme in styles/main.css --- styles/main.css +++ styles/main.css @@ -15,7 +15,7 @@ header { - background-color: #333; + background-color: #2c3e50; color: white; padding: 1rem 2rem; } @@ -45,7 +45,7 @@ .btn { - background-color: #007bff; + background-color: #e67e22; color: white; padding: 0.5rem 1rem; } Apply these changes? (y/n):

Type y.

Refresh je browser (F5). De kleuren zijn nu levendiger.

Aanpassing 2: Responsiveness

claude "Voeg media queries toe zodat het grid 1 kolom wordt op schermen smaller dan 768px"

Diff van CSS met media queries. Type y.

Test door je browser venster smaller te maken.

Quick check wat we hebben:

ls -lh cat styles/main.css | wc -l

Output:

112

112 regels CSS, allemaal door Claude gegenereerd.

Stap 4: Meer pagina's toevoegen

Blogs hebben meerdere pagina's. Vraag ze in één commando:

claude "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 2. pages/blog.html - Overzichtspagina met: - Zelfde header en footer - Een lijst van 6 blog posts - Elk met titel, datum, excerpt, en 'Lees meer' link Update ook de navigatie in index.html zodat de links werken."

Claude's output:

I'll create two new pages and update navigation. [New file: pages/about.html] ... [New file: pages/blog.html] ... [Modified: index.html] --- index.html +++ index.html @@ -12,8 +12,8 @@ <nav> <ul> - <li><a href="#">Home</a></li> - <li><a href="#">Blog</a></li> - <li><a href="#">About</a></li> + <li><a href="index.html">Home</a></li> + <li><a href="pages/blog.html">Blog</a></li> + <li><a href="pages/about.html">About</a></li> </ul> </nav> Create 2 new files and modify index.html? (y/n):

Type y.

Verifieer:

ls pages/

Output:

about.html blog.html

Test de navigatie door index.html te openen en door te klikken.

Stap 5: Git checkpoint

Dit is een goed moment voor een commit:

git add . git status

Output:

On branch main Changes to be committed: new file: index.html new file: pages/about.html new file: pages/blog.html new file: styles/main.css

Commit:

git commit -m "Add homepage, about, and blog pages with styling"

Dit geeft je een veiligheidsnet. Als iets misgaat, kun je terug naar deze versie.

Stap 6: JavaScript toevoegen

Tijd voor interactiviteit:

claude "Voeg interactiviteit toe in scripts/main.js: 1. Een dark mode toggle knop in de header - Wissel tussen light en dark theme - Bewaar voorkeur in localStorage 2. Een 'Scroll to top' knop die verschijnt als je scrollt 3. Fade-in animatie voor blog cards bij laden Update index.html om het script te linken en voeg dark mode CSS toe aan main.css"

Output toont 3 file wijzigingen:

[New file: scripts/main.js] // Dark mode toggle const darkModeToggle = document.createElement('button'); ... [volledige JavaScript] [Modified: index.html] --- index.html +++ index.html @@ -5,6 +5,7 @@ <title>Mijn Avonturen</title> <link rel="stylesheet" href="styles/main.css"> + <script src="scripts/main.js" defer></script> </head> [Modified: styles/main.css] --- styles/main.css +++ styles/main.css @@ -1,8 +1,17 @@ +:root { + --bg-color: #f5f5f5; + --text-color: #333; + --card-bg: white; +} + +body.dark-mode { + --bg-color: #1a1a1a; + --text-color: #e0e0e0; + --card-bg: #2a2a2a; +} Apply all 3 changes? (y/n):

Type y.

Refresh je browser. Test de dark mode knop. Scroll naar beneden, kijk of de "scroll to top" knop verschijnt.

Stap 7: Debuggen

Stel dat de scroll to top knop niet werkt. Debug via Claude:

claude "De scroll to top knop werkt niet. Debug en fix het probleem."

Output:

Let me check the JavaScript... Reading scripts/main.js... I found the issue: The scroll-to-top button doesn't exist in the HTML yet. We're trying to add an event listener to it, but we never created the element. Here's the fix: --- scripts/main.js +++ scripts/main.js @@ -20,6 +20,15 @@ // Scroll to top functionality +const scrollTopBtn = document.createElement('button'); +scrollTopBtn.textContent = '↑'; +scrollTopBtn.className = 'scroll-top'; +scrollTopBtn.style.display = 'none'; +document.body.appendChild(scrollTopBtn); + window.addEventListener('scroll', () => { - const scrollTopBtn = document.querySelector('.scroll-top'); if (window.scrollY > 300) { Apply this fix? (y/n):

Claude leest de code, vindt het probleem, legt het uit, en geeft de fix. Type y.

Dit is de kracht van de terminal workflow: je hebt volledige controle en inzicht in wat er gebeurt.

Stap 8: Code review

Vraag Claude om je code te reviewen:

claude "Review de volledige codebase en geef suggesties voor verbetering"

Output:

Let me review all files... Reading index.html, pages/about.html, pages/blog.html, styles/main.css, scripts/main.js... Code Review: Strengths: ✓ Clean HTML structure with semantic elements ✓ Consistent styling across pages ✓ Responsive design with media queries ✓ Dark mode implementation with CSS variables Suggestions for improvement: 1. Accessibility: - Add alt attributes to all images - Add aria-labels to navigation links - Ensure sufficient color contrast in dark mode 2. Performance: - Add loading="lazy" to images below the fold - Consider minifying CSS and JS for production 3. SEO: - Add meta description tags - Add Open Graph tags for social sharing Would you like me to implement any of these improvements?

Je kunt nu kiezen welke verbeteringen je wilt:

claude "Implementeer alle accessibility suggesties"

Stap 9: Final polish

Laatste verfijningen:

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

Claude past meerdere bestanden aan. Type y om alles toe te passen.

Stap 10: Final commit

Commit alle wijzigingen:

git add . git commit -m "Add JavaScript interactivity, dark mode, and polish"

Check je git log:

git log --oneline

Output:

a4f2c9b Add JavaScript interactivity, dark mode, and polish 7e3d1a2 Add homepage, about, and blog pages with styling 1c5b8f0 Initial project structure

Mooi overzicht van je progressie.

Het resultaat

Check wat je hebt gemaakt:

find . -type f -name "*.html" -o -name "*.css" -o -name "*.js"

Output:

./index.html ./pages/about.html ./pages/blog.html ./styles/main.css ./scripts/main.js

Check het aantal regels code:

wc -l index.html pages/*.html styles/*.css scripts/*.js

Output:

95 index.html 82 pages/about.html 120 pages/blog.html 156 styles/main.css 87 scripts/main.js 540 total

540 regels code, allemaal gegenereerd via terminal commando's. En je begrijpt elk stuk omdat je de diffs hebt gezien.

Wat je hebt geleerd

Terminal workflow:

  • Project setup met mkdir, cd, git init
  • Claude commando's in context van je directory
  • Diffs lezen en interpreteren
  • Accept/reject met y/n
  • Testen met open/start
  • Git integratie voor version control

Efficiënt werken:

  • Meerdere wijzigingen in één commando
  • Interactieve mode voor langere sessies
  • Debuggen door Claude problemen te laten vinden
  • Code review vragen aan Claude
  • Combinatie van Claude en native tools (ls, git, wc)

Best practices:

  • Regelmatige commits als checkpoints
  • Duidelijke commit messages
  • Project structuur vanaf het begin
  • Iteratief bouwen (klein → groot)
  • Testen na elke wijziging

Volgende stappen

Breid het project uit:

claude "Voeg een contact formulier toe met HTML5 validatie"
claude "Maak de blog posts dynamic met een JSON data file"
claude "Voeg een simpele search functie toe met JavaScript"

Of start een nieuw project:

mkdir ~/Projecten/todo-app cd ~/Projecten/todo-app git init claude "Maak een todo list app met localStorage persistentie"

Advanced terminal tips

Output naar file:

claude "Leg uit hoe de dark mode implementatie werkt" > docs/dark-mode-explained.md

Nu heb je documentatie voor later.

Pipe git diff naar Claude:

git diff | claude "Review deze uncommitted changes"

Instant code review voordat je commit.

Watch mode voor auto-refresh:

Installeer een live server:

npx live-server

Nu refresht je browser automatisch bij elke file wijziging die Claude maakt.

Alias voor snelheid:

Voeg toe aan ~/.bashrc of ~/.zshrc:

alias c="claude" alias gc="git add . && git commit" alias gp="git push"

Nu werk je supersnel:

c "Voeg een search bar toe" # type y gc -m "Add search functionality"

History doorzoeken:

history | grep claude

Zie alle Claude commando's die je eerder hebt gebruikt. Handig om je workflow te analyseren.

Script je workflow:

Maak een build.sh:

#!/bin/bash echo "Building blog..." claude "Minify CSS en JS voor productie" echo "Done!"

Run met:

bash build.sh

Terminal workflow mindset

De terminal is niet langzamer dan een GUI. Het is vaak sneller omdat:

  • Je handen blijven op het keyboard
  • Je kunt commando's herhalen met arrow up
  • Je kunt output opslaan, pipen, en automatiseren
  • Je hebt volledige controle over elke stap

Dus experimenteer met de workflow, bouw je eigen shortcuts, en creëer een systeem dat voor jou werkt. De terminal + Claude Code is een krachtige combinatie als je het beheerst.

En vergeet niet: elke professional developer werkt via de terminal. Dit is niet alleen een snellere manier om Claude Code te gebruiken, het is ook een waardevolle skill voor je algemene development workflow.