# Git 1 (Module nog in ontwikkeling)

<section id="bkmrk-git-%26-github-%E2%80%A2-les-1"><span class="badge">Git &amp; GitHub • Les 1</span>### Les 1 | Wat is Git?

##### 🎯 Leerdoelen

<div class="content-block">- Je kunt uitleggen wat Git is.
- Je kent het verschil tussen Git en GitHub.
- Je begrijpt de belangrijkste Git-begrippen.
- Je weet waarom we in deze module vooral met Source Control in VS Code werken.

</div>##### 📘 Uitleg

Stel: je werkt aan een website en maakt een fout. Je hebt overal overheen opgeslagen en kunt niet meer terug. Git lost dit op. Git is een **versiebeheersysteem**: elke keer dat je iets nieuws hebt gemaakt voor je applicatie of website, sla je dit in git op (commit). Je hebt nu een **backup** van je applicatie.

<div class="content-block"><div class="content-block"><div class="tip">**Let op:** Zie Git als een slimme versiegeschiedenis van je hele project. Je kunt dus terug naar eerdere werkende versies.</div></div></div>**Simpel gezegd:** Git is Ctrl+Z op steroïden, maar dan voor je hele project.

</section>Jouw project met alle opgeslagen versies sla je met git op, op je PC. Je kunt deze bestanden en versies ook in de cloud opslaan. Vaak doe je dit bij de online dienst GitHub. Dit is handig om backups van alle versies te bewaren, maar ook handig om met andere samen te werken aan één project.

<section id="bkmrk-%F0%9F%A7%AD-git-vs.-github-ove">##### 🧭 Git vs. GitHub

<div class="content-block"><figure class="figure">![les1-git-vs-github.png](https://www.roc.ovh/uploads/images/gallery/2026-04/les1-git-vs-github.png)</figure><figure class="figure">  
<figcaption>Overzicht van lokaal werken met Git en online samenwerken via GitHub  
  
</figcaption></figure><table><thead><tr><th>Vraag</th><th>Git</th><th>GitHub</th></tr></thead><tbody><tr><td>Wat is het?</td><td>Software op je laptop</td><td>Een website waar je repositories online opslaat</td></tr><tr><td>Waar gebruik je het?</td><td>Lokaal op je computer</td><td>Online in de cloud</td></tr><tr><td>Waarvoor?</td><td>Versiebeheer</td><td>Backup, samenwerken en code delen</td></tr></tbody></table>

</div>##### 🧠 Belangrijke begrippen

<div class="content-block"><table><thead><tr><th>Begrip</th><th>Betekenis</th></tr></thead><tbody><tr><td>Repository (repo)</td><td>Een projectmap die Git bijhoudt. Eigenlijk je hele project.</td></tr><tr><td>Commit</td><td>Het opslaan van een versie van je hele project.</td></tr><tr><td>Staging area</td><td>De wachtrij met bestanden die klaarstaan voor een commit.</td></tr><tr><td>Branch</td><td>Een aparte tak waarin je veilig kunt experimenteren.</td></tr><tr><td>Remote</td><td>De online versie van je repo, bijvoorbeeld op GitHub.</td></tr><tr><td>Push</td><td>Je lokale commits uploaden naar GitHub.</td></tr><tr><td>Pull</td><td>Wijzigingen ophalen vanaf GitHub.</td></tr><tr><td>Clone</td><td>Een bestaande online repo downloaden naar je laptop. -&gt; Je haalt dan in één keer een hele applicatie van GitHub naar jouw computer.</td></tr></tbody></table>

</div>##### 💻 Terminal vs. Source Control

Git kun je gebruiken via de terminal of via het **Source Control**-paneel in VS Code. In deze module gebruiken we vooral Source Control, omdat je daar visueel ziet welke bestanden nieuw, aangepast of verwijderd zijn.

```
git init                  # Nieuwe repo aanmaken
git add .                 # Bestanden klaarzetten
git commit -m "..."       # Snapshot opslaan
git push                  # Uploaden naar GitHub
git pull                  # Downloaden van GitHub
git clone <url>           # Repo kopiëren van GitHub
```

<div class="content-block"><div class="note">**Goed om te weten:** Je hoeft deze commando’s niet uit je hoofd te leren, maar het is wel handig als je ze herkent.</div></div>##### 🛠️ Opdracht – Begrippen begrijpen

Beantwoord de vragen in je eigen woorden. Gebruik volledige zinnen en geef bij minstens één begrip een praktisch voorbeeld uit een project dat je kent.

##### 📤 Inleveren

<div class="content-block">1. Een korte uitleg van wat Git is.
2. Een korte uitleg van het verschil tussen Git en GitHub.
3. Een lijst met minimaal 5 begrippen uit deze les met betekenis in je eigen woorden.
4. Een screenshot of notitie waarin je uitlegt waarom Source Control in VS Code handig is.

</div></section><section id="bkmrk-git-%26-github-%E2%80%A2-les-2"><span class="badge">Git &amp; GitHub • Les 2</span>### Les 2 | Git installeren &amp; instellen

##### 🎯 Leerdoelen

<div class="content-block">- Je kunt Git installeren op Windows.
- Je kunt controleren of Git goed is geïnstalleerd.
- Je kunt je naam en e-mailadres instellen in Git.
- Je kunt een GitHub-account gebruiken en Source Control in VS Code openen.

</div>##### 📘 Uitleg

Voordat je met versiebeheer kunt werken, moet Git op je computer staan. Daarna vertel je Git wie jij bent. Zo worden je commits gekoppeld aan jouw naam en e-mailadres.

##### 🧩 Stap 1 – Git installeren

<div class="content-block"><div class="content-block"><div class="content-block">1. Ga naar `https://git-scm.com/downloads/win`.
2. Download Git voor Windows.
3. Installeer met de standaardinstellingen.
4. Open de terminal in VS Code met `Ctrl + ``.
5. Controleer de installatie met:

</div></div></div>```
git --version
```

Je ziet dan iets als `git version 2.47.1.windows.1`. Dat betekent dat Git werkt.

Als je dit niet ziet, kan het zijn dat je je computer opnieuw moet opstarten! Doe dat en probeer het opnieuw.

##### 🧩 Stap 2 – Git configureren

Git moet weten wie jij bent. Voer in de terminal uit:

```
git config --global user.name "Jouw Naam"
git config --global user.email "jouw.email@voorbeeld.nl"
```

Controleer daarna of alles goed staat:

```
git config --global user.name
git config --global user.email
```

<div class="content-block"><div class="note">**Goed om te weten:** Dit hoef je meestal maar één keer te doen op je laptop.</div></div>##### 🧩 Stap 3 – GitHub-account

Maak een gratis account aan op `https://github.com/signup` als je die nog niet hebt.

<div class="content-block"><div class="tip">**Let op:** Kies een professionele gebruikersnaam. Dit is jouw developer-profiel en die laat je later ook aan stagebedrijven of werkgevers zien.</div></div>##### 🧩 Stap 4 – Source Control in VS Code

Open Source Control. Source Control (de plek in VS-Code waar je werkt met Git) open je door in je linker balk op onderstaande icoon te klikken. Of door SHIFT - CTRL - G

![lcVafbeelding.png](https://www.roc.ovh/uploads/images/gallery/2026-04/lcvafbeelding.png)

<div class="content-block"><figure class="figure">![les2-source-control.png](https://www.roc.ovh/uploads/images/gallery/2026-04/scaled-1680-/les2-source-control.png)  
<figcaption>Het Source Control-paneel in VS Code</figcaption></figure>- **Message**: hier typ je de beschrijving van je commit. (bijvoorbeeld: De achtergrond van de homepage is rood gemaakt.)
- **Commit**: hiermee sla je een snapshot op.
- **Staged Changes**: bestanden die klaarstaan voor commit.
- **Changes**: bestanden die gewijzigd zijn maar nog niet klaarstaan.
- **M, U, D**: modified, untracked en deleted.
- **+** en **−**: bestanden stagen of juist weer uit staging halen.

</div>##### 🛠️ Opdracht – Git klaarzetten

Voer alle stappen uit zodat Git en GitHub klaar zijn voor de volgende lessen.

##### 📤 Inleveren

<div class="content-block">1. Screenshot van `git --version` in de VS Code-terminal.
2. Screenshot van de resultaten van `git config --global user.name` en `git config --global user.email`.
3. Screenshot van je GitHub-profielpagina.
4. Screenshot van het Source Control-paneel in VS Code.

</div></section><section id="bkmrk-git-%26-github-%E2%80%A2-les-3"><span class="badge">Git &amp; GitHub • Les 3</span>### Les 3 | Je eerste repository

##### 🎯 Leerdoelen

<div class="content-block">- Je kunt een nieuwe repository aanmaken.
- Je kunt bestanden stagen en committen via Source Control.
- Je kunt gewijzigde bestanden bekijken in Diff View.
- Je kunt commit-geschiedenis terugvinden.

</div>##### 📘 Uitleg

In deze les maak je je eerste repository aan. Daarna doorloop je voor het eerst de standaard workflow van Git: **wijzigen → stagen → committen**.

##### 🧩 Stap 1 – Repository aanmaken

</section>Open VS-Code en open een nieuwe folder voor jouw project. Noem deze folder &lt;jouw-naam&gt;-git1.

Source Control (de plek in VS-Code waar je werkt met Git) open je door in je linker balk op onderstaande icoon te klikken. Of door SHIFT - CTRL - G

![lcVafbeelding.png](https://www.roc.ovh/uploads/images/gallery/2026-04/lcvafbeelding.png)

<section id="bkmrk-ga-daarna-naar-sourc">Ga daarna naar Source Control en klik op **Initialize Repository**. Git maakt nu een verborgen `.git`-map aan met alle versie-informatie van je project.

![afbeelding.png](https://www.roc.ovh/uploads/images/gallery/2026-04/afbeelding.png)

</section>Met de iconen in de linkerbalk wissel je tussen 'Explorer' met je bestanden en 'Source Control' voor Git.

<table border="0" id="bkmrk-explorer-voor-je-bes" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 8.82311%;"></col><col style="width: 91.2923%;"></col></colgroup><tbody><tr><td>![Dkbafbeelding.png](https://www.roc.ovh/uploads/images/gallery/2026-04/dkbafbeelding.png)  
</td><td class="align-left">Explorer voor je bestanden en mappen</td></tr><tr><td>![lcVafbeelding.png](https://www.roc.ovh/uploads/images/gallery/2026-04/lcvafbeelding.png)  
</td><td class="align-left">Source Control voor het werken met Git</td></tr></tbody></table>

<section id="bkmrk-%F0%9F%A7%A9-stap-2-%E2%80%93-eerste-co">##### 🧩 Stap 2 – Eerste commit maken

Maak een bestand `readme.txt` met een klein stukje tekst. Na opslaan zie je het bestand bij **Changes** met de letter **U** van untracked.

<div class="content-block"><figure class="figure">![les3-commit-steps.png](https://www.roc.ovh/uploads/images/gallery/2026-04/les3-commit-steps.png)<figcaption>De drie stappen van een commit in VS Code</figcaption></figure>1. **Stage:** klik op het **+**-icoon naast het bestand.
2. **Message:** typ bovenaan bijvoorbeeld `Eerste commit`.
3. **Commit:** klik op **Commit** of druk op `Ctrl + Enter`.

<div class="tip">**Let op:** Een goede commit message beschrijft wat je hebt gedaan, bijvoorbeeld *Login pagina toegevoegd* en niet *update*.</div></div>##### 🧩 Stap 3 – Workflow begrijpen

<div class="content-block"><div class="content-block"><figure class="figure">![les3-workflow.png](https://www.roc.ovh/uploads/images/gallery/2026-04/les3-workflow.png)<figcaption>Van Working Directory naar Staging Area en daarna naar de commit</figcaption></figure></div></div>Je werkt eerst in je projectmap. Daarna kies je welke wijzigingen mee moeten in de commit. Pas als je commit, maakt Git een nieuwe snapshot.

##### 🧩 Stap 4 – Diff View gebruiken

<div class="content-block"><div class="content-block"><figure class="figure">![les3-diff-view.png](https://www.roc.ovh/uploads/images/gallery/2026-04/les3-diff-view.png)<figcaption>Diff View laat precies zien wat is toegevoegd en verwijderd</figcaption></figure></div></div>Wijzig een bestand en klik daarna in Source Control op dat bestand. Links zie je de oude versie, rechts de nieuwe. Rode regels zijn verwijderd, groene regels zijn toegevoegd.

##### 🧩 Stap 5 – Geschiedenis bekijken

<div class="content-block"><div class="content-block"><figure class="figure">![les3-history.png](https://www.roc.ovh/uploads/images/gallery/2026-04/les3-history.png)<figcaption>Commit-geschiedenis in VS Code of via Git Graph</figcaption></figure></div></div>Gebruik de **Timeline** in de Explorer of installeer de extensie **Git Graph** voor een visueel overzicht van je commits.

##### 🛠️ Opdracht – Eerste repo oefenen

Doorloop de volledige workflow en maak minimaal twee commits.

##### 📤 Inleveren

<div class="content-block"><div class="content-block">1. Start een nieuw project in VS-Code door een map aan te maken met de naam `<jouw-naam>-git-oefening`en deze te selecteren (open folder).
2. Maak hier een repo van via **Initialize Repository**.
3. Maak drie bestanden: `index.html`, `style.css` en `script.js` met minimaal één regel code per bestand.
4. Stage alles en commit met de beschrijving `Eerste bestanden`.
5. Wijzig `index.html` door de basis HTML code toe te voegen en wijzig sylte.css, zodat de achtergrond rood wordt. Bekijk de Diff View en maak een tweede commit.
6. Screenshot van het Source Control-paneel met je gestagede bestanden of commit-overzicht.
7. Screenshot van de commit-geschiedenis met minimaal twee commits.

</div></div></section><section id="bkmrk-git-%26-github-%E2%80%A2-les-5"><span class="badge">Git &amp; GitHub • Les 5</span>### Les 4 | Remote: pushen naar GitHub

##### 🎯 Leerdoelen

<div class="content-block">- Je kunt een lokale repository publiceren naar GitHub.
- Je begrijpt wat *push*, *pull* en *sync* betekenen.
- Je kunt een bestaande repository clonen.

</div>##### 📘 Uitleg

Tot nu toe staat je code alleen op je eigen computer. In deze les koppel je je project aan GitHub, zodat je online backup hebt en makkelijk kunt samenwerken.

##### 🧩 GitHub koppelen aan VS Code

<div class="content-block"><div class="content-block">1. Open je project in VS Code.
2. Ga naar Source Control.
3. Klik op **Publish Branch**.
4. Kies **Publish to GitHub Public Repository**.
5. Log in met je GitHub-account als VS Code daarom vraagt.

<figure class="figure">![les5-publish-sync.png](https://www.roc.ovh/uploads/images/gallery/2026-04/les5-publish-sync.png)<figcaption>Publish Branch en Sync Changes in VS Code</figcaption></figure></div></div>VS Code maakt daarna automatisch een repository op GitHub en pusht je code online.

##### 🧩 Sync Changes begrijpen

Na de eerste publicatie verandert de knop meestal in **Sync Changes**. Die knop doet twee dingen:

<div class="content-block">- **Push (↑)**: lokale commits uploaden naar GitHub.
- **Pull (↓)**: wijzigingen ophalen vanaf GitHub.

<div class="note">**Dagelijkse workflow:** maak een commit en klik daarna op **Sync Changes**.</div></div>##### 🧩 Klonen van een repo

Je kunt ook een bestaand project downloaden.

<div class="content-block"><div class="content-block">1. Open VS Code zonder project.
2. Klik op **Clone Repository**.
3. Plak de GitHub-URL en kies een map op je laptop.

</div></div>Via de terminal kan dat ook:

```
git clone https://github.com/NAAM/REPO.git
```

##### 🛠️ Opdracht – Online zetten

Publiceer je oefenproject naar GitHub en controleer of je wijziging online zichtbaar wordt.

##### 📤 Inleveren

<div class="content-block">1. Publiceer je project via **Publish Branch**.
2. Screenshot van je repository op GitHub met je bestanden.
3. Maak lokaal een wijziging, commit die en klik op **Sync Changes**.
4. Screenshot van GitHub waarop de nieuwe wijziging zichtbaar is.

</div></section><section id="bkmrk-git-%26-github-%E2%80%A2-les-6"><span class="badge">Git &amp; GitHub • Les 6</span>### Les 5 | Branches

##### 🎯 Leerdoelen

<div class="content-block">- Je begrijpt wat een branch is.
- Je kunt een nieuwe branch maken in VS Code.
- Je kunt wisselen tussen branches.
- Je kunt een branch mergen met `main`.

</div>##### 📘 Uitleg

Een branch is een aparte tak van je project. Daarmee kun je veilig experimenteren zonder de hoofdversie te beschadigen. Pas als je tevreden bent, voeg je de branch weer samen met `main`.

<div class="content-block"><figure class="figure">![les6-branches.png](https://www.roc.ovh/uploads/images/gallery/2026-04/les6-branches.png)<figcaption>Branches maken experimenteren mogelijk zonder risico voor de hoofdbranch</figcaption></figure></div>##### 🧩 Nieuwe branch maken

<div class="content-block"><figure class="figure">![les6-branch-menu.png](https://www.roc.ovh/uploads/images/gallery/2026-04/les6-branch-menu.png)<figcaption>Het branch-menu linksonder in VS Code</figcaption></figure>1. Klik linksonder in VS Code op de huidige branchnaam, bijvoorbeeld `main`.
2. Kies **Create new branch...**.
3. Geef de branch een logische naam, bijvoorbeeld `feature-about`.
4. VS Code schakelt daarna automatisch over naar die branch.

</div>##### 🧩 Wisselen en mergen

<div class="content-block">1. Klik opnieuw op de branchnaam om te wisselen tussen branches.
2. Ga terug naar `main` als je klaar bent met je feature.
3. Open de Command Palette met `Ctrl + Shift + P`.
4. Kies **Git: Merge Branch**.
5. Selecteer de branch die je wilt samenvoegen.
6. Klik daarna op **Sync Changes** om de merge naar GitHub te sturen.

<div class="tip">**Let op:** Gebruik branches zodra je aan een nieuwe feature begint. Zo blijft `main` stabiel.</div></div>##### 🧭 Overzicht: Git in VS Code (+ herhaling)

<div class="content-block"><table><thead><tr><th>Actie</th><th>Hoe in VS Code?</th></tr></thead><tbody><tr><td>Repo aanmaken</td><td>Source Control → Initialize Repository</td></tr><tr><td>Bestanden stagen</td><td>Klik op **+** naast een bestand of bij **Changes**</td></tr><tr><td>Committen</td><td>Typ een message en klik op **Commit**</td></tr><tr><td>Pushen / pullen</td><td>Klik op **Sync Changes**</td></tr><tr><td>Publiceren naar GitHub</td><td>Klik op **Publish Branch**</td></tr><tr><td>Branch aanmaken</td><td>Klik op de branchnaam linksonder → **Create new branch**</td></tr><tr><td>Branch wisselen</td><td>Klik op de branchnaam linksonder → kies een branch</td></tr><tr><td>Branch mergen</td><td>`Ctrl + Shift + P` → **Git: Merge Branch**</td></tr><tr><td>Diff bekijken</td><td>Klik op een gewijzigd bestand in Source Control</td></tr><tr><td>Geschiedenis bekijken</td><td>Timeline of Git Graph</td></tr></tbody></table>

</div>##### 🛠️ Opdracht – Werken met branches

Maak een feature op een aparte branch en voeg die daarna samen met `main`.

##### 📤 Inleveren

<div class="content-block">1. Maak de branch `feature-about`.
2. Maak op die branch een bestand `about.html` en commit via Source Control.
3. Wissel terug naar `main` en merge de branch via **Git: Merge Branch**.
4. Klik op **Sync Changes**.
5. Screenshot van de branchnaam linksonder op `main` na de merge.
6. Screenshot van de commit-geschiedenis waarin de merge zichtbaar is.

</div></section>