Aller au contenu

Exercice 1 : Tableau de notes d'élèves

Objectif

Créer un tableau HTML structuré avec des données d'élèves et leurs notes, puis le styliser avec CSS en appliquant des bordures, des couleurs d'arrière-plan et des effets interactifs au survol.

Workflow Git

Avant de commencer cet exercice :

1
2
3
4
5
git checkout main
git pull origin main
git checkout -b exercice-1
mkdir exercice-1
cd exercice-1

1. Créer le tableau HTML

  • Créez un fichier index.html dans le dossier exercice-1.
  • Le tableau doit comporter les colonnes suivantes: Nom de l'élève, Mathématiques, Physique, Informatique, Moyenne générale.
  • Il doit y avoir 10 élèves avec des notes différentes.
  • Calculez et affichez la moyenne générale de chaque élève (en ajoutant une colonne dédiée).

2. Styliser le tableau avec CSS

  • Créez un fichier styles.css dans le dossier exercice-1.
  • Ajouter des bordures à chaque cellule du tableau.
  • Surligner l'en-tête du tableau avec une couleur de fond différente.
  • Ajouter un effet de survol (hover) sur les lignes du tableau pour changer la couleur de fond de la ligne survolée.
  • Centrer le texte dans les cellules et ajuster la largeur des colonnes.

3. Livraison de l'exercice

Checklist avant de soumettre

  • Créez vos fichiers : exercice-1/index.html et exercice-1/styles.css
  • Testez le tableau dans votre navigateur
  • Vérifiez que l'effet hover fonctionne correctement
  • Faites des commits réguliers avec des messages clairs
1
2
3
4
git add .
git commit -m "feat(exercice-1): création tableau HTML avec 10 élèves"
# git commit -m "style(exercice-1): ajout CSS bordures et hover"
git push origin exercice-1

Création de la Pull Request

  1. Allez sur GitHub dans votre dépôt
  2. Cliquez sur "Compare & pull request"
  3. Titre de la PR : feat(exercice-1): tableau de notes d'élèves

  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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    ## Exercice 1 : Tableau de notes d'élèves

### Ce qui a été réalisé

- [x] Création du fichier `exercice-1/index.html`
- [x] Création du fichier `exercice-1/styles.css`
- [x] Tableau HTML avec 10 élèves
- [x] Colonnes : Nom, Mathématiques, Physique, Informatique, Moyenne générale
- [x] Calcul des moyennes générales pour chaque élève
- [x] Bordures sur toutes les cellules
- [x] En-tête du tableau avec couleur de fond différente
- [x] Effet hover sur les lignes du tableau
- [x] Texte centré dans les cellules
- [x] Largeurs de colonnes ajustées

### Captures d'écran

#### Vue normale du tableau

![Tableau normal](URL_de_votre_capture)

#### Vue avec effet hover

![Effet hover](URL_de_votre_capture)

#### Vue responsive (optionnel)

![Vue mobile](URL_de_votre_capture)

### Points techniques

- Structure HTML : `<table>`, `<tr>`, `<th>`, `<td>`
- CSS : bordures, background-color, :hover, text-align, width

### Questions pour l'enseignant

- (optionnel) Listez vos questions ici

  5. Ajoutez vos captures d'écran en glissant-déposant les images dans le champ de description

  6. Cliquez sur "Create pull request"
  7. N'oubliez pas : Ne cliquez PAS sur "Merge pull request" !

Captures d'écran à inclure dans votre PR

  • Vue normale du tableau
  • Vue avec l'effet hover sur une ligne
  • Vue responsive sur mobile (optionnel)