Ga naar hoofdinhoud

Labo 1 — Lokaal versiebeheer

In dit labo ga je zelfstandig werken met Git op je eigen computer. Je oefent de volledige lokale workflow: een repository aanmaken, bestanden bijhouden, de geschiedenis bekijken en werken met branches.

Leerstof

Raadpleeg deze secties als je iets wil nalezen:

Stap 0 — Git Quest​

Voordat je op je eigen computer aan de slag gaat, oefen je de basiscommando's via Git Quest — een gamified omgeving die je stap voor stap door de Git-commando's leidt. Je krijgt directe feedback op fouten en er is begeleiding doorheen het volledige process.

👉 Ga naar Git Quest

Doorloop alle levels en kom terug zodra je klaar bent.

Oefening 1 — Configuratie controleren​

Voordat je begint, verifieer je dat Git correct geconfigureerd is.

  1. Open een terminal (Git Bash op Windows, Terminal op macOS/Linux).
  2. Controleer welke versie van Git je hebt. Zie je een versienummer?
  3. Controleer of je naam en e-mailadres ingesteld zijn.
  4. Zijn ze niet correct? Stel ze dan nu in.
  5. Controleer dat je standaard branch main heet.

Oefening 2 — Je eerste repository​

  1. Maak een nieuwe map aan genaamd portfolio en navigeer ernaar.
  2. Initialiseer een Git-repository.
  3. Controleer de status — wat zie je?
  4. Maak een bestand index.html aan met deze inhoud: 
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Portfolio</title>
    </head>
    <body>
      <h1>Hi, I'm [jouw naam]</h1>
    </body>
    </html>
  5. Controleer de status opnieuw. Wat is er veranderd?
  6. Voeg het bestand toe aan de staging area.
  7. Controleer de status nogmaals. Wat zie je nu?
  8. Maak een eerste commit.
  9. Bekijk de commit-geschiedenis.

Oefening 3 — Staging area en diff​

Werk verder in de portfolio-map.

  1. Maak twee nieuwe bestanden aan: style.css en script.js.
  2. Voeg aan style.css de volgende inhoud toe: 
    body {
      font-family: sans-serif;
      background-color: #f0f0f0;
    }
  3. Voeg aan script.js de volgende inhoud toe: 
    console.log("Portfolio loaded");
  4. Voeg alleen style.css toe aan de staging area — nog niet script.js.
  5. Voer git diff en git diff --staged uit. Wat toont elk commando?
  6. Commit style.css met een duidelijk bericht in het Engels.
  7. Voeg nu ook script.js toe en commit het als aparte commit.
  8. Bekijk de commit-geschiedenis met de korte weergave. Zie je beide commits?

Oefening 4 — .gitignore​

Werk verder in de portfolio-map.

  1. Maak een bestand .env aan met de inhoud API_KEY=geheim123.
  2. Controleer de status — Git ziet het bestand als untracked.
  3. Maak nu een .gitignore aan en voeg .env toe zodat het genegeerd wordt.
  4. Controleer de status opnieuw — verschijnt .env nog?
  5. Voeg ook de volgende patronen toe aan .gitignore:
    • node_modules/
    • *.log
  6. Commit de .gitignore.
  7. Maak een bestand debug.log aan en controleer de status — wordt het genegeerd?
Nooit committen

Commit .env nooit! Als je het per ongeluk gestagd hebt, haal je het terug met git restore --staged .env.

Oefening 5 — Werken met branches​

Werk verder in de portfolio-map.

  1. Bekijk welke branches er bestaan.
  2. Maak een nieuwe branch feature/about aan en schakel er direct naartoe.
  3. Maak een bestand about.html aan met een korte beschrijving over jezelf.
  4. Commit dit bestand op de feature/about branch.
  5. Schakel terug naar main.
    • Is about.html zichtbaar in de map? Waarom (niet)?
  6. Merge de feature/about branch in main.
  7. Verwijder de branch na de merge.
  8. Bekijk de commit-geschiedenis — welke commits zie je?

Oefening 6 — Merge conflict oplossen​

Werk verder in de portfolio-map.

  1. Maak een nieuwe branch feature/tagline aan vanuit main en schakel ernaar.
  2. Verander in index.html de <h1> naar: 
    <h1>Hi, I'm [naam] — Frontend Developer</h1>
  3. Commit deze wijziging op feature/tagline.
  4. Schakel terug naar main en verander in index.html dezelfde <h1> naar: 
    <h1>Hi, I'm [naam] — Web Designer</h1>
  5. Commit deze wijziging op main.
  6. Probeer feature/tagline te mergen in main. Er ontstaat een conflict.
  7. Open het bestand in VS Code, bekijk de conflictmarkeringen en kies welke versie je behoudt (of combineer beide).
  8. Stage het opgeloste bestand en voltooi de merge.

Uitdaging — Volledig projectbeheer​

Je beheert een mini-website volledig met Git. Geen stap-voor-stap instructies — gebruik wat je geleerd hebt.

Doel: maak een repository webshop met de volgende vereisten:

  • Een .gitignore die node_modules/, .env en *.log negeert
  • Een index.html als basispagina — gecommit op main
  • Een branch feature/products met een products.html — gemerged in main
  • Een branch feature/cart die een conflict veroorzaakt met main op index.html — opgelost en gemerged

Beoordeel jezelf achteraf:

  • Zijn je commit-berichten in het Engels en beschrijvend?
  • Heb je branches na de merge verwijderd?
  • Is de .gitignore aanwezig en bevat hij alle vereiste patronen?
  • Toont git log --oneline een logische, leesbare geschiedenis?