Exercices¶

Méthodologie de travail¶

Ce TP est distribué et remis via Classroom 50, l'alternative libre à GitHub Classroom : vous recevez un dépôt GitHub privé personnel, et chaque git push est enregistré comme une soumission. Vous aurez besoin de Git et d'un compte GitHub.

1. Réception et acceptation du devoir¶

Votre enseignant vous partagera un lien Classroom 50 pour ce TP, de la forme https://classroom50.org/<organisation>/<classe>/assignments/<devoir>. Suivez ces étapes :

1. Cliquez sur le lien fourni par votre enseignant
2. Cliquez sur Sign in with GitHub et autorisez l'application Classroom 50 (uniquement la première fois), avec le compte GitHub associé à l'adresse e-mail communiquée à votre enseignant
3. Acceptez l'invitation à l'organisation GitHub de la classe si ce n'est pas déjà fait (GitHub vous l'envoie par e-mail ; la page d'acceptation du devoir peut aussi l'accepter pour vous)
4. Cliquez sur Accept assignment, attendez que Classroom 50 crée votre dépôt (cela peut prendre quelques secondes), puis cliquez sur Open repository

2. Clonage du dépôt¶

Une fois votre dépôt créé :

1
2

git clone <url-de-votre-depot>
cd <nom-du-depot>

3. Travail sur la branche principale¶

Avec Classroom 50, vous travaillez directement sur la branche principale (main) de votre dépôt : c'est elle qui est évaluée.

Ouvrez le projet dans VS Code ou votre éditeur de code préféré, et commencez à travailler sur les exercices. Chaque exercice doit être réalisé dans son propre dossier (exercice-0/, exercice-1/, etc.) comme indiqué dans les énoncés.:

4. Commits réguliers¶

À la fin de chaque tâche ou exercice, commitez puis poussez votre travail :

1
2
3

git add .
git commit -m "Description claire de la tâche réalisée"
git push

5. Soumission du compte rendu¶

Avec Classroom 50, soumettre, c'est pousser : chaque git push sur main enregistre une nouvelle soumission. Il n'y a aucun lien ni fichier à envoyer à votre enseignant.

À la fin du TP :

1. Vérifiez que tout votre travail est poussé :

   1 2	git status git push

2. Vérifiez votre soumission sur classroom50.org : ouvrez votre classe (View assignments), choisissez ce devoir, puis cliquez sur My submission. L'état doit indiquer Submitted, avec la date de votre dernière soumission. Si le devoir est évalué automatiquement, le résultat est publié dans l'onglet Releases de votre dépôt GitHub (le déroulement de l'évaluation est visible dans l'onglet Actions).

3. À la fin de chaque tâche, prenez une capture d'écran de votre application en fonctionnement et ajoutez-la en commentaire de la Pull Request « Feedback » de votre dépôt (onglet Pull requests sur GitHub).

   Important

   Cette Pull Request est ouverte automatiquement par Classroom 50 lorsque vous acceptez le devoir : votre enseignant s'en sert pour commenter votre code. NE LA FERMEZ PAS et ne cherchez pas à la fusionner (seul l'enseignant le peut) : laissez-la ouverte en attendant la validation de votre enseignant.

   Vous ne voyez pas la Pull Request « Feedback » ?

   Contactez votre enseignant : les retours par Pull Request peuvent être désactivés pour un devoir.

1
2
3

gh extension install foundation50/gh-student
gh student accept <organisation> <classe> <devoir>
gh student submit

1

git tag submit/final && git push origin submit/final

1
2
3
4
5
6
7

votre-depôt-github/
├── .github/
├── .devcontainer/
├── .vscode/
├── .gitignore
├── LICENSE
...

1
2
3

✅ All checks have passed        (Tous les tests sont OK)
❌ Some checks were not successful  (Des tests ont échoué)
🟡 Checks are running...         (Tests en cours)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

FAIL tests/exercice-1.test.js
Exercice 1 - Tableau des notes
    ✓ Le fichier index.html existe (15 ms)
    ✓ Le fichier styles.css existe (3 ms)
    ✕ Le tableau contient 10 lignes d'élèves (45 ms)
    ✓ L'en-tête du tableau a un background différent (12 ms)
    ✕ Les cellules ont des bordures (8 ms)

Tests Suites: 1 failed, 1 total
Tests:       2 failed, 3 passed, 5 total

1

✕ Les cellules ont des bordures (8 ms)

1
2
3

Expected CSS property 'border' on 'td' or 'table' elements
Selector checked: td, table
Property found: none

1
2
3
4
5
6
7

/* ❌ Problème : règle manquante ou mal écrite */
/* table { ... } */

/* ✅ Solution : ajoutez la règle */
td, th {
border: 1px solid #ddd;
}

1
2
3

git add .
git commit -m "fix(exercice-1): ajout bordures cellules tableau"
git push origin exercice-1

Exercices à faire¶

Rendez-vous dans les sections dédiées aux exercices dans la barre de navigation latérale pour accéder aux énoncés détaillés et aux ressources nécessaires pour chaque exercice.

Date limite et modalités de rendu¶

Aucun retard ne sera accepté sans justification valable.