Werken met de Terminal: Navigeren & Commando's (Mac & Windows)

Als grafisch vormgever of front-end ontwikkelaar ben je waarschijnlijk gewend om te werken met een grafische interface (GUI): je klikt op mappen met je muis, sleept bestanden naar de prullenbak en opent programma's via een icoontje.

Toch werkt een professionele ontwikkelaar voor veel taken via de Command Line Interface (CLI), beter bekend als de Terminal (op Mac) of PowerShell / Command Prompt (op Windows). Obscuur? Zeker niet! Tools zoals Git, npm, Sass-compilers en lokale ontwikkelservers werken sneller en efficiënter vanuit de terminal.

In deze les leer je de basiscommando's om razendsnel door je computer te navigeren, mappen aan te maken en bestanden te beheren zonder je muis aan te raken.

1. De Terminal Openen: Mac vs. Windows

Afhankelijk van het besturingssysteem op jouw computer open je de CLI op een andere manier.

Mac (macOS)

Op een Mac gebruikt de terminal standaard Zsh (of Bash op oudere versies).

Hoe te openen: Druk op Cmd + Spatiebalk, typ Terminal in en druk op Enter.

Windows

Op Windows zijn er twee bekende programma's: Command Prompt (CMD) en PowerShell.

Command Prompt (CMD): Het klassieke zwarte venster. Het is functioneel, maar verouderd.
PowerShell: Het moderne Windows-venster.

Tip voor Windows-gebruikers: Gebruik bij voorkeur PowerShell (of de Windows Terminal app). PowerShell ondersteunt namelijk heel wat moderne commando's én herkent veel bekende Mac/Linux-commando's als alias!

2. De Essentiële Basiscommando's

Wanneer je in de terminal werkt, bevind je je altijd op een specifieke locatie (map) op je computer. Hieronder bespreken we de belangrijkste acties.

A. Waar ben ik? (Print Working Directory)

Voordat je iets doet, wil je weten in welke map je momenteel staat.

Mac & Windows PowerShell:

pwd

Windows CMD:

cd

B. Inhoud van een map bekijken (List)

Wil je zien welke mappen en bestanden er in je huidige map staan?

Mac & Windows PowerShell:

ls

Windows CMD:

dir

Tip: Met ls -la (Mac/Linux) zie je ook verborgen bestanden (zoals .gitignore of .env) en gedetailleerde informatie over bestandsgrootte.

C. Navigeren door mappen (Change Directory)

Om naar een andere map te bewegen, gebruik je het commando cd gevolgd door de mapnaam.

Naar een map toe gaan:

  cd Documents

Een stap terug gaan (naar de bovenliggende map):

  cd ..

Direct naar je persoonlijke home-map gaan:

  cd ~

Belangrijk: Bevat de naam van een map een spatie? Zet de naam dan tussen dubbele quotes!

Voorbeeld: cd "Mijn Documenten"

D. Een nieuwe map aanmaken (Make Directory)

Een nieuwe map maken doe je op alle systemen met hetzelfde commando:

Mac, PowerShell & CMD:

  mkdir mijn-nieuw-project

E. Een nieuw bestand aanmaken

Het aanmaken van een leeg bestand (zoals index.html of style.css) verschilt per systeem.

Mac (Linux):

  touch index.html

Windows PowerShell:

  New-Item index.html

Windows CMD:

  type nul > index.html

F. Het scherm leegmaken (Clear)

Rraakt je scherm vol met tekst? Dan kun je het schoonvegen zonder je geschiedenis te wissen.

Mac & Windows PowerShell:

  clear

Windows CMD:

cls

3. Spiektabel voor Snelle Referentie

Hier zie je alle basiscommando's handig naast elkaar:

Actie	Mac (Zsh/Bash)	Windows PowerShell	Windows CMD
Locatie bekijken	`pwd`	`pwd` (of `Get-Location`)	`cd`
Mapinhoud tonen	`ls`	`ls` (of `dir`)	`dir`
Map openen	`cd [mapnaam]`	`cd [mapnaam]`	`cd [mapnaam]`
Map terug	`cd ..`	`cd ..`	`cd ..`
Map aanmaken	`mkdir [mapnaam]`	`mkdir [mapnaam]`	`mkdir [mapnaam]`
Bestand maken	`touch [naam]`	`New-Item [naam]`	`type nul > [naam]`
Scherm wissen	`clear`	`clear` (of `cls`)	`cls`

4. Superkrachten: 3 Pro-tips voor Efficiëntie

De Tab-toets (Automatisch Aanvullen): Typ de eerste letters van een map- of bestandsnaam en druk op Tab. De terminal vult de naam automatisch voor je aan!
Pijltje Omhoog / Omlaag: Druk op de pijl-omhoog op je toetsenbord om eerder getypte commando's direct te herhalen. Dit bespaart enorm veel typewerk.
Proces Stoppen (Ctrl + C): Loopt een programma vast of wil je een draaiende lokale server stoppen? Druk op Ctrl + C (ook op Mac!) om het proces te onderbreken.

5. Opdracht: Bouw een Projectstructuur via de Terminal

In deze opdracht ga je een volledige projectstructuur voor een website opzetten zonder één enkele keer je muis te gebruiken om mappen of bestanden aan te maken!

Stappenplan

Open je Terminal (Mac) of PowerShell (Windows).
Navigeer naar je Bureaublad (Desktop) via het cd commando.
Maak op je Bureaublad een nieuwe projectmap aan met de naam terminal-project.
Navigeer de map terminal-project in.
Maak binnen terminal-project twee nieuwe submappen aan:

css
images

6. Maak in de hoofdmap terminal-project een leeg bestand aan genaamd index.html.

Navigeer naar de map css en maak daarin een leeg bestand aan genaamd style.css.
Keer terug naar de map terminal-project (cd ..).
Toon de inhoud van je projectmap op het scherm via de terminal om te controleren of alle mappen en bestanden aanwezig zijn.

Verwachte Output

Een mappenstructuur op je Bureaublad met de volgende indeling:

terminal-project/
│
├── css/
│   └── style.css
├── images/
└── index.html

Wanneer je in de terminal ls (of dir) uitvoert vanuit de map terminal-project, zie je de mappen css en images en het bestand index.html netjes opgelijst.

Evaluatiecriteria

[ ] Je kunt aantonen hoe je via cd door mappen navigeert.
[ ] De map terminal-project is aangemaakt op het Bureaublad met behulp van mkdir.
[ ] De mappen css en images zijn op de juiste plek aangemaakt.
[ ] De bestanden index.html en css/style.css zijn aangemaakt via het juiste terminalcommando voor jouw besturingssysteem.
[ ] De volledige opdracht is uitgevoerd zonder gebruik te maken van de grafische bestandsbrowser (Finder / Verkenner).