← Retour au programme
Module 03

Git et GitHub : versionner son code

Apprenez à suivre l’évolution de votre code et à collaborer efficacement avec d’autres développeurs.

Ce troisième module vous initie au contrôle de version avec Git et à la collaboration via GitHub. Vous apprendrez à sauvegarder l’historique de votre code, travailler avec des branches, et publier vos projets en ligne. Ces compétences sont indispensables dans le monde professionnel du développement.

Module suivant →

Philosophie

Git est comme un filet de sécurité pour votre code : il vous permet d’expérimenter sans crainte car vous pouvez toujours revenir en arrière. Apprenez à l’utiliser tôt et il vous accompagnera toute votre carrière.

Prérequis & Outils

  • Avoir terminé les Modules 1 et 2 (ou avoir un projet à versionner).
  • Savoir utiliser le terminal de base (naviguer dans les dossiers).
  • Avoir un compte GitHub gratuit.
GitGitHubTerminal

Objectifs du module

  • Comprendre l’intérêt du contrôle de version pour tout projet
  • Maîtriser le cycle git add / git commit pour sauvegarder l’historique
  • Créer et fusionner des branches pour travailler sur des fonctionnalités
  • Publier un projet sur GitHub et collaborer via les pull requests

Ressource complémentaire

Git et GitHub pour les débutants — Cours complet

Ressource complémentaire pour découvrir Git et GitHub à votre rythme.

Contenu du module

Progression pas à pas.

Chaque leçon s'appuie sur la précédente avec un rythme pensé pour laisser de l'espace à la compréhension, à la pratique et à la révision.

Leçon 1

Les fondamentaux de Git

Comprendre pourquoi le contrôle de version est indispensable et maîtriser les commandes de base de Git : init, add, commit.

Imaginez que vous écrivez un roman et que vous supprimez un chapitre entier, puis réalisez deux semaines plus tard que c’était une erreur. Sans sauvegarde, c’est perdu. Le contrôle de version résout exactement ce problème pour le code. Git, créé par Linus Torvalds (le créateur de Linux), est le système de contrôle de version le plus utilisé au monde. Il enregistre chaque modification de votre code dans un historique complet, vous permettant de revenir à n’importe quel état antérieur. Chaque entreprise tech utilise Git — c’est une compétence non négociable pour un développeur.

Le flux de travail fondamental de Git repose sur trois zones. Le répertoire de travail (working directory) est le dossier où vous modifiez vos fichiers normalement. La zone de staging (index) est une zone intermédiaire où vous préparez les fichiers à sauvegarder — vous y ajoutez des fichiers avec git add. Enfin, le dépôt (repository) contient l’historique complet de vos commits — vous y sauvegardez avec git commit. Cette séparation en trois zones est ce qui rend Git puissant : vous pouvez choisir précisément quels changements inclure dans chaque commit, créant un historique clair et organisé.

Pour démarrer avec Git, on initialise un dépôt dans un dossier existant avec git init. Ensuite, le cycle de base est : modifier des fichiers, les ajouter au staging avec git add nom_fichier (ou git add . pour tout ajouter), puis les sauvegarder avec git commit -m "Description du changement". La commande git status montre l’état actuel (fichiers modifiés, en staging, etc.), et git log affiche l’historique des commits. Chaque message de commit doit être descriptif et commencer par un verbe d’action : “Ajouter la page contact” plutôt que “Modifications”.

Séquence complète : initialiser un projet Git et faire les premiers commits.bash
# 1. Créer un dossier projet et s'y placer
mkdir mon-portfolio
cd mon-portfolio

# 2. Initialiser un dépôt Git
git init

# 3. Créer un premier fichier
echo "<!DOCTYPE html>" > index.html

# 4. Vérifier le statut (fichier non suivi)
git status

# 5. Ajouter le fichier au staging
git add index.html

# 6. Premier commit
git commit -m "Initialiser le projet avec index.html"

# 7. Modifier le fichier et faire un deuxième commit
echo "<html lang="fr"><head><title>Portfolio</title></head></html>" > index.html
git add index.html
git commit -m "Ajouter la structure HTML de base"

# 8. Voir l'historique
git log --oneline

Exercice pratique

Premiers pas avec Git

Créez un nouveau projet, initialisez-le avec Git, et effectuez au moins 3 commits successifs en ajoutant et modifiant des fichiers à chaque étape.

  1. Créez un dossier 'exercice-git', placez-vous dedans et initialisez un dépôt avec git init.
  2. Créez un fichier README.md avec un titre, faites git add et git commit avec un message descriptif.
  3. Ajoutez un fichier index.html avec la structure HTML de base, commitez avec un message clair.
  4. Modifiez le README pour ajouter une description du projet, commitez, puis vérifiez l’historique avec git log.

La commande git log doit afficher au moins 3 commits avec des messages descriptifs différents. Chaque commit correspond à un changement logique distinct.

Leçon 2

Branches et collaboration

Maîtriser le système de branches de Git pour travailler sur plusieurs fonctionnalités en parallèle et fusionner le travail de manière organisée.

Les branches sont l’une des fonctionnalités les plus puissantes de Git. Une branche est comme une ligne de développement parallèle : elle vous permet de travailler sur une nouvelle fonctionnalité sans affecter le code principal. Par défaut, Git crée une branche appelée main (anciennement master). Pour créer une nouvelle branche : git branch nom-branche. Pour basculer dessus : git switch nom-branche (ou git checkout nom-branche en ancien syntaxe). Le raccourci git switch -c nom-branche crée la branche ET bascule dessus en une seule commande. Tous les commits faits sur cette branche n’affectent pas la branche main.

Une fois votre fonctionnalité terminée sur une branche, il faut la fusionner (merge) dans la branche principale. On se replace d’abord sur main avec git switch main, puis on fusionne avec git merge nom-branche. Si les modifications ne touchent pas les mêmes lignes, Git fusionne automatiquement. En cas de conflit (deux branches ont modifié la même ligne), Git marque les conflits dans le fichier avec des marqueurs <<<<<<<, =======, >>>>>>>. Il faut alors éditer manuellement le fichier pour choisir la bonne version, puis faire un commit. Les conflits sont normaux et font partie du travail collaboratif.

Plusieurs commandes vous aident à naviguer et comprendre l’état de votre dépôt. git log --oneline --graph affiche l’historique sous forme de graphe avec les branches. git diff montre les changements non encore ajoutés au staging. git diff --staged montre les changements en staging. git status résume l’état actuel. git branch liste toutes les branches locales (l’astérisque indique la branche courante). Après une fusion réussie, vous pouvez supprimer la branche fusionnée avec git branch -d nom-branche pour garder un dépôt propre.

Workflow complet : créer une branche feature, y travailler, puis la fusionner dans main.bash
# Partir de la branche main
git switch main

# Créer une branche pour la nouvelle fonctionnalité
git switch -c feature/page-contact

# Travailler sur la fonctionnalité
cat > contact.html << 'EOF'
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Contact</title>
</head>
<body>
  <h1>Contactez-moi</h1>
  <form>
    <label for="email">Email :</label>
    <input type="email" id="email" name="email">
    <button type="submit">Envoyer</button>
  </form>
</body>
</html>
EOF

git add contact.html
git commit -m "Ajouter la page de contact avec formulaire"

# Revenir sur main et fusionner
git switch main
git merge feature/page-contact

# Supprimer la branche fusionnée
git branch -d feature/page-contact

# Vérifier l'historique
git log --oneline --graph

Exercice pratique

Créer et fusionner une branche feature

À partir de votre projet existant, créez une branche pour ajouter une page “À propos”, faites plusieurs commits sur cette branche, puis fusionnez-la dans main.

  1. Assurez-vous d’être sur la branche main (git switch main), puis créez une branche feature/about (git switch -c feature/about).
  2. Créez un fichier about.html avec du contenu HTML, puis commitez.
  3. Ajoutez du CSS pour styliser la page about dans un fichier about.css, puis commitez.
  4. Revenez sur main (git switch main), fusionnez la branche (git merge feature/about), vérifiez avec git log et supprimez la branche.

Après la fusion, git log --oneline doit montrer les commits de la branche feature intégrés dans main. Les fichiers about.html et about.css doivent exister sur main.

Leçon 3

GitHub et collaboration distante

Publier un projet local sur GitHub, maîtriser les commandes push/pull/clone, et comprendre le workflow des pull requests.

GitHub est une plateforme en ligne qui héberge des dépôts Git et facilite la collaboration entre développeurs. C’est le réseau social du code : vous pouvez publier vos projets, contribuer à ceux des autres, et montrer votre travail aux recruteurs. Pour créer un dépôt sur GitHub, connectez-vous, cliquez sur “New repository”, donnez-lui un nom, et choisissez sa visibilité (public ou privé). GitHub vous donne ensuite les commandes pour connecter votre dépôt local. La connexion entre votre ordinateur et GitHub s’appelle un “remote” — généralement nommé “origin”.

Les commandes clés pour travailler avec GitHub sont : git remote add origin URL pour connecter votre dépôt local à GitHub, git push -u origin main pour envoyer vos commits sur GitHub (le -u configure le suivi pour les prochains push), git pull origin main pour récupérer les modifications faites sur GitHub par vous ou d’autres, et git clone URL pour télécharger un dépôt complet depuis GitHub. Le flux typique est : vous travaillez localement (add, commit), puis vous poussez vos changements (push). Si quelqu’un d’autre a contribué, vous tirez ses changements (pull) avant de continuer.

Les pull requests (PR) sont le cœur de la collaboration sur GitHub. Plutôt que de fusionner directement dans main, vous créez une branche, poussez-la sur GitHub, puis ouvrez une pull request. Cela crée une page de discussion où les autres développeurs peuvent relire votre code, laisser des commentaires, et suggérer des modifications avant la fusion. C’est ce qu’on appelle la “code review”. Enfin, un bon fichier README.md est la vitrine de votre projet : il doit contenir le titre, une description, les instructions d’installation, un guide d’utilisation, et les technologies utilisées. Le README est souvent la première chose que voient les recruteurs.

Workflow complet : connecter un projet local à GitHub et pousser le code.bash
# 1. Créer le dépôt sur GitHub (via le site), puis localement :

# 2. Connecter le dépôt local au remote GitHub
git remote add origin https://github.com/votre-nom/mon-portfolio.git

# 3. Vérifier la connexion
git remote -v

# 4. Pousser le code sur GitHub
git push -u origin main

# 5. Créer une branche, travailler, et pousser la branche
git switch -c feature/ameliorer-footer
# ... modifier des fichiers ...
git add .
git commit -m "Améliorer le design du footer"
git push origin feature/ameliorer-footer

# 6. Sur GitHub : ouvrir une Pull Request
# 7. Après review et merge sur GitHub, localement :
git switch main
git pull origin main

Exercice pratique

Publier un projet sur GitHub

Prenez le portfolio que vous avez créé au Module 2 (ou tout autre projet), créez un dépôt sur GitHub, et poussez-y votre code avec un README.md complet.

  1. Créez un nouveau dépôt vide sur GitHub (sans README, sans .gitignore, sans licence).
  2. Dans votre projet local, ajoutez le remote avec git remote add origin URL et poussez avec git push -u origin main.
  3. Créez un fichier README.md complet avec titre, description, technologies, et instructions.
  4. Commitez le README, poussez-le, et vérifiez que tout apparaît correctement sur GitHub.

Votre dépôt GitHub doit afficher tous les fichiers du projet et le README.md formaté sur la page d’accueil. Vérifiez que l’historique des commits est visible dans l’onglet “Commits”.

Projet final

Publier son portfolio sur GitHub

Reprenez le portfolio créé au Module 2, versionnez-le proprement avec Git, créez un dépôt GitHub public, et publiez-le avec un README.md professionnel. Utilisez des branches pour ajouter au moins une amélioration.

Critères de réussite

  • Le dépôt GitHub contient tous les fichiers du portfolio (HTML, CSS).
  • L’historique Git contient au moins 5 commits avec des messages descriptifs.
  • Au moins une branche feature a été créée, commitée et fusionnée dans main.
  • Un fichier README.md complet est présent avec titre, description, technologies et instructions.
  • Le dépôt est public et accessible via son URL GitHub.

Guide de réalisation

  • 1Commencez par initialiser Git dans votre projet de portfolio et faites un premier commit avec les fichiers existants.
  • 2Créez une branche feature/amelioration pour ajouter une section ou améliorer le design.
  • 3Rédigez le README.md en suivant le modèle : titre, description, technologies, installation, auteur.
  • 4Créez le dépôt sur GitHub en mode public, connectez-le avec git remote add, et poussez.
  • 5Vérifiez que tout s’affiche correctement sur GitHub et partagez l’URL avec fierté !

Consolidez vos acquis avant de poursuivre.

Prenez le temps de revoir les concepts difficiles et de refaire les exercices qui méritent une seconde passe.