Projet Final HTML5/CSS3

Universités Américaines des Sciences Modernes D’Haiti

UNASMOH

Facultes des Sciences Pures et Informatiques

FASPI

PROJET FINAL
Création d'un site web statique responsive
Module HTML5 / CSS3

Travail de groupe : 4 étudiants maximum

Durée du projet : 30 jours
Livrable attendu : site web de 10 pages minimum

Prof: Jean Denis Laguerre

Page 1 / 8
 Projet Final HTML5/CSS3

1. PRÉSENTATION DU PROJET
Ce projet de fin de module a pour objectif de mettre en pratique l'ensemble des compétences acquises
durant le cours (structure HTML5 sémantique, mise en page CSS3, responsive design, navigation
avancée, accessibilité) à travers la réalisation d'un site web statique complet, professionnel et responsive.

MODALITÉS
• Travail en groupe de 4 étudiants maximum (groupes de 2 ou 3 également acceptés)
• Durée du projet : 30 jours
• Chaque groupe doit choisir une entreprise ou organisation réellement existante comme base de son
projet
• Le site doit contenir 10 pages minimum
• Réalisation sans framework CSS (Bootstrap, Tailwind…) ni générateur automatique : le but est de
démontrer une maîtrise personnelle du HTML et du CSS

Important: choix d'une entreprise existante

Le groupe s'inspire d'une vraie entreprise (nom, secteur d'activité, logo, produits/services, ton de
communication). Les coordonnées de contact (adresse, téléphone, email) doivent être fictives ou
clairement identifiées comme un exercice académique, afin de ne jamais rediriger de vrais clients vers le
groupe.

2. CHOIX DU SUJET : 8 OPTIONS DÉTAILLÉES (UNE SEULE PAR GROUPE)

Option A : Site e-commerce

Choisir une boutique en ligne réelle : ex. Jumia, Amazon, Shein, Zara, Nike, ou une boutique locale
connue.
Contenu attendu :
• Mise en avant de vraies catégories de produits de l'entreprise choisie (mode homme/femme/enfant,
électronique, chaussures…)
• Fiches produits réalistes avec prix, description, photos, avis clients fictifs
• Etc…

Option B: Site vitrine d'entreprise (services professionnels)

Choisir une entreprise réelle : ex. une banque (Ecobank, BNC , UNIBANK ), une compagnie
d'assurance, un cabinet d'avocats, un cabinet d'architecture, une entreprise de construction ou de conseil.
Contenu attendu :
• Présentation claire des services professionnels proposés (comptes bancaires, prêts, assurance
auto/habitation, conseil juridique…)
• Espace « Actualités » ou « Ressources » (articles, conseils pratiques liés au secteur)
• Mise en avant de chiffres clés (nombre de clients, années d'expérience, agences/bureaux)
• Éventuellement une page « Espace client » statique (simulation de connexion)

Prof: Jean Denis Laguerre

Page 2 / 8
 Projet Final HTML5/CSS3

Option C: Site d'une ONG / organisation humanitaire

Choisir une ONG réelle : ex. UNICEF, Croix-Rouge, Médecins Sans Frontières, WWF, ou une ONG
locale connue.
Contenu attendu :
• Présentation des programmes/projets réels menés par l'organisation
• Page « Faire un don » (formulaire statique, sans transaction réelle)
• Témoignages de bénéficiaires ou de bénévoles
• Chiffres d'impact (nombre de personnes aidées, pays d'intervention)

Option D : Blog / média en ligne

Choisir un blog ou site média réel comme référence de style : voyage, cuisine, technologie, mode, sport
ou actualités.
Contenu attendu :
• Au moins 4 articles complets rédigés (introduction, corps de texte structuré, image, conclusion)
• Système de catégories/tags (mise en page uniquement, sans base de données)
• Section commentaires statique sous les articles
• Newsletter (formulaire d'inscription email (simulation))

Option E : Hôtel ou restaurant

Choisir un établissement réel : ex. une chaîne hôtelière (Marriott, Ibis, Radisson…) ou un restaurant
connu.
Contenu attendu :
• Présentation des chambres/menus avec photos, tarifs, descriptions
• Système de réservation statique (formulaire dates + nombre de personnes)
• Page « Événements » (mariages, séminaires) si pertinent
• Avis clients, note moyenne, galerie photo de l'établissement

Option F: École, université ou centre de formation

Choisir un établissement réel : université locale ou internationale connue, école de formation
professionnelle.
Contenu attendu :
• Présentation des filières/programmes proposés
• Procédure d'admission détaillée (conditions, calendrier, formulaire de pré-inscription)
• Vie étudiante (clubs, campus, témoignages d'étudiants)
• Corps professoral (présentation de quelques enseignants, avec photos)

Option G : Clinique / centre médical ou dentaire

Prof: Jean Denis Laguerre

Page 3 / 8
 Projet Final HTML5/CSS3

Choisir un établissement réel : hôpital, clinique privée ou cabinet dentaire connu.

Contenu attendu :
• Présentation des spécialités médicales et des médecins (photos et parcours)
• Système de prise de rendez-vous statique (formulaire : nom, spécialité souhaitée, date préférée)
• Informations pratiques (urgences, horaires, assurances acceptées)
• Conseils santé / articles de prévention

Option H : Compagnie aérienne, agence de voyage ou salle de sport

Choisir une entreprise réelle dans l'un de ces trois secteurs : ex. Air France, Royal Air Maroc, une
agence de voyage locale, une salle de sport type Basic-Fit.
Contenu attendu :
• Compagnie aérienne : destinations, classes de vol, formulaire de recherche de vol (statique)
• Agence de voyage : circuits/forfaits proposés avec prix, galerie de destinations
• Salle de sport : plannings de cours, présentation des coachs, formules d'abonnement

Option I (bonus, facultative) : Pays participant au Mondial 2026

Choisir un pays qualifié pour la Coupe du Monde 2026 (48 équipes, États-Unis / Canada / Mexique, du
11 juin au 19 juillet 2026) et représenter son office de tourisme national ou sa fédération de football,
traité comme une véritable « entreprise/organisation » de référence.
Contenu attendu :
• Présentation du pays (culture, géographie, atouts touristiques)
• Historique et palmarès de la sélection nationale en Coupe du Monde
• Parcours dans le Mondial 2026 (groupe, résultats, joueurs clés), toutes les données doivent être
sourcées (Wikipédia, [Link], presse sportive) ; si le tournoi n'est pas terminé au moment du
rendu, le parcours peut être complété par un scénario fictif clairement signalé comme tel
• Galerie photo (stades, supporters, paysages du pays)

3. STRUCTURE OBLIGATOIRE DU SITE : 10 PAGES MINIMUM

Quel que soit le sujet choisi, le site doit contenir ces 4 pages suivantes, obligatoires et communes à tous :

3.1 Accueil ([Link])

Bannière principale (hero), présentation courte de l'entreprise, mise en avant de produits/services phares,
chiffres clés ou témoignages, appel à l'action (bouton vers Services ou Contact).

3.2 À propos
Cette page doit impérativement contenir les sections suivantes (chacune clairement identifiée, en sous-
titres) :
• Histoire de l'entreprise (date de création, fondateur, évolution)
• Mission (pourquoi l'entreprise existe)
• Vision (où elle veut aller à long terme)
• Objectifs (ce qu'elle cherche à accomplir concrètement)
Prof: Jean Denis Laguerre
Page 4 / 8
 Projet Final HTML5/CSS3

• Public cible (à qui s'adressent ses produits/services)

• Valeurs de l'entreprise
• Équipe / dirigeants (facultatif mais recommandé : photos, noms, postes)

3.3 Nos services (ou Nos produits / Nos catégories selon le sujet)
Cette page doit obligatoirement être accessible via un menu déroulant (sous-menu) dans la navigation
(voir section 4), avec au moins 3 sous-pages détaillées, une par service/produit/catégorie proposé (voir
les exemples donnés pour chaque option en section 2).

3.4 Contact
• Formulaire HTML (nom, email, téléphone facultatif, sujet, message, bouton d'envoi)

3.5 Pages complémentaires (pour atteindre 10 pages minimum)

À compléter selon le sujet choisi, par exemple :
• Galerie / Portfolio / Réalisations
• Témoignages clients / Avis
• Blog ou Actualités (avec 2-3 articles)
• FAQ
• Carrières / Rejoignez-nous
• Politique de confidentialité / Mentions légales
• Page de connexion / inscription (statique, sans traitement réel)

4. MENU DÉROULANT OBLIGATOIRE (SOUS-MENU)’

La navigation principale (<nav>) doit inclure au moins un menu déroulant (dropdown), typiquement sur
« Nos services », affichant les sous-pages au survol (desktop) et au clic/tap (mobile).
Exigences techniques :
• Structure HTML en liste imbriquée : un <ul> principal contenant un <li> avec un second <ul> en
sous-menu
• Le sous-menu est cliquable au clavier (accessible via tabindex, pas seulement au survol souris)
• En version mobile, le sous-menu doit rester utilisable (accordéon ou clic pour déplier, pas seulement
:hover qui ne fonctionne pas au tactile)
• Style soigné : transition d'apparition, ombre légère, indicateur visuel (flèche ▾) signalant qu'il s'agit
d'un sous-menu

Prof: Jean Denis Laguerre

Page 5 / 8
 Projet Final HTML5/CSS3

5. CAHIER DES CHARGES TECHNIQUE GÉNÉRAL

Structure HTML5
• Balises sémantiques obligatoires : <header>, <nav>, <main>, <section>, <article>, <aside>,
<footer>
• Hiérarchie de titres logique (h1 unique par page, puis h2, h3…)
• Attributs alt sur toutes les images
• Menu de navigation identique (avec le sous-menu) présent sur toutes les pages du site

CSS3 et responsive design

• Feuille de style externe uniquement
• Utilisation de Flexbox et/ou CSS Grid
• Design responsive avec au minimum 3 breakpoints : Mobile (≤ 480px), Tablette (481–1024px),
Desktop (≥ 1025px)
• Menu hamburger en mobile, en plus du sous-menu déroulant
• Palette de couleurs cohérente (2 à 3 couleurs principales + neutres), typographie cohérente
• Effets soignés : transitions au survol, animations légères, ombres, arrondis, sans excès
• Images bien optimisées et dimensionnées

Accessibilité et qualité
• Contraste suffisant entre texte et fond
• Navigation entièrement possible au clavier, y compris le sous-menu
• Aucun élément tronqué ou superposé, à aucune taille d'écran
• Site testé sur au moins 3 tailles d'écran

6. OUTILS DE DÉVELOPPEMENT CONSEILLÉS

• Visual Studio Code: éditeur gratuit, très complet.

• Sublime Text 3 : éditeur léger et rapide, alternative appréciée pour sa simplicité.
• Navigateur avec outils développeur : Google Chrome ou Firefox (mode « Inspecter » pour tester
le responsive via l'outil « Toggle device toolbar »)

7. LIVRABLES

• Dossier du projet complet (HTML, CSS, images), compressé en .zip.

• Présentation PowerPoint (5 à 8 diapositives) comprenant :

✓ Les membres du groupe et le rôle de chacun.

✓ L'entreprise choisie (présentation et secteur d'activité).
✓ Le projet réalisé et son objectif.
✓ Les principales pages et fonctionnalités du site.
✓ Les difficultés rencontrées et ce que le groupe a appris.

Prof: Jean Denis Laguerre

Page 6 / 8
 Projet Final HTML5/CSS3

• Soutenance orale (10 à 15 minutes) :

✓ Présenter brièvement l'entreprise choisie.

✓ Expliquer l'objectif du projet et les raisons du choix de cette entreprise.
✓ Faire la démonstration du site web.
✓ Chaque étudiant doit présenter une partie du projet et répondre aux questions de l'enseignant.

8. CONSEILS POUR BIEN RÉUSSIR

• Choisir une entreprise dont on trouve facilement des informations et des visuels (site officiel,
réseaux sociaux, articles de presse)
• Bien répartir les tâches dès la semaine 1 pour éviter qu'un seul membre du groupe fasse tout le
travail
• Créer d'abord une page maquette du menu de navigation avec sous-menu, puis la dupliquer sur
toutes les pages pour garder une cohérence parfaite
• Terminer toute la structure HTML de chaque page avant de commencer le style
• Tester le responsive au fur et à mesure, pas uniquement en fin de mois
• Toujours vérifier le sous-menu sur mobile
• Un site simple, cohérent et bien fini vaut toujours mieux qu'un site ambitieux mais bâclé

9. CALENDRIER
• Lancement du projet : Vendredi 3 juillet 2026
• Durée du projet : 30 jours
• Date de remise : Mardi 4 août 2026
Le projet complet (.zip) doit être envoyé par courriel à jeandenislaguerre10@[Link] au
plus tard à cette date.
• Soutenance orale : À partir du mercredi 5 août 2026, selon le calendrier qui sera communiqué
par l'enseignant.

Prof: Jean Denis Laguerre

Page 7 / 8
 Projet Final HTML5/CSS3

Prof: Jean Denis Laguerre

Page 8 / 8