Samenwerken met GitHub

Samenwerken met GitHub

In deze module leer je hoe je niet alleen je eigen code veilig bewaart, maar ook hoe je met een team aan hetzelfde project werkt zonder elkaars werk te overschrijven.

1. Je eerste online opslagplaats (Repository)

🎯 Leerdoelen

💡 Uitleg

Een Repository (of 'repo') is de online map waar je project woont. Zie het als een centrale kluis waar jij en je teamleden altijd bij kunnen.

🛠️ Opdracht – Maak de repo

Maak op GitHub.com een nieuwe Public Repository aan met de naam github-challenge. Voeg direct een README.md bestand toe.

📤 Inleveren

2. De kluis naar je eigen computer halen (Clone)

💡 Uitleg

Om te kunnen werken, moet je de online code naar je eigen laptop kopiëren. Dit noemen we Clonen. Je gebruikt hiervoor Git in VS Code.

🛠️ Opdracht – Clone de repo

Gebruik het commando git clone [URL] in de terminal van VS Code om je repo lokaal te zetten in je htdocs map.

📤 Inleveren

3. Je werk opslaan (Commit & Push)

💡 Uitleg

Een Commit is een momentopname (savepoint). Een Push stuurt deze savepoints naar de online kluis op GitHub.

🛠️ Opdracht – Voeg code toe

Maak een bestand index.html aan. Voer een commit uit met het bericht "Eerste pagina toegevoegd" en push de wijziging naar GitHub.

📤 Inleveren

4. Wijzigingen ophalen (Pull)

💡 Uitleg

Als een teamlid (of jijzelf op een andere pc) iets verandert, moet je de lokale versie bijwerken. Dit doe je met Pull.

🛠️ Opdracht – Test de pull

Pas op de website van GitHub direct je README.md aan. Gebruik daarna in VS Code git pull om je lokale computer weer 'up-to-date' te maken.

📤 Inleveren

5. Teamleden uitnodigen (Collaborators)

🛠️ Opdracht – Deel je kluis

Ga naar de instellingen van je repo op GitHub en nodig een klasgenoot uit als Collaborator. Je klasgenoot moet de uitnodiging via e-mail accepteren.

📤 Inleveren

6. Tegelijkertijd bouwen

💡 Uitleg

Het mooie van Git is dat teamleden aan verschillende bestanden kunnen werken zonder elkaar te storen.

🛠️ Opdracht – Ieder zijn eigen bestand

Jij maakt pagina1.html en je teamgenoot maakt pagina2.html. Commit en push beiden jullie werk en doe daarna allebei een pull.

📤 Inleveren

7. Help, een Merge Conflict! (Deel 1)

💡 Uitleg

Een Merge Conflict ontstaat als twee mensen dezelfde regel in hetzelfde bestand aanpassen. Git weet dan niet welke versie 'de juiste' is.

🛠️ Opdracht – Forceer een conflict

Pas beiden regel 1 van index.html aan met een andere tekst. Laat je teamgenoot eerst pushen. Probeer daarna zelf te pushen. Wat gebeurt er?

📤 Inleveren

8. De tijdmachine repareren (Deel 2)

💡 Uitleg

In VS Code zie je nu paarse en blauwe markeringen bij de code. Jij moet kiezen: houd je jouw code, die van je maatje, of beide?

🛠️ Opdracht – Los het op

Kies 'Accept Both Changes', sla het bestand op, doe een nieuwe commit en push de oplossing.

📤 Inleveren

9. Werken op een zijspoor (Branches)

💡 Uitleg

Met een Branch werk je aan een nieuwe feature zonder de 'hoofdcode' (main) kapot te maken. Pas als het af is, voeg je het samen (Merge).

🛠️ Opdracht – Maak een feature-branch

Maak een branch nieuwe-layout. Verander de achtergrondkleur van je site in CSS op deze branch en push de branch naar GitHub.

📤 Inleveren

10. Reflectie: De Teamplayer

🧠 Reflectie

Beantwoord de volgende vragen in een PDF:

📤 Inleveren