FACULTE DES SCENCES ET DE GENIE FSG
DÉPARTEMENT INFORMATIQUE
LICENCE 3 — WEB STATIQUE
PROJET DE FIN DE SESSION
Développement Web
HTML5 · CSS3
Année académique : 2025 – 2026 Coefficient : 70% de la note finale
Session : I Équipe : 2 étudiants
Unité d'enseignement : Développement Date de remise : 24 juillet 2026
Web Soutenance : 30 ou 31 juillet 2026 (30%)
1. Contexte et objectifs du projet
Dans le cadre du cours de Développement Web statique du session 2, chaque groupe d'étudiants
devra concevoir et réaliser un site web complet, fonctionnel et responsive, en utilisant uniquement les
technologies du web standard : HTML5, CSS3, JAVASCRIPT. Ce projet vise à évaluer vos
compétences acquises tout au long du session.
Objectifs pédagogiques
• Maîtriser la structure sémantique d'une page web avec HTML5
• Concevoir des interfaces modernes et adaptatives avec CSS3 pur
• Implémenter des fonctionnalités interactives avec JavaScript.
• Organiser un projet web de façon professionnelle (dossiers, fichiers, conventions)
• Documenter et présenter un travail technique à l'oral
2. Sujet du projet
Site web de gestion d'événements universitaires
"EduEvent — La plateforme des événements de votre campus"
Vous devez concevoir et développer une plateforme web permettant à la communauté universitaire
(étudiants, professeurs, administration) de consulter, rechercher et s'inscrire aux événements
organisés sur le campus : conférences, ateliers, compétitions sportives, activités culturelles,
soutenances, etc.
3. Pages obligatoires
Page 1 — Accueil ([Link])
• En-tête (header) avec logo, navigation principale et bouton de connexion
• Section héro (hero section) avec titre accrocheur, sous-titre et bouton d'appel à l'action
• Section des événements à la une (3 à 4 cartes d'événements en vedette)
• Section statistiques animées (nombre d'événements, participants, catégories)
• Section newsletter avec formulaire d'abonnement
• Pied de page (footer) avec liens, réseaux sociaux et copyright
Page 2 — Liste des événements ([Link])
• Barre de recherche en temps réel (filtrage dynamique avec JavaScript)
• Filtres par catégorie (ateliers, conférences, sports, culture, etc.)
• Filtres par date (aujourd'hui, cette semaine, ce mois)
• Affichage en grille et en liste (toggle vue)
• Pagination ou chargement progressif (load more)
• Carte de chaque événement avec image, titre, date, lieu et bouton
Page 3 — Détail d'un événement ([Link])
• Image principale de l'événement (bannière)
• Informations complètes : titre, description, date, heure, lieu, organisateur
• Compteur de places restantes
• Formulaire d'inscription à l'événement avec validation JavaScript
• Section commentaires / témoignages
• Partage sur les réseaux sociaux (liens)
• Bouton retour à la liste
Page 4 — Espace étudiant ([Link])
• Formulaire d'inscription / connexion avec validation complète
• Profil de l'étudiant (nom, photo, faculté, programme, niveau, année)
• Liste de mes événements inscrits (données statique)
• Possibilité d'annuler une inscription
Page 5 — À propos ([Link])
• Présentation de la plateforme EduEvent
• Présentation de l'équipe de développement (photos, noms, rôles)
• Formulaire de contact avec validation
• Carte interactive (iframe Google Maps ou CSS simulé)
• FAQ avec accordéon JavaScript
5. Structure du projet
La structure de dossiers suivante est obligatoire. Tout projet ne respectant pas cette organisation sera
pénalisé de 5 points.
EduEvent/
├── [Link]
├── [Link]
├── [Link]
├── [Link]
├── [Link]
│
├── css/
│ ├── [Link] (styles globaux)
│ ├── [Link] (media queries)
│ └── [Link] (transitions & keyframes)
│
├── js/
│ ├── [Link] (script global)
│ ├── [Link] (filtres & recherche)
│ ├── [Link] (inscription événement)
│ └── [Link] (gestion profil & localStorage)
│
├── images/
│ ├── [Link]
│ ├── [Link]
│ └── events/ (images des événements)
│
├── data/
│ └── [Link] (données JSON des événements)
│
└── [Link] (documentation du projet)