GUIDE PROFESSEUR

Formation HTML5  Gestion Git & Conduite de cours

Document à usage interne  Ne pas distribuer aux étudiants

PROFESSEUR GIT MANAGER

U R
Enseigner HTML5 en pratiquant Git
SE
Planication • Corrigés • Gestion du dépôt • Évaluation
ES
OF

Auteur :
M. YANKAM NGUEGUIM JOEL STÉPHANE
PR

Organisation :
GROUPE GENIUS RÉPÉTITION
Dépôt : [Link]/joelyk
March 15, 2026

Guide Professeur HTML5 • GROUPE GENIUS RÉPÉTITION • CONFIDENTIEL

[Link] | [Link]
Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Contents
1 Vue d'ensemble  Organisation de la formation 2
1.1 Objectifs pédagogiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Plan de la formation en 6 semaines . . . . . . . . . . . . . . . . . . . . . . 2

2 Conguration du dépôt GitHub (joelyk) 2

2.1 Mise en place initiale du dépôt . . . . . . . . . . . . . . . . . . . . . . . . . 2
2.1.1 Initialiser le dépôt pédagogique . . . . . . . . . . . . . . . . . . . . 3
2.1.2 Rédiger le [Link] du dépôt . . . . . . . . . . . . . . . . . . 3
2.2 Gestion des étudiants sur GitHub . . . . . . . . . . . . . . . . . . . . . . . 4
2.2.1 Workow étudiant  Procédure détaillée . . . . . . . . . . . . . . . 4
2.2.2 Commandes Git quotidiennes du professeur . . . . . . . . . . . . . 4
2.3 Gestion des Pull Requests étudiants . . . . . . . . . . . . . . . . . . . . . . 5
2.3.1 Accepter un bon travail . . . . . . . . . . . . . . . . . . . . . . . . 5

R
2.3.2 Demander des corrections . . . . . . . . . . . . . . . . . . . . . . . 5

U
3 Corrigés complets des exercices 5
3.1 Corrigé Exercice 1.1  Première page HTML5
SE . . . . . . . . . . . . . . . . 6
3.2 Corrigé Exercice 2.1  Page de présentation . . . . . . . . . . . . . . . . . 7
3.3 Corrigé Exercice 4.1  Structure sémantique . . . . . . . . . . . . . . . . . 8
3.4 Corrigé Exercice 5.1  Formulaire de contact . . . . . . . . . . . . . . . . 10

4 Grille d'évaluation et suivi 11

ES
4.1 Grille d'évaluation projet nal . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.2 Tableau de suivi des étudiants . . . . . . . . . . . . . . . . . . . . . . . . . 11

5 Gestion Git avancée  Professeur 11

OF

5.1 Organiser les branches par promotion . . . . . . . . . . . . . . . . . . . . . 12

5.2 Commandes de gestion de promotion . . . . . . . . . . . . . . . . . . . . . 12
5.3 Publier les corrections de façon contrôlée . . . . . . . . . . . . . . . . . . . 13
5.4 Gérer les conits étudiants . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
PR

6 Séquence de cours détaillée  Semaine par semaine 13

6.1 Semaine 1  Environnement et Git (2h) . . . . . . . . . . . . . . . . . . . 13
6.2 Semaine 2  Module 1 : Structure HTML5 (2h) . . . . . . . . . . . . . . . 14
6.3 Semaines 36  Modules 2 à Projet nal . . . . . . . . . . . . . . . . . . . 14

7 Référence rapide Git  Professeur 15

[Link] 1 [Link]

Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Vue d'ensemble  Organisation de la formation
Objectifs pédagogiques
À la n de cette formation, les étudiants seront capables de :

ˆ Créer une page HTML5 valide avec la structure complète

ˆ Utiliser toutes les balises sémantiques HTML5

ˆ Structurer un mini-site de plusieurs pages liées

ˆ Créer des formulaires avec validation HTML5

ˆ Utiliser Git et GitHub pour versionner leur travail

ˆ Collaborer via des Pull Requests sur le dépôt [Link]/joelyk

R
Plan de la formation en 6 semaines

U
Module Contenu Livrable Git
Semaine
Env. + Git
SE
VS Code, Git, GitHub commit: setup
S1
Module 1 Structure HTML5 de commit: module1
S2
ES
base
Module 2-3 Texte, liens, images commit:
S3 module2-3
Module 4 Sémantique HTML5 commit:
S4
OF

semantique
Module 5 Tableaux, formulaires commit:
S5 formulaires
Projet nal Site complet Pull Request
S6
PR

Note pédagogique clé

Chaque exercice de ce cours est indissociable d'un commit Git. L'étudiant ne
valide pas un exercice sans l'avoir poussé sur GitHub. Cela crée une discipline
professionnelle dès le départ.

Conguration du dépôt GitHub (joelyk)

Mise en place initiale du dépôt
Avant le premier cours  À faire par le professeur
Ces étapes sont à réaliser une seule fois, avant le démarrage de la formation.

[Link] 2 [Link]

Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Initialiser le dépôt pédagogique
Terminal  Professeur
# 1. Créer le dépôt sur [Link]/joelyk
# (via l'interface web GitHub : New Repository)
# Nom : formation-html5
# Description : Depot pedagogique HTML5 - Genius Classrooms
# Visibilite : Public

# 2. Cloner localement
git clone [Link]
cd formation-html5

# 3. Creer la structure de base

mkdir -p exercices/semaine1
mkdir -p exercices/semaine2
mkdir -p exercices/semaine3

R
mkdir -p corrections
mkdir -p ressources
touch [Link]

# 4. Pousser la structure
git add .
EU
SS
git commit -m "init: structure pedagogique de la formation HTML5"
git push origin main

Rédiger le [Link] du dépôt

E

# Formation HTML5 - Genius Classrooms

OF

Bienvenue dans le depot officiel de la formation HTML5

dispensee par le ** Groupe Genius Repetition **.
PR

## Comment participer

1. Forkez ce depot
2. Clonez votre fork
3. Travaillez dans votre dossier ` exercices / `
4. Faites un commit apres chaque exercice
5. Ouvrez une Pull Request

## Organisation

- ` exercices / ` - Exercices par semaine

- ` corrections /` - Corrections ( acces restreint )
- ` ressources /` - Docs et references

## Formateur

M. YANKAM NGUEGUIM JOEL STEPHANE

[Link] 3 [Link]

Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
github . com / joelyk | geniusclassrooms . com

Gestion des étudiants sur GitHub

Workow étudiant  Procédure détaillée

Etudiant: Fork PROF: Revôit PR

Etudiant: Clone PROF: Commente

Corrections demandées
Etudiant: Commits PROF: Merge/Corr.

U R
Etudiant: Push PROF: git pull

Etudiant: Pull Request

SE
Workow Pull Request  Collaboration étudiant/professeur
ES
Commandes Git quotidiennes du professeur
Commandes professeur  Routine quotidienne
OF

# Voir tous les PRs ouverts des etudiants

# (sur [Link]/joelyk -> Pull Requests)

# Recuperer tous les travaux des etudiants

PR

git fetch all

git pull origin main

# Voir l'historique de toute la promotion

git log oneline all graph

# Verifier qui a pousse ce matin

git log since="yesterday" format="%an - %s"

# Creer une branche correction pour la semaine

git checkout -b corrections/semaine-2

# Poster une correction publique

git add corrections/
git commit -m "corrections: semaine 2 - structure HTML5"
git push origin corrections/semaine-2

[Link] 4 [Link]

Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Gestion des Pull Requests étudiants
Accepter un bon travail
Merger un PR d'étudiant (GitHub CLI)
# Depuis l'interface GitHub : onglet Pull Requests
# Lire le code, ajouter un commentaire positif
# Cliquer "Merge Pull Request"

# Ou en ligne de commande (GitHub CLI)

gh pr list
gh pr review 42 approve body "Excellent travail Jojo !"
gh pr merge 42 squash

Demander des corrections

Commenter un PR avec des corrections

R
# Sur GitHub : onglet "Files changed" du PR
# Cliquer sur la ligne à corriger

U
# Ajouter un commentaire inline SE
# Exemple de feedback constructif :
# "Bien ! Mais tu manques l'attribut alt sur l'image ligne 15.
# Et le <nav> doit etre dans le <header>. Corrige et re-push !"
ES
Corrigés complets des exercices
USAGE EXCLUSIF DU PROFESSEUR
OF

Cette section contient les corrigés complets. Ne jamais partager avec les étudiants
avant validation.
Postez les corrigés dans la branche corrections/ du dépôt après chaque séance.
PR

[Link] 5 [Link]

Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Corrigé Exercice 1.1  Première page HTML5
CORRIGÉ  Exercice 1.1

<! DOCTYPE html >

< html lang =" fr " >
<head >
< meta charset =" UTF -8 " >
< meta name =" viewport " content =" width = device - width ,
initial - scale =1.0 " >
< title > Jojo Kamga - Ma premiere page </ title >
</ head >
<body >
<h1 > Bonjour , je suis Jojo Kamga ! </ h1 >
<p > Etudiant en developpement web a l ' Universite de
Dschang . </p >

R
<p > Je suis la formation HTML5 dispensee par
< strong > Genius Classrooms </ strong >. </p >
</ body >

U
</ html > SE
Points de vigilance  Ex. 1.1
ˆ Vérier la présence du <!DOCTYPE html> en tout premier
ES
ˆ Vérier l'attribut lang="fr" sur <html>
ˆ Vérier charset="UTF-8" (accents !)
ˆ Vérier qu'il y a un seul <h1>
OF

ˆ Vérier le commit Git : message descriptif obligatoire

PR

[Link] 6 [Link]

Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Corrigé Exercice 2.1  Page de présentation
CORRIGÉ  Exercice 2.1

<! DOCTYPE html >

< html lang =" fr " >
<head >
< meta charset =" UTF -8 " >
< meta name =" viewport " content =" width = device - width ,
initial - scale =1.0 " >
< title > Presentation - Jojo Kamga </ title >
</ head >
<body >
<h1 > Jojo Kamga </ h1 >

<h2 >A propos de moi </ h2 >

R
<p > Je suis < strong > etudiant en L2 Informatique </ strong >
a l ' Universite de Dschang . Je suis
<em > passionne par le developpement web </ em >

U
et j ' apprends le HTML5 avec Genius Classrooms . </p >
SE
<h2 > Mes competences </ h2 >
<ul >
<li > HTML5 ( en cours d ' apprentissage ) </li >
<li > Algorithmique de base </ li >
ES
<li > Git et GitHub </ li >
<li > Travail en equipe </ li >
</ul >
OF

<h2 > Mon parcours </ h2 >

<ol >
<li > Baccalaureat serie C - 2022 </ li >
<li > Licence 1 Informatique - 2023 </ li >
<li > Formation HTML5 Genius Classrooms - 2024 </ li >
PR

<li > Objectif : developper mon premier site - 2024 </ li >
</ol >
</ body >
</ html >

[Link] 7 [Link]

Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Corrigé Exercice 4.1  Structure sémantique
CORRIGÉ  Exercice 4.1 ([Link] complet)

<! DOCTYPE html >

< html lang =" fr " >
<head >
< meta charset =" UTF -8 " >
< meta name =" viewport " content =" width = device - width ,
initial - scale =1.0 " >
< title > Formation HTML5 - Genius Classrooms </ title >
</ head >
<body >

< header >

<h1 > Formation HTML5 </ h1 >

R
<p > Apprenez le web professionnel avec Genius
Classrooms </p >

U
</ header >

<nav >
SE
<a href =" index . html " > Accueil </a > |
<a href =" presentation . html " > Presentation </ a > |
<a href =" contact . html " > Contact </ a >
</ nav >
ES
<main >
< article >
<h2 > Bienvenue dans la formation HTML5 </ h2 >
OF

< section >

<h3 >Qu ' est - ce que HTML5 ? </ h3 >
<p > HTML5 est le standard actuel pour structurer
le contenu des pages web ... </ p >
PR

</ section >

< section >
<h3 > Ce que vous allez apprendre </ h3 >
<ul >
<li > Structure et balises HTML5 </ li >
<li > Semantique web </ li >
<li > Formulaires </ li >
<li > Collaboration avec Git </ li >
</ul >
</ section >
< figure >
< img src =" images / html5 . png "
alt =" Logo officiel HTML5 "
width =" 150 " >
< figcaption > Le logo HTML5 - Standard du Web </
figcaption >
</ figure >
</ article >

[Link]
< aside > 8 [Link]

<h3 > Ressources </ h3 >

<ul >
<li >
Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT

U R
SE
ES
OF
PR

[Link] 9 [Link]

Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Corrigé Exercice 5.1  Formulaire de contact
CORRIGÉ  Exercice 5.1 ([Link])

<! DOCTYPE html >

< html lang =" fr " >
<head >
< meta charset =" UTF -8 " >
< meta name =" viewport " content =" width = device - width ,
initial - scale =1.0 " >
< title > Contact - Formation HTML5 </ title >
</ head >
<body >
< header >
<h1 > Contactez - nous </ h1 >
</ header >

R
<nav >
<a href =" index . html " > Accueil </a > |

U
<a href =" presentation . html " > Presentation </ a > |
<a href =" contact . html " > Contact </ a >
</ nav >
<main >
SE
< article >
<h2 > Formulaire de contact </ h2 >
< form action = "#" method =" POST " >
ES
<p >
< label for =" nom " > Nom : </ label ><br >
< input type =" text " id =" nom " name = " nom "
placeholder = " Votre nom " required >
OF

</p >
<p >
< label for =" prenom " > Prenom : </ label ><br >
< input type =" text " id =" prenom " name = " prenom "
PR

placeholder = " Votre prenom " required >

</p >
<p >
< label for =" email " > Email : </ label >< br >
< input type =" email " id = " email " name = " email "
placeholder = " votre@email . com " required >
</p >
<p > Niveau :
< input type =" radio " name =" niveau "
value =" debutant " id = " deb " >
< label for =" deb " > Debutant </ label >
< input type =" radio " name =" niveau "
value =" avance " id =" av " >
< label for =" av " > Avance </ label >
</p >
<p >
< label for =" message " > Message : </ label > <br >
< textarea id = " message " name =" message "

[Link]  10 
rows = "6" cols =" 40 "
placeholder = " Votre message ...[Link]
" ></
textarea >
</p >
<p >
Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Grille d'évaluation et suivi
Grille d'évaluation projet nal
Critère /20 Descripteurs
Structure HTML5 /4 DOCTYPE + html + head + body
corrects et valides
Balises sémantiques /4 header, nav, main, article, section, footer
présents
Contenu riche /3 Titres hiérarchisés, textes formatés, listes
Images et liens /2 Au moins 2 images (avec alt) + navigation
inter-pages
Formulaire /3 Tous les types de champs, labels,
validation required
Git / GitHub /4 Historique propre, messages de commit

R
descriptifs, PR ouverte
Total : /20

U
Tableau de suivi des étudiants
Consigne  Suivi GitHub
SE
Pour suivre la progression, allez sur [Link]/joelyk → Pull Requests → vous
verrez tous les travaux soumis avec date et auteur.
ES
Utilisez aussi : git log all oneline pour l'historique global.
OF

Etudiant Ex.1 Ex.2 Ex.3 Ex.4-5 Projet

PR

Gestion Git avancée  Professeur

[Link]  11  [Link]
Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Organiser les branches par promotion
Structure de branches recommandée
main <- version stable du cours
corrections/semaine-1 <- corrections S1 (public)
corrections/semaine-2 <- corrections S2 (public)
promo/2024-dschang <- branche promo courante
dev/nouveaux-modules <- nouveaux contenus en cours

Commandes de gestion de promotion

Gestion des Pull Requests en lot
# Lister tous les PRs ouverts
gh pr list state open

R
# Voir un PR specifique
gh pr view 15

U
# Ajouter un commentaire global
gh pr comment 15 body "Bon debut ! Attention au DOCTYPE."
SE
# Rejeter un PR avec explications
gh pr review 15 request-changes
body "Manque : balise nav + alt sur images"
ES
# Stats commits par etudiant (ce mois)
git shortlog -sn since="1 month ago"
OF

# Voir les fichiers modifies par un etudiant

git log author="Jojo" name-only oneline
PR

[Link]  12  [Link]
Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Publier les corrections de façon contrôlée
Workow corrections hebdomadaires
# Apres chaque seance, publier la correction
git checkout -b corrections/semaine-3

# Ajouter le fichier corrige

cp [Link] corrections/semaine-3/[Link]
git add corrections/
git commit -m "corrections: semaine 3 - semantique HTML5"
git push origin corrections/semaine-3

# Sur GitHub : ouvrir PR corrections/semaine-3 -> main

# Les etudiants peuvent voir et commenter

# Merger apres 24h

R
git checkout main
git merge corrections/semaine-3

U
git push origin main

Gérer les conits étudiants

SE
Situation fréquente  Conit de merge
Quand deux étudiants modient le même chier, un conit apparaît.
ES
Procédure à enseigner :
1. git pull origin main (récupérer les changements)
OF

2. Ouvrir VS Code : les conits sont indiqués en rouge

3. Choisir la version à garder, supprimer les marqueurs 
4. git add . puis git commit -m "fix: resolution conflit"
PR

5. git push origin ma-branche

Séquence de cours détaillée  Semaine par semaine

Semaine 1  Environnement et Git (2h)
Déroulement Séance 1 (2h)
0:000:20  Présentation de la formation, objectifs, règles
0:200:45  Installation VS Code + extensions + Git
0:451:15  Création comptes GitHub, fork du dépôt joelyk
1:151:45  Première page HTML5 (Ex. 1.1) + premier commit
1:452:00  Tour de table, questions, vérication des commits
Homework : Vérier que tous les étudiants ont un commit sur GitHub

[Link]  13  [Link]
Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT
Verication n S1 (professeur)
# Verifier que les etudiants ont bien cree leurs repos
# Aller sur [Link]/joelyk -> Forks
# Compter le nombre de forks = nb etudiants actifs

# Envoyer un message dans le README

echo "Bravo promotion 2024 ! X etudiants ont fork ce depot."  [Link]
git commit -am "news: bienvenue promo 2024 - X etudiants"
git push origin main

Semaine 2  Module 1 : Structure HTML5 (2h)

Déroulement Séance 2 (2h)
0:000:10  Correction homework, vérication commits
0:100:40  Cours : anatomie d'une balise, structure minimale

R
0:401:10  Démo live : coder ensemble [Link] de zéro
1:101:45  Exercice 1.1 individuel (chaque étudiant tape son code)

EU
1:452:00  Commit collectif, push, vérication sur GitHub
Conseil : Projeter votre écran et coder en direct avec les étudiants
SS
Semaines 36  Modules 2 à Projet nal
Rythme type de chaque séance (2h)
E

Phase 1 (20 min)  Rappel + correction exercice précédent

Phase 2 (40 min)  Cours théorique + démo live codée en direct
OF

Phase 3 (40 min)  Exercice pratique individuel (les étudiants codent)

Phase 4 (20 min)  Commit + push collectif + questions
Règle d'or : Personne ne quitte la salle sans avoir fait son commit.
PR

Référence rapide Git  Professeur

[Link]  14  [Link]
Formation HTML5  Guide Professeur & Git Manager USAGE INTERNE UNIQUEMENT

Usage professeur
Commande

git log all oneline graph

Vue globale de toutes les branches
git shortlog -sn
Nombre de commits par auteur
git log author="nom"
Commits d'un étudiant spécique
git diff branche1..branche2
Comparer deux branches
gh pr list
Lister tous les PRs ouverts
gh pr review N approve
Approuver un PR étudiant
gh pr review N
Demander des corrections
request-changes
Toutes les branches (locales + remote)

R
git branch -a
Synchroniser tous les forks

U
git fetch all

git stash
Mettre de côté des modications
Taguer une version du cours
git tag v1.0
SE
git push origin tags
Pousser les tags
ES

Rappel  Objectif nal

OF

À la n de la formation, le dépôt [Link]/joelyk doit contenir :

ˆ Les forks de tous les étudiants ayant participé

PR

ˆ Des commits réguliers de chaque étudiant sur 6 semaines

ˆ Les Pull Requests du projet nal de chaque étudiant
ˆ Les corrections hebdomadaires publiées dans corrections/

Cette activité rend le dépôt vivant et visible par les recruteurs !

Document rédigé par M. YANKAM NGUEGUIM JOEL STÉPHANE • GROUPE GENIUS

RÉPÉTITION

DOCUMENT CONFIDENTIEL  USAGE PROFESSEUR UNIQUEMENT

[Link] • [Link] • [Link]/joelyk

[Link]  15  [Link]