Exercices¶

Étape 0 : Configuration initiale (Début du TP)¶

1. Accepter le devoir GitHub Classroom
2. Cliquez sur le lien fourni par l'enseignant
3. Connectez-vous à votre compte GitHub si nécessaire
4. Acceptez l'assignment

5. Attendez que GitHub crée votre dépôt personnel (cela prend quelques secondes)

6. Ouvrir dans GitHub Codespaces

7. Une fois le dépôt créé, cliquez sur le bouton vert Code
8. Sélectionnez l'onglet Codespaces
9. Cliquez sur Create codespace on main

10. Patientez pendant que l'environnement de développement se charge (1-2 minutes)

11. Vérifier la structure initiale

1
2
3
4
5
6
7
8

# Dans le terminal Codespaces, vérifiez votre configuration
git config --global user.name 
# "Votre Nom"
git config --global user.email 
# "votre.email@example.com"

# Vérifiez que vous êtes sur la branche main
git branch

Workflow par exercice¶

Pour chaque exercice de ce TP, vous devez suivre rigoureusement ce processus :

1. Créer une branche dédiée¶

1
2
3
4
5
6
7

# Assurez-vous d'être sur main et à jour
git checkout main
git pull origin main

# Créez une nouvelle branche pour l'exercice
git checkout -b exercice-1
# ou exercice-0, exercice-2, exercice-3, exercice-4, exercice-5

2. Créer le dossier de l'exercice¶

1
2
3
4
5
6
7
8

# Créez un dossier dédié pour l'exercice
mkdir exercice-1
cd exercice-1

# Créez vos fichiers de travail à l'intérieur
touch index.html
touch styles.css
# ... autres fichiers selon l'exercice

3. Développer la solution¶

• Travaillez sur les fichiers dans le dossier de l'exercice
• Testez régulièrement votre code dans le navigateur
• Utilisez l'extension Live Preview de Codespaces pour prévisualiser

4. Commits réguliers¶

1
2
3
4
5
6
7
8
9

# Ajoutez vos fichiers à l'index Git
git add .

# Faites un commit avec un message descriptif
git commit -m "feat(exercice-1): ajout du tableau HTML avec 10 élèves"

# Continuez à travailler et faire des commits réguliers
git add .
git commit -m "style(exercice-1): stylisation du tableau avec CSS"

5. Pousser la branche vers GitHub¶

1
2

# Poussez votre branche vers le dépôt distant
git push origin exercice-1

6. Ouvrir une Pull Request (PR)¶

1. Allez sur votre dépôt GitHub dans le navigateur
2. GitHub détectera automatiquement votre nouvelle branche
3. Cliquez sur Compare & pull request
4. Remplissez la description de la PR :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

## Exercice 1 : Tableau des notes d'élèves

### Ce qui a été réalisé
- [x] Création du tableau HTML avec 10 élèves
- [x] Calcul des moyennes générales
- [x] Stylisation CSS avec bordures et en-tête
- [x] Effet hover sur les lignes

### Captures d'écran

#### Vue normale
![Capture tableau normal](URL_de_votre_capture)

#### Vue avec effet hover
![Capture avec hover](URL_de_votre_capture)

### Points d'attention
- J'ai utilisé `calc()` pour calculer les moyennes en CSS (si applicable)
- Le tableau est responsive avec `overflow-x: auto`

### Questions pour l'enseignant
- (optionnel) Listez vos questions ici

1. Ajoutez des captures d'écran dans les commentaires de la PR :
2. Faites des captures de votre travail (Windows : Win+Shift+S, Mac : Cmd+Shift+4)
3. Glissez-déposez les images directement dans le champ de commentaire

4. GitHub les hébergera automatiquement

5. Cliquez sur Create pull request

7. Passer à l'exercice suivant¶

1
2
3
4
5
6
7
8

# Revenez sur la branche main
git checkout main

# Répétez les étapes 1-6 pour exercice-2, exercice-3, etc.
git checkout -b exercice-2
mkdir exercice-2
cd exercice-2
# ... continuez votre travail

Exemple de structure finale du dépôt¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

tp2-html-css-votre-nom/
├── README.md
├── exercice-1/
│   ├── index.html
│   └── styles.css
├── exercice-2/
│   ├── index.html
│   └── styles.css
├── exercice-3/
│   ├── index.html
│   ├── header.html
│   ├── navigation.html
│   ├── accueil.html
│   ├── apropos.html
│   ├── contact.html
│   └── iframe-styles.css
├── exercice-4/
│   ├── commande.html
│   ├── commande-styles.css
│   └── images/
│       ├── produit-a.jpg
│       ├── produit-b.jpg
│       └── produit-c.jpg
└── exercice-5/
    ├── galerie.html
    ├── galerie-styles.css
    ├── script.js
    └── images/
        ├── image-1.jpg
        ├── image-2.jpg
        └── ...

Checklist de validation avant PR¶

Avant d'ouvrir chaque pull request, vérifiez :

• Mon code fonctionne correctement (testé dans le navigateur)
• Tous mes fichiers sont dans le bon dossier (exercice-X/)
• J'ai fait des commits réguliers avec des messages clairs
• Ma branche est nommée correctement (exercice-X)
• J'ai ajouté au moins 2 captures d'écran dans la description de la PR
• Je n'ai PAS cliqué sur "Merge"
• Mon code est propre (indentation, pas de code commenté inutile)