Aller au contenu

Exercice 1 : Profil étudiant

Objectif

Créer une page HTML simple présentant votre profil avec les éléments de structure de base.

Étape 1 : Créer une branche pour cet exercice

Avant de commencer à coder, créez une branche dédiée à cet exercice :

1
2
3
4
5
# Assurez-vous d'être sur la branche main
git checkout main

# Créez et basculez sur une nouvelle branche
git checkout -b exercice-1-profil

Explication de la commande

  • git checkout -b : Crée une nouvelle branche ET bascule dessus
  • exercice-1-profil : Nom descriptif de la branche (utilisez toujours des noms clairs)

Vous pouvez vérifier que vous êtes bien sur la bonne branche :

1
git branch

La branche active est marquée avec un astérisque *.

Étape 2 : Développer l'exercice

  1. Créez un fichier index.html dans votre dépôt.

  2. Ajoutez la structure HTML minimale :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil - Votre Nom</title>
</head>
<body>
    <!-- Votre code ici -->
</body>
</html>

  3. Dans le <body>, ajoutez :

    • <header> : Contenant votre nom dans un titre <h1>
    • <main> : Avec un paragraphe <p> décrivant vos centres d'intérêt
    • <footer> : Avec votre email sous forme de lien mailto:

Exemple de structure

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<header>
    <h1>John Doe</h1>
</header>

<main>
    <p>Étudiant passionné par le développement web...</p>
</main>

<footer>
    <p>Contact : <a href="mailto:john.doe@exemple.com">john.doe@exemple.com</a></p>
</footer>

Étape 3 : Tester votre page

Avant de commiter, testez votre page dans le navigateur :

  1. Ouvrir le fichier : Dans VS Code, cliquez droit sur index.html > "Open with Live Server" (si disponible) ou ouvrez-le directement dans votre navigateur
  2. Vérifier :
    • Le titre s'affiche-t-il correctement ?
    • Le paragraphe est-il bien formaté ?
    • Le lien email fonctionne-t-il ?

Étape 4 : Commit et Push

Une fois satisfait de votre travail :

1
2
3
4
5
6
7
8
# Ajoutez votre fichier à l'index Git
git add index.html

# Créez un commit avec un message descriptif
git commit -m "Exercice 1 : Création de la page de profil"

# Envoyez votre branche sur GitHub
git push -u origin exercice-1-profil

Explication

  • git push -u origin exercice-1-profil :
    • origin = votre dépôt GitHub
    • -u = définit cette branche comme branche de suivi (vous pourrez ensuite faire juste git push)

Étape 5 : Ouvrir une Pull Request

  1. Accédez à GitHub : Allez sur la page de votre dépôt

  2. Créez la Pull Request :

    • Vous verrez un bandeau jaune : "exercice-1-profil had recent pushes"
    • Cliquez sur "Compare & pull request"

  3. Remplissez les informations :

    • Titre : Exercice 1 : Profil étudiant
    • Description : Ajoutez des détails sur ce que vous avez fait
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
    ## Exercice 1 : Profil étudiant

### Ce qui a été fait :
- ✅ Création du fichier index.html
- ✅ Ajout de la structure HTML5
- ✅ Implémentation du header avec mon nom
- ✅ Ajout du paragraphe de présentation
- ✅ Création du lien email dans le footer

### Capture d'écran :
(Optionnel : ajoutez une capture d'écran de votre page)

  4. Créez la PR : Cliquez sur "Create pull request"

Félicitations ! 🎉

Votre Pull Request est créée ! Votre enseignant recevra une notification et pourra :

  • Voir votre code
  • Laisser des commentaires
  • Demander des modifications
  • Valider et fusionner votre travail

Étape 6 : Attendre la validation

N'allez PAS plus loin tant que l'enseignant n'a pas validé et fusionné cette PR.

Pendant ce temps, vous pouvez :

  • Relire votre code
  • Améliorer votre page (et faire de nouveaux commits sur la même branche)
  • Consulter les ressources complémentaires

Que se passe-t-il ensuite ?

Une fois que votre enseignant valide :

  1. Il merge (fusionne) votre branche dans main
  2. Votre code est maintenant dans la branche principale
  3. Vous pouvez passer à l'exercice suivant

Félicitations ! 🎉

Vous avez terminé le premier exercice 1 avec succès ! Vous savez maintenant :

  • ✅ Créer une branche Git
  • ✅ Développer une page HTML simple
  • ✅ Tester votre travail dans un navigateur
  • ✅ Faire des commits clairs et descriptifs
  • ✅ Pousser votre travail sur GitHub
  • ✅ Ouvrir une Pull Request pour revue

Vous êtes prêt pour l'exercice 2 !