Catalogue d’activités exploitables en correction d’évaluation
Objectif Activité Modalité Outil utilisé Description de
pédagogique proposée l'activité
visé
Identifier les Défi "Trouve Visio CodePen L’apprenant reçoit
erreurs l’erreur" tutorat un extrait de code
techniques partagé fautif. Il doit
dans un code identifier au moins
HTML 3 erreurs
(structure,
syntaxe, style).
L’erreur est
corrigée en direct.
Travailler la Reconstitution Autonomie CodePen L’apprenant
structuration de page + visio complète un
HTML modèle débrief squelette HTML
attendue avec les balises
manquantes. Une
correction lui est
fournie pour
vérification avant
débrief en visio.
Apprendre à Oral guidé Visio Partage d’écran L’apprenant relit sa
justifier une "Explique ton propre correction
correction choix" et explique à voix
haute pourquoi il a
fait tel choix.
Feedback
immédiat donné
par la formatrice.
Prendre Comparaison Visio Capture Deux codes
conscience visuelle "Avant d’écran ou affichés à l’écran :
des / Après" Genially un sale, un propre.
mauvaises Discussion
pratiques collective autour
des erreurs
repérées et des
solutions.
Renforcer Fiche mémo Autonomie Genially L’apprenant vérifie
l’autonomie auto- interactif + PDF son prochain
post-feedback vérification téléchargeable livrable avec une
checklist fournie. Il
peut poser ses
questions en canal
Discord si besoin.
Activité n°1 : Défi "Trouve l’erreur"
Objectif pédagogique visé :
Identifier les erreurs techniques dans un code HTML simple, les nommer et les corriger
à l’oral.
Modalité :
Visio tutorat partagé (en individuel ou petit groupe)
Outil utilisé :
Partage d’écran sur VS Code, CodePen ou tout éditeur HTML en ligne
Durée estimée :
20 à 30 minutes
Déroulé de l’activité :
1. Le formateur partage un extrait de code fautif ou demande à l’apprenant de
partager un extrait de son propre code.
2. L’apprenant lit le code et identifie à voix haute au moins 3 erreurs techniques.
3. L’apprenant propose des corrections en justifiant ses choix.
4. La correction est complétée ou validée en direct.
5. Un rappel de bonnes pratiques est formulé à la fin.
Exemple de code fautif à corriger :
<html>
<head>
<title>Ma page</title>
<link rel="stylesheet" href="style.css">
</head>
<footer>
<p>Contactez-moi</p>
</footer>
<body>
<h1>Bienvenue</h1>
<br>
<p>Voici mon contenu</p>
</body>
</html>
https://codepen.io/Lifties/pen/PwPPQzq
Erreurs attendues :
• Balise <footer> placée en dehors de <body>
• Balise <body> mal positionnée (après <footer>)
• Utilisation de <br> pour espacer au lieu du CSS
• Structure non conforme : absence de <main>, de sections sémantiques
Variante possible :
Proposer deux extraits de difficulté différente selon le niveau des apprenants. L’un peut
être issu de leur propre travail, l’autre générique.
Activité 2 : Reconstitution de page modèle
Objectif pédagogique visé :
Consolider la structure HTML attendue en invitant l’apprenant à reconstruire une page
incomplète ou désorganisée.
Modalité :
Travail en autonomie suivi d’un tutorat en visio (partage d’écran pour correction)
Outil utilisé :
Fichier HTML à compléter sur CodePen
Durée estimée :
20 minutes d’autonomie + 15 minutes de correction en visio
Déroulé de l’activité :
1. Le formateur transmet un fichier HTML incomplet ou mal structuré (balises
manquantes, désordre, erreurs classiques).
2. L’apprenant le complète en autonomie : ajout des balises, structuration correcte.
3. En visio, l’apprenant partage son écran et explique sa reconstruction.
4. Le formateur apporte une correction ou des ajustements au besoin.
5. Une version modèle propre est fournie à la fin.
Exemple d’extrait de départ fourni :
<html>
<head>
<title></title>
</head>
<body>
<h1>Mon titre</h1>
<p>Texte d’introduction</p>
<!-- Il manque ici une image et une section supplémentaire -->
</body>
</html>
https://codepen.io/Lifties/pen/vENNdXo
Attendus :
• Ajout du <meta charset="UTF-8">
• Ajout d’une image avec alt
• Ajout de balises <main>, <section>, bonne indentation
• Complétion du <title> et structure propre
Correction : https://codepen.io/Lifties/pen/NPGGypb
Activité 3 : Oral guidé “Explique ton choix”
Objectif pédagogique visé :
Amener l’apprenant à développer sa capacité d’analyse et de justification de ses choix
techniques.
Modalité :
Tutorat individuel en visio (oral synchrone)
Outil utilisé :
Partage d’écran sur VS Code ou éditeur HTML/CSS utilisé par l’apprenant
Durée estimée :
20 minutes
Déroulé de l’activité :
1. L’apprenant ouvre son fichier HTML/CSS corrigé ou retravaillé.
2. Il relit son code à voix haute, ligne par ligne ou bloc par bloc.
3. À chaque étape, il explique pourquoi il a utilisé telle balise, telle classe, tel style.
4. La formatrice intervient pour demander des précisions, poser des questions ou
proposer des alternatives.
5. Un feedback immédiat est donné sur les points justifiés ou perfectibles.
6. Une synthèse des bonnes pratiques peut être faite à l’oral ou envoyée ensuite en
support.
Exemples de questions à poser :
• Pourquoi as-tu choisi cette balise ici ?
• Que se passerait-il si on la retirait ?
• Pourquoi cette classe s’appelle comme ça ?
• Était-ce la meilleure manière de créer cet espace ou ce style ?
• Est-ce du style ou du contenu ?
Activité 4 : Comparaison visuelle “Avant / Après”
Objectif pédagogique visé :
Faire prendre conscience des mauvaises pratiques de code en comparant visuellement
deux versions opposées : un code “sale” et un code propre.
Modalité :
Visio tutorat collectif ou individuel (discussion à l’oral)
Outil utilisé :
Capture d’écran (ou diapo Genially) contenant deux versions côte à côte
Durée estimée :
20 à 30 minutes
Déroulé de l’activité :
1. Le formateur partage un écran affichant deux extraits de code HTML ou CSS :
o à gauche : une version “brouillon” (indentation mauvaise, balises mal
choisies, répétitions, <br>, etc.)
o à droite : une version propre et structurée
2. L’apprenant ou le groupe observe, compare et commente :
o Qu’est-ce qui gêne dans la version de gauche ?
o Qu’est-ce qui est mieux à droite ? Pourquoi ?
3. Le formateur synthétise les erreurs repérées et reformule les bonnes pratiques à
appliquer.
Exemples d’éléments comparés :
• <br><br> vs margin-bottom: 20px;
• <div class="style1"> vs <section id="presentation">
• Code sans indentation vs code indenté proprement
• HTML sans balises sémantiques vs structuration logique (<main>, <footer>, etc.)
Extraits de code :
Code “mauvais” :
Erreurs repérables :
• Balise <html> non fermée
• <link> sans rel="stylesheet"
• Classe générique style1 (peu lisible)
• <br> pour espacer
• Pas de structuration (<main>, <section>)
• Indentation incorrecte
• Footer non séparé visuellement
Code “propre” :
Bonnes pratiques visibles :
• Balises HTML5 bien utilisées (<header>, <main>, <section>, <footer>)
• meta bien déclarés
• link complet
• Texte structuré sans <br>
• id="bio" = nom clair
• Indentation cohérente
CSS “mauvais” :
Erreurs repérables :
• Couleur de fond trop vive, peu lisible
• Classe générique .style1 (aucun sens)
• margin-left: 200px = rigidité totale (non responsive)
• font-size: 24px appliqué en bloc sans hiérarchie
• Manque d’unité, pas de structure
CSS “propre” :
Bonnes pratiques visibles :
• Palette sobre et contrastée
• Police moderne et lisible via Google Fonts
• Utilisation de #bio au lieu de .style1
• Mise en page centrée, souple, responsive
• padding, margin, box-shadow, border-radius pour l’esthétique
Activité 5 : Fiche mémo auto-vérification
Objectif pédagogique visé
Renforcer l’autonomie de l’apprenant en lui fournissant des repères clairs pour relire et
valider son propre code avant remise.
Modalité
Autonomie (activité asynchrone avant rendu ou re-soumission)
Outil utilisé
Fiche checklist interactive (Genially ou PDF téléchargeable), accompagnée d’un canal
de questions sur Discord
Durée estimée
10 à 15 minutes par livrable
Déroulé de l’activité
1. L’apprenant reçoit une fiche mémo contenant des points clés à vérifier dans son
code HTML/CSS.
2. Il lit son propre fichier et coche les cases au fur et à mesure (en version
interactive ou papier).
3. En cas de doute, il peut poser ses questions sur un canal dédié Discord ou lors
du prochain tutorat.
4. Cette fiche est utilisée avant chaque rendu technique comme réflexe de
relecture.
https://www.canva.com/design/DAGtbu4AqNc/V0V4i68jYVcU9_EqiYTIEQ/edit?utm_
content=DAGtbu4AqNc&utm_campaign=designshare&utm_medium=link2&utm_so
urce=sharebutton
