Exercices Branches et Pull Requests

Le but de cet exercice est de vous faire travailler en groupe sur le même repository. Vous allez devoir créer une branche, travailler dessus, puis fusionner votre branche avec la branche principale pour mettre le code des membres du groupe en commun.

Étape 0 : inviter les membres sur un des repository

Choisissez le repository bre05-js-git de l'un·e des membres du groupe. Sur GitHub, invitez les deux autres membres du groupe à collaborer dessus.

Paramètres du repository

Ajouter des membres

Rechercher par pseudo et inviter

Étape 1 : préparer le dossier

Pour lea propriétaire du repository :

Dans votre IDE, créez un dossier groupe dans votre dossier bre05-js-git

Pour les invité·e·s, vous allez cloner un peu différemment le repository :

Dans votre IDE, dans le dossier sites/js, faites la commande suivante :

git clone <url-du-repository> git-groupe

Cela mettra le repo dans un dossier git-groupe ce qui vous évitera des conflits entre les noms de dossiers. Utilisez ensuite le terminal cd git-groupe pour vous rendre dans ce nouveau dossier.

Étape 2 : préparer le HTML

Tou·te·s ensemble, sur la branche main, créez un fichier index.html et placez-y le code suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Exercice de groupe Git et GitHub</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <main>
            <article>

            </article>
            <article>

            </article>
            <article>

            </article>
            <article>

            </article>
            <article>

            </article>
            <article>

            </article>
        </main>
    </body>
</html>

Créez également un fichier style.css vide.

Étape 3 : Créer les branches

Pour chaque membre du groupe créer une branche à son nom à partir de la branche main. Par exemple si j'étais membre du groupe, il faudrait créer une branche mari à partir de la branche main.

À la fin, vous devriez donc avoir 3 branches à vos noms en plus de la branche main (4 branches en tout).

Étape 4 : le travail à faire

Ici l'idée est de faire une intégration responsive qui change le nombre d'articles affichés par ligne selon la taille de l'écran. Chaque membre du groupe va se charger du CSS d'une résolution et y travailler sur sa branche :

Petits écrans (moins de 768px)

1 article par ligne, 50vh de hauteur avec la couleur #3d348b

Moyens écrans (entre 768px et 992px)

2 articles par ligne, 30vh de hauteur avec la couleur #a31621

Grands écrans (992px et plus)

3 articles par ligne, 30vh de hauteur avec la couleur #f7b801

Étape 5 : fusionner les branches

Une fois que tout le monde a fini son travail faites en sorte de réunir le code des branches des membres sur la branche main.

05 January 2026

Session BRE05 Help