Albi, France
Projets

Cours TW2 — Technologies du Web 2 (Université Champollion)

Aperçu du projet : Cours TW2 — Technologies du Web 2 (Université Champollion)
1 septembre 2025
TW2 — Technologies du Web 2 est la refonte de mon cours de Licence à l'Université Champollion (Albi). Comme TW3, il est passé de Nextra à Fumadocs pour une meilleure navigation, et s'est doté d'un système de quiz et d'exercices suivis : l'étudiant repère immédiatement ce qu'il doit réviser.

🎯 Objectifs

  • Offrir des fondations front-end solides et accessibles
  • Faciliter la navigation dans les modules du cours
  • Intégrer des quiz auto-évalués et des exercices suivis
  • Aider les étudiants à cibler les points ratés et à réviser efficacement

📋 Vue d'ensemble

Élément
Détail
PublicÉtudiants L — Université Champollion (Albi)
RôleDéveloppeur & concepteur pédagogique
Ancien frameworkNextra
Nouveau frameworkFumadocs
FormatCours modulaires en MDX + quiz + suivi
LivrablePlateforme en ligne + tableau de bord

🧩 Fonctionnalités clés

  • Navigation Fumadocs : sommaire latéral, recherche et progression par chapitre
  • Quiz intégrés : QCM à correction immédiate et explications détaillées
  • Exercices suivis : scores et chapitres terminés mémorisés dans le navigateur
  • Ciblage des révisions : les points à revoir sont mis en évidence automatiquement
  • Contenus MDX : cours riches et maintenables, sans friction éditoriale
  • Responsive & accessible : lecture optimale sur tous les écrans

🧠 Modules abordés

Module
Contenu
Introduction au WebFonctionnement du web, HTTP, navigateurs et outils
HTML sémantiqueStructure de document, accessibilité, balises modernes
CSS : FondamentauxSélecteurs, cascade, spécificité, modèle de boîte
Flexbox & GridMise en page bidimensionnelle et responsive design
JavaScript : BasesTypes, variables, opérateurs, structures de contrôle
Manipulation du DOMSélection, modification et création d'éléments HTML
FonctionsDéclaration, portée, closures, fonctions fléchées
ÉvénementsÉcoute, propagation et délégation d'événements
Modules & ClassesModules ES6, import/export, classes et héritage
JSON & Stockage localJSON, localStorage, sessionStorage
AsynchronicitéCallbacks, Promises, async/await et fetch API

⚙️ Stack technique

Technologie
Usage
Type
FumadocsFramework de docs & navigationFramework
MDXContenu des coursContenu
Next.jsRendu des pagesFramework
TypeScriptTypage statiqueLangage
VercelDéploiement et hébergementInfra

🛠️ Méthode de refonte

De Nextra à Fumadocs : ma démarche

1
Audit de la base NextraInventaire des modules front-end, de la navigation existante et des frictions de parcours pour les étudiants.
2
Migration vers FumadocsRéécriture de la structure de docs pour une navigation latérale, une recherche et une progression par chapitre fluides.
3
Système de quiz & exercicesAjout de QCM auto-évalués et d'un suivi persistant des scores côté navigateur.
4
Tableau de bord & révisionsMise en évidence automatique des points à revoir pour cibler les révisions efficacement.

⚡ Défis relevés

  • Repenser la navigation dans une masse de cours importante sans perdre l'étudiant
  • Garantir une migration fidèle du contenu Nextra vers Fumadocs
  • Concevoir un suivi de progression léger, sans backend (stockage navigateur)
  • Préserver performance et accessibilité sur tous les appareils

📊 Résultats

Indicateur
Valeur
Modules11 (Introduction → Asynchronicité)
QuizQCM à correction immédiate
SuiviScores & chapitres terminés (navigateur)
NavigationFumadocs (sommaire, recherche, progression)
Une plateforme pédagogique moderne, navigable et outillée pour la réussite des étudiants : les quiz et le suivi de progression transforment la révision en parcours ciblé.

❓ Questions fréquentes

FAQ — cours TW2 (Fumadocs)