Git & GitHub - Cours pour Débutants

📚 Introduction : Qu'est-ce que Git et GitHub ?

🤔

Pourquoi Git existe-t-il ?

Imaginez que vous travaillez sur un projet de développement web. Vous modifiez votre code, mais soudain, tout se casse ! Vous aimeriez revenir en arrière, mais vous avez écrasé votre ancien code. C'est là que Git intervient !

💡 En termes simples :

Git est comme une machine à remonter le temps pour votre code. Il garde une trace de toutes les modifications que vous faites, vous permettant de revenir en arrière si nécessaire.

Qu'est-ce que Git exactement ?

📦 Système de Contrôle de Version

Git enregistre l'historique complet de vos fichiers et permet de naviguer dans le temps.

👥 Collaboration

Plusieurs développeurs peuvent travailler sur le même projet sans se marcher sur les pieds.

🔒 Sauvegarde Sécurisée

Votre code est protégé et vous ne perdrez jamais votre travail important.

🌿 Branches

Créez des versions parallèles de votre projet pour tester de nouvelles fonctionnalités.

Et GitHub alors ?

GitHub est une plateforme en ligne qui héberge vos projets Git. C'est comme un réseau social pour développeurs ! Vous pouvez :

Stocker votre code en ligne de manière sécurisée
Collaborer avec d'autres développeurs du monde entier
Partager vos projets avec la communauté
Contribuer à des projets open source
Créer un portfolio professionnel

Git vs GitHub : Quelle différence ?

Git 🔀	GitHub 🐙
Logiciel installé sur votre ordinateur	Site web hébergé en ligne
Fonctionne en local (hors ligne)	Nécessite une connexion internet
Gère l'historique de votre code	Stocke et partage vos projets Git
Gratuit et open source	Gratuit pour les dépôts publics

⚠️ À retenir :

Git est l'outil, GitHub est le service. Vous pouvez utiliser Git sans GitHub, mais GitHub utilise Git !

Pourquoi apprendre Git et GitHub ?

C'est indispensable dans le monde professionnel - Toutes les entreprises tech utilisent Git
Travail en équipe facilité - Collaborez efficacement avec d'autres développeurs
Sécurité du code - Ne perdez plus jamais votre travail
Portfolio professionnel - GitHub est votre CV en ligne
Open Source - Contribuez à des projets mondiaux
Gestion de versions - Testez sans crainte, vous pouvez toujours revenir en arrière

🧠 Les Concepts Fondamentaux

🎯

Le Repository (Dépôt)

Un repository (ou "repo") est comme un dossier de projet qui contient tous vos fichiers ET l'historique complet de toutes les modifications.

Il existe deux types de repositories :

Local : Sur votre ordinateur
Remote : Sur un serveur (GitHub, GitLab, etc.)

Les Trois États de Git

Dans Git, vos fichiers peuvent être dans trois états différents. Comprendre cela est CRUCIAL !

1. Working Directory
📝 Zone de travail

→

2. Staging Area
📦 Zone de préparation

→

3. Repository
💾 Historique Git

📝 Working Directory

C'est là où vous travaillez !

Vos fichiers sont ici, vous les modifiez normalement. Git observe les changements mais ne les enregistre pas encore.

📦 Staging Area (Index)

La zone de préparation

Vous sélectionnez les modifications que vous voulez enregistrer. C'est comme préparer un colis avant de l'envoyer.

💾 Repository

L'historique permanent

Vos modifications sont définitivement enregistrées dans l'historique Git. Elles ne seront jamais perdues !

Le Commit : La Photo Instantanée

Un commit est comme une photo instantanée de votre projet à un moment précis.

Chaque commit a un identifiant unique (hash)
Il contient un message décrivant les changements
Il garde la trace de qui a fait quoi et quand
Vous pouvez revenir à n'importe quel commit

Les Branches : Travailler en Parallèle

🌿

Une branche est une version parallèle de votre projet. Imaginez que vous écrivez un livre :

main (ou master) : Votre version officielle et stable du livre
feature/nouveau-chapitre : Une branche où vous écrivez un nouveau chapitre
fix/correction-typo : Une branche pour corriger des fautes

Une fois satisfait de vos modifications sur une branche, vous pouvez la fusionner (merge) avec la branche principale.

Vocabulaire Essentiel

Terme	Définition Simple
Clone	Copier un repository distant sur votre ordinateur
Pull	Récupérer les dernières modifications depuis le serveur
Push	Envoyer vos commits locaux vers le serveur
Fork	Créer votre propre copie d'un projet GitHub
Merge	Fusionner deux branches ensemble
Conflict	Quand Git ne sait pas quelle version choisir
Remote	Un repository hébergé sur un serveur

🎓 Conseil pédagogique :

Ne vous inquiétez pas si tous ces concepts semblent flous maintenant. Ils deviendront clairs avec la pratique ! Nous allons les voir un par un dans les exercices.

⚙️ Installation et Configuration

Installer Git sur votre ordinateur

🪟 Windows

Téléchargez Git depuis git-scm.com
Lancez l'installateur
Gardez les options par défaut
Cliquez sur "Next" jusqu'à la fin

🍎 Mac

Git est souvent déjà installé !

Sinon, installez-le via Homebrew :

brew install git

🐧 Linux

Via le gestionnaire de paquets :

sudo apt install git

Debian/Ubuntu

Vérifier l'installation

Ouvrez un terminal (Git Bash sur Windows) et tapez :

git --version

Vous devriez voir quelque chose comme : git version 2.43.0

Configuration Initiale (IMPORTANT !)

Avant de commencer, vous DEVEZ configurer votre identité. Git a besoin de savoir qui vous êtes pour les commits.

git config --global user.name "Votre Nom"

git config --global user.email "votre.email@example.com"

💡 Astuce : Utilisez la même adresse email que celle de votre compte GitHub !

Vérifier votre configuration

git config --list

Configurer l'éditeur par défaut (Optionnel)

Par défaut, Git utilise Vim. Si vous préférez un autre éditeur :

git config --global core.editor "code --wait"

Ceci utilise Visual Studio Code. Adaptez selon votre éditeur préféré.

Créer un compte GitHub

Rendez-vous sur github.com
Cliquez sur "Sign up"
Choisissez un nom d'utilisateur professionnel (c'est votre portfolio !)
Utilisez la même adresse email que dans votre configuration Git
Créez un mot de passe sécurisé
Vérifiez votre email

✅ Félicitations !

Vous êtes maintenant prêt à utiliser Git et GitHub ! Passons aux commandes essentielles.

💻 Les Commandes Git Essentielles

Voici les commandes que vous utiliserez 90% du temps. Nous allons les voir une par une avec des exemples concrets.

Créer un nouveau projet Git

mkdir mon-projet

cd mon-projet

git init

Explication :

mkdir crée un dossier
cd entre dans le dossier
git init initialise un repository Git (crée un dossier caché .git)

Voir l'état de votre projet

git status

C'est LA commande que vous utiliserez le plus ! Elle montre :

Les fichiers modifiés
Les fichiers en staging
Les fichiers non suivis
La branche actuelle

Ajouter des fichiers au staging

git add index.html

git add style.css script.js

git add .

Explication :

Première ligne : ajoute un fichier spécifique
Deuxième ligne : ajoute plusieurs fichiers
Troisième ligne : ajoute TOUS les fichiers modifiés (⚠️ à utiliser avec précaution)

Créer un commit

git commit -m "Ajout de la page d'accueil"

📝 Messages de commit :

Vos messages doivent être clairs et descriptifs !

✅ Bons exemples :

"Ajout du formulaire de contact"
"Correction du bug d'affichage du menu"
"Mise à jour des dépendances"

❌ Mauvais exemples :

"Update" (trop vague)
"Fix" (fix quoi ?)
"Test" (pas professionnel)

Voir l'historique des commits

git log

git log --oneline

git log --graph --oneline --all

Explication :

git log : historique complet
--oneline : version condensée (plus lisible)
--graph : affiche les branches visuellement

Travailler avec les branches

git branch

git branch feature/nouvelle-page

git checkout feature/nouvelle-page

git checkout -b fix/correction-menu

Explication :

git branch : liste les branches
git branch nom : crée une nouvelle branche
git checkout nom : change de branche
git checkout -b nom : crée ET change de branche (plus rapide !)

💡 Convention de nommage :

feature/ pour les nouvelles fonctionnalités
fix/ pour les corrections de bugs
hotfix/ pour les corrections urgentes

Fusionner des branches

git checkout main

git merge feature/nouvelle-page

Important : Vous devez être sur la branche de destination avant de fusionner !

Supprimer une branche

git branch -d feature/nouvelle-page

Annuler des modifications

git restore index.html

git restore --staged index.html

git reset HEAD~1

Explication :

Première ligne : annule les modifications d'un fichier (non stagé)
Deuxième ligne : retire un fichier du staging
Troisième ligne : annule le dernier commit (⚠️ à utiliser avec précaution)

Tableau récapitulatif des commandes

Commande	Action	Fréquence
`git status`	Vérifier l'état du projet	🔥🔥🔥🔥🔥
`git add .`	Ajouter tous les fichiers au staging	🔥🔥🔥🔥🔥
`git commit -m ""`	Créer un commit	🔥🔥🔥🔥🔥
`git push`	Envoyer vers GitHub	🔥🔥🔥🔥
`git pull`	Récupérer depuis GitHub	🔥🔥🔥🔥
`git log`	Voir l'historique	🔥🔥🔥
`git branch`	Gérer les branches	🔥🔥🔥
`git checkout`	Changer de branche	🔥🔥🔥

🐙 Travailler avec GitHub

☁️

Créer un repository sur GitHub

Connectez-vous à GitHub
Cliquez sur le bouton "+" en haut à droite
Sélectionnez "New repository"
Donnez un nom à votre projet (exemple : mon-site-web)
Ajoutez une description (optionnel mais recommandé)
Choisissez Public ou Private
Cochez "Add a README file" (recommandé)
Cliquez sur "Create repository"

Lier votre projet local à GitHub

Une fois votre repository créé sur GitHub, liez-le à votre projet local :

git remote add origin https://github.com/votre-username/mon-site-web.git

git branch -M main

git push -u origin main

Explication :

remote add origin : lie votre dossier local à GitHub
branch -M main : renomme la branche en "main"
push -u origin main : envoie vos commits sur GitHub

Cloner un projet existant

Pour télécharger un projet depuis GitHub :

git clone https://github.com/username/nom-du-projet.git

cd nom-du-projet

Le workflow quotidien avec GitHub

1. Modifier le code
📝

→

2. git add .
📦

→

3. git commit -m ""
💾

→

4. git push
☁️

Récupérer les modifications des autres

git pull

Cette commande récupère les derniers changements depuis GitHub et les fusionne avec votre code local.

⚠️ Bonne pratique :

Faites toujours un git pull AVANT de commencer à travailler, surtout en équipe !

Le fichier README.md

Le README est la carte de visite de votre projet. Il doit contenir :

📌 Le titre et la description du projet
🎯 Les objectifs du projet
⚙️ Les technologies utilisées
🚀 Comment installer et lancer le projet
📸 Des captures d'écran (si applicable)
👤 Votre nom et contact

Le fichier .gitignore

Ce fichier indique à Git quels fichiers NE PAS suivre. Exemples :

# Ne pas suivre le dossier node_modules

node_modules/

# Ne pas suivre les fichiers de configuration

.env

# Ne pas suivre les fichiers système

.DS_Store

Gérer les conflits

Un conflit arrive quand deux personnes modifient la même ligne de code. Git ne sait pas quelle version garder.

🔥 En cas de conflit :

Ne paniquez pas ! C'est normal
Git marque les conflits dans les fichiers avec <<<<<<< et >>>>>>>
Ouvrez les fichiers en conflit
Choisissez quelle version garder (ou combinez les deux)
Supprimez les marqueurs de conflit
Faites un git add puis git commit

Les Pull Requests (PR)

Une Pull Request est une demande pour fusionner votre branche dans une autre branche. C'est le cœur du travail collaboratif sur GitHub !

Comment créer une PR :

Créez une branche pour votre fonctionnalité
Faites vos modifications et commits
Poussez votre branche sur GitHub
Sur GitHub, cliquez sur "Compare & pull request"
Ajoutez un titre et une description
Cliquez sur "Create pull request"

Commandes GitHub essentielles

Commande	Description
`git clone [url]`	Cloner un repository
`git push`	Envoyer vos commits vers GitHub
`git pull`	Récupérer les modifications depuis GitHub
`git remote -v`	Voir les repositories distants liés
`git fetch`	Télécharger sans fusionner

🔄 Workflows Git en Pratique

Workflow Simple (Débutant)

Pour débuter, utilisez ce workflow simple et efficace :

🌅 En début de journée :

git pull

Récupérez les dernières modifications

💻 Pendant le travail :

git status

git add .

git commit -m "Description claire"

Faites des commits régulièrement (toutes les 30 min - 1h)

🌙 En fin de journée :

git push

Envoyez votre travail sur GitHub

Workflow avec Branches (Intermédiaire)

Quand vous êtes plus à l'aise, utilisez les branches :

Étape 1 : Créez une branche pour chaque nouvelle fonctionnalité

git checkout -b feature/nouveau-menu

Étape 2 : Travaillez sur votre branche

git add .

git commit -m "Ajout du menu responsive"

Étape 3 : Poussez votre branche sur GitHub

git push -u origin feature/nouveau-menu

Étape 4 : Créez une Pull Request sur GitHub

Étape 5 : Une fois approuvée, fusionnez dans main

git checkout main

git merge feature/nouveau-menu

git push

Étape 6 : Supprimez la branche fusionnée

git branch -d feature/nouveau-menu

Workflow en Équipe

👥 Règles d'or du travail en équipe :

Communiquez : Prévenez votre équipe avant de modifier du code important
Pull régulièrement : Toujours faire un git pull avant de commencer
Commits atomiques : Un commit = une fonctionnalité/correction
Messages clairs : Vos collègues doivent comprendre vos commits
Branches pour tout : Ne travaillez JAMAIS directement sur main
Pull Requests : Faites-vous relire avant de fusionner
Résolution de conflits : Communiquez avec celui qui a modifié le même code

Les bonnes pratiques

✅ Commits fréquents

Faites des petits commits réguliers plutôt qu'un gros commit à la fin de la journée.

📝 Messages descriptifs

Utilisez des verbes d'action : "Ajoute", "Corrige", "Supprime", "Modifie"

🌿 Une branche = Une tâche

Créez une nouvelle branche pour chaque fonctionnalité ou correction.

🔍 Relisez avant de push

Vérifiez vos modifications avec git diff avant de commit.

Commandes avancées utiles

Commande	Utilité
`git diff`	Voir les modifications non stagées
`git diff --staged`	Voir les modifications stagées
`git stash`	Mettre de côté des modifications temporairement
`git stash pop`	Récupérer les modifications mises de côté
`git log --graph --oneline`	Visualiser l'historique avec les branches
`git blame fichier.js`	Voir qui a modifié chaque ligne

💪 Exercices Pratiques

Ces exercices sont progressifs. Faites-les dans l'ordre pour bien assimiler les concepts !

Niveau 1 Exercice 1 : Votre Premier Repository

Objectif : Créer votre premier projet Git et faire vos premiers commits.

📋 Instructions :

Créez un dossier nommé mon-premier-projet
Initialisez un repository Git dans ce dossier
Créez un fichier index.html avec une structure HTML basique
Ajoutez ce fichier au staging
Créez votre premier commit avec le message "Ajout de la page d'accueil"
Créez un fichier style.css avec quelques règles CSS
Faites un nouveau commit
Vérifiez votre historique avec git log

💡 Voir la solution

mkdir mon-premier-projet

cd mon-premier-projet

git init

# Créez index.html avec votre éditeur

git add index.html

git commit -m "Ajout de la page d'accueil"

# Créez style.css avec votre éditeur

git add style.css

git commit -m "Ajout des styles CSS"

git log --oneline

Niveau 1 Exercice 2 : Connexion avec GitHub

Objectif : Mettre votre projet sur GitHub.

📋 Instructions :

Créez un nouveau repository sur GitHub nommé mon-premier-projet
Ne cochez PAS "Initialize with README" (on a déjà des fichiers localement)
Liez votre projet local à ce repository GitHub
Poussez vos commits sur GitHub
Vérifiez sur GitHub que vos fichiers sont bien présents
Ajoutez un fichier README.md directement sur GitHub
Récupérez ce README sur votre ordinateur avec git pull

💡 Voir la solution

# Après avoir créé le repo sur GitHub

git remote add origin https://github.com/votre-username/mon-premier-projet.git

git branch -M main

git push -u origin main

# Après avoir ajouté README sur GitHub

git pull

Niveau 2 Exercice 3 : Travailler avec les Branches

Objectif : Maîtriser la création et la fusion de branches.

📋 Instructions :

Créez une branche feature/contact
Sur cette branche, créez un fichier contact.html
Faites un commit
Revenez sur la branche main
Créez une autre branche feature/about
Créez un fichier about.html
Faites un commit
Fusionnez feature/contact dans main
Fusionnez feature/about dans main
Vérifiez avec git log --graph --oneline
Poussez tout sur GitHub

💡 Voir la solution

git checkout -b feature/contact

# Créez contact.html

git add contact.html

git commit -m "Ajout page de contact"

git checkout main

git checkout -b feature/about

# Créez about.html

git add about.html

git commit -m "Ajout page à propos"

git checkout main

git merge feature/contact

git merge feature/about

git log --graph --oneline

git push

Niveau 2 Exercice 4 : Simuler un Travail en Équipe

Objectif : Comprendre le workflow collaboratif.

📋 Instructions :

Cet exercice simule deux développeurs travaillant sur le même projet. Vous allez jouer les deux rôles !

Créez un nouveau dossier projet-equipe
Clonez votre repository mon-premier-projet dans ce dossier (c'est le "Développeur 1")
Dans un autre dossier, clonez à nouveau le même repository (c'est le "Développeur 2")
Développeur 1 : Modifiez index.html, commitez et poussez
Développeur 2 : Faites un git pull pour récupérer les modifications
Développeur 2 : Modifiez style.css, commitez et poussez
Développeur 1 : Faites un git pull
Vérifiez que les deux "développeurs" ont le même code

💡 Point pédagogique : Cet exercice vous montre l'importance du git pull régulier et comment Git synchronise le travail d'équipe.

Niveau 3 Exercice 5 : Projet Portfolio Complet

Objectif : Créer un vrai portfolio avec toutes les bonnes pratiques Git.

📋 Instructions :

Créez un nouveau projet mon-portfolio
Initialisez Git
Créez un fichier .gitignore approprié
Créez la structure de base : index.html, style.css, script.js
Créez un README.md complet avec :
- Titre et description
- Technologies utilisées
- Instructions d'installation
- Captures d'écran (utilisez des placeholders)
- Votre contact
Faites un commit initial
Créez un repository GitHub
Liez et poussez votre projet
Créez une branche feature/responsive
Ajoutez des media queries dans le CSS
Créez une Pull Request sur GitHub
Fusionnez la PR
Ajoutez au moins 3 sections à votre portfolio (À propos, Projets, Contact)
Utilisez des branches pour chaque section
Faites des commits réguliers et bien nommés

🎉 Bravo ! Si vous avez terminé cet exercice, vous maîtrisez les bases de Git et GitHub ! Ce portfolio sera un excellent projet à montrer lors de vos entretiens d'embauche.

🌟 BONUS Exercice 6 : Contribuer à un Projet Open Source

Objectif : Découvrir le monde de l'open source !

📋 Instructions :

Recherchez un projet débutant sur GitHub (cherchez "good first issue")
Forkez le projet (créez votre propre copie)
Clonez VOTRE fork
Créez une branche pour votre contribution
Faites une petite amélioration (correction typo, amélioration README, etc.)
Commitez et poussez sur VOTRE fork
Créez une Pull Request vers le projet original
Attendez les retours et ajustez si nécessaire

💎 Conseil : Même si votre PR n'est pas acceptée, vous aurez appris énormément ! L'open source est le meilleur moyen de progresser.

🎓 Récapitulatif de votre Parcours

Si vous avez terminé tous ces exercices, vous savez maintenant :

✅ Initialiser un projet Git
✅ Faire des commits propres et réguliers
✅ Travailler avec des branches
✅ Utiliser GitHub pour héberger vos projets
✅ Collaborer avec d'autres développeurs
✅ Créer des Pull Requests
✅ Gérer les conflits
✅ Contribuer à l'open source

Vous êtes maintenant prêt à travailler en équipe et à construire votre portfolio professionnel ! 🚀