But du projet
Ce projet a été réalisé dans le cadre du module I293 – Créer et publier un site Web. L’objectif était de concevoir et publier un site web complet en utilisant uniquement HTML5 et CSS3, en respectant les conventions sémantiques et les bonnes pratiques enseignées durant le module.
Le thème choisi est le Sporting Clube de Portugal, club de football portugais fondé en 1906. Ce choix personnel m’a permis de travailler sur un contenu que je maîtrise et qui m’a motivé tout au long du projet.
Le site devait comporter plusieurs pages, une navigation cohérente, un design responsive et respecter une structure sémantique HTML correcte avec un fichier CSS séparé par page.
Maquette initiale
Avant de coder le site, j’ai réalisé des maquettes visuelles pour planifier la structure et le design de chaque page. Voici les principales maquettes :
Page d’accueil
Fond vert avec logo Sporting CP centré en haut, grande photo de l’équipe en bannière, et bloc blanc avec texte de présentation du club.
Page Joueurs
Grille de cartes blanches sur fond vert, organisées par poste (Gardiens, Défenseurs, Milieux, Attaquants), avec 3 joueurs par ligne.
Page Palmarès
Inspirée du site officiel du Sporting CP, grille de 3 colonnes affichant chaque trophée, son nombre de victoires et les années correspondantes.
Page Contact
Photo de profil avec description, formulaire de contact (nom, email, sujet, message) et liste des coordonnées personnelles.
Page Auteur
Différences entre la maquette et le résultat final
Plusieurs modifications et améliorations ont été apportées par rapport aux maquettes initiales :
| Page | Maquette initiale | Résultat final | Type |
|---|---|---|---|
| Accueil | Bloc texte simple sous la photo avec statistiques | Ajout de d’une section actualités | Ajout |
| Joueurs | Petites cartes, nom uniquement | Cartes agrandies (220×280px), numéro de maillot en jaune ajouté, object-position: top pour ne pas couper la tête |
Modification |
| Palmarès | Images des trophées | Ajout du nombre total de trophés en haut | Ajout |
| Contact | Formulaire normal avec présentation rapide de moi | Ajout d'un Formspree pour l'envoi des formulaires | Ajout |
| Contact | Formulaire normal avec présentation rapide de moi | Lien vers la page Auteur ajouté en bas de page | Modification |
| Toutes pages | 1 fichier CSS global prévu | 1 fichier CSS par page HTML pour faciliter le travail entre page HTML et CSS | Modification |
| Nouvelles pages | Non prévues | Ajout des pages Histoire, Auteur et Mentions légales | Ajout |
Structure du site
Le site est composé des pages suivantes :
- index.html — Page d’accueil avec bannière, statistiques et actualités
- histoire.html — Histoire du club, fondation, stade et évolution du logo
- palmares.html — Trophées du Sporting CP avec dates et nombre de victoires
- joueurs.html — Effectif actuel organisé par poste avec photos
- contact.html — Formulaire de contact et coordonnées personnelles
- auteur.html — Présentation personnelle de l’auteur du site
- mentions-legales.html — Mentions légales du site
Technologies utilisées
Ce projet a été réalisé uniquement avec les technologies vues dans le module I293 :
Conclusion
Ce projet m’a permis de mettre en pratique l’ensemble des notions vues dans le module I293 : structure sémantique HTML, mise en forme CSS, responsive design et publication sur GitHub Pages.
Le choix du Sporting CP comme thème m’a aidé à rester motivé tout au long du développement. J’ai appris à organiser un projet web avec plusieurs fichiers, à gérer des CSS séparés par page, et à adapter le design pour les appareils mobiles.
Les principales difficultés rencontrées étaient la gestion du responsive sur la navigation et l’affichage des photos des joueurs sans couper les visages. Ces problèmes ont été résolus grâce a flex-wrap et object-position: top.