Objectif du workshop Ce workshop a pour but de permettre aux apprenants d’analyser, comprendre et implémenter un projet web complet en HTML, CSS et JavaScript. L’objectif principal est d’apprendre à lire, comprendre et enrichir un code existant — une compétence essentielle pour tout développeur web.

Compétences visées Comprendre la structure d’un projet web (HTML / CSS / JS)

Identifier le rôle de chaque fichier et le lien entre eux

Manipuler le DOM avec JavaScript

Travailler en équipe (squad) et répartir les tâches efficacement

Suivre un processus d’intégration collaborative et de débriefing

Déroulement du Workshop Étape 1 – Démonstration du résultat final Le formateur présente le résultat final du projet :

Structure du site

Design et interactions

Fonctionnalités principales (via le JavaScript)

Objectif : permettre aux apprenants d’avoir une vision globale du rendu attendu avant de plonger dans le code.

Étape 2 – Formation des Squads Les apprenants sont répartis en équipes de 3 personnes. Chaque squad représente une mini-équipe de développement :

L’objectif est de favoriser l’apprentissage collaboratif et la communication technique entre membres.

Étape 3 – Lancement du Workshop Le formateur partage le code source de base :

Un fichier index.html

Un fichier style.css

Un fichier script.js avec des méthodes à compléter et des commentaires détaillés

Les apprenants doivent :

Lire et comprendre le code fourni

Implémenter les fonctions manquantes en suivant les commentaires

Tester et améliorer le rendu final

Le formateur circule pour accompagner les squads, répondre aux questions et encourager l’analyse en équipe.

Étape 4 – Suivi et accompagnement Le formateur suit :

L’avancement de chaque équipe

La qualité de la communication au sein du squad

Le respect des consignes techniques

En cas de blocage, le formateur guide sans donner la solution directement, pour encourager la recherche et le raisonnement collectif.

Étape 5 – Débriefing collectif Chaque squad présente :

Sa compréhension du code

Les difficultés rencontrées

Les apprentissages réalisés

Le formateur conclut avec :

Une mise en valeur des bonnes pratiques observées

Une synthèse collective des erreurs fréquentes

Une valorisation du travail en équipe et de l’autonomie

Livrable attendu Projet fonctionnel localement (HTML, CSS, JS)

Code JavaScript complété avec les méthodes demandées

Documentation rapide du travail d’équipe (qui a fait quoi)