Exercices Git et GitHub

Le but de cet exercice est de vous faire utiliser les quatre principales commandes de Git pour vous familiariser avec.

Étape 0 : Création du repository

Rendez-vous sur github.com
Connectez-vous à votre compte GitHub
En haut, à gauche, cliquez sur le bouton vert "New"
Créez un nouveau repository public avec un README et le nom bre05-js-git

Étape 1 : Cloner le repository

Dans votre IDE de la 3WA, créez le dossier sites/js
Avec le terminal rendez-vous dans ce dossier : cd sites/js
Sur GitHub, récupérez l'URL du repository bre05-js-git
Dans le terminal, clonez le repository dans le dossier sites/js avec la commande du cours
Dans le dossier sites/js/bre05-js-git, créez un dossier solo

Étape 2 : Le fichier HTML

Créez le fichier index.html dans le dossier sites/js/bre05-js-git/solo
Placez-y le code suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Exercices Git et GitHub</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header>
            
        </header>
        <main>
        
        </main>
        <footer>
        
        </footer>
    </body>
</html>

Dans le terminal, ajoutez le fichier index.html au repository en utilisant la commande appropriée du cours
Dans le terminal, créez un point de sauvegarde pour votre repository avec la commande appropriée du cours (n'oubliez pas de mettre un message explicite)
Envoyez vos modifications en ligne avec la commande appropriée du cours
Vérifiez sur GitHub que votre fichier est bien présent

Étape 3 : Mettre en place le CSS

Étape 3.1 Le CSS à coder

Voici ce à quoi devra ressembler votre page pour les écrans de taille égale ou supérieure à 768px :

et sur les écrans de taille inférieure à 768px

Petits écrans

La couleur utilisée est #3d348b
Les tailles des zones sont :
- 5vh
- 85vh
- 10vh

Grands écrans

La couleur utilisée est #a31621
Les tailles des zones sont :
- 10vh
- 70vh
- 20vh

Étape 3.2 Versionner votre CSS

En vous inspirant du cours et des étapes précédentes sur le HTML, vous allez devoir :

ajouter les modifications de votre index.html à la sauvegarde
ajouter le fichier .css à la sauvegarde
créer un point de sauvegarde avec un message explicite
envoyer vos modifications en ligne

Conclusion

À partir d'aujourd'hui, vous allez systématiquement versionner votre code. Au minimum, vous devrez faire un git add/git commit/git push de votre travail avant chaque pause et avant de terminer votre journée le soir.

Cela va vous permettre à la fois d'acquérir un des principaux réflexes du métier de développeur / développeuse, mais également de sauvegarder votre code et son historique ce qui ne manquera pas de vous être utile à la fois sur les exercices / mini-projets et sur votre projet final.

05 January 2026