Site E-commerce "Ambition Foot"
Projet Fondamental de Développement Web
Contexte et Objectifs
Ce projet a été ma toute première incursion dans le développement web. L'objectif était de construire un site complet de A à Z en utilisant uniquement HTML et CSS, afin de comprendre en profondeur les mécanismes de base de la structuration de contenu et de la mise en page. J'ai créé une marque fictive, "Ambition Foot", et développé son site e-commerce statique.
Fonctionnalités du Site
- Identité de Marque Complète : Création du nom "Ambition Foot" et d'un logo.
- Catalogue de Produits : Pages dédiées pour les maillots et les posters, présentés en grille.
- Navigation Multi-pages : Structure complète avec pages d'accueil, produits, promotions et contact.
- Page Contact : Inclut une carte Google Maps intégrée et des informations de contact.
- Éléments Interactifs (Design) : Intégration d'un module de feedback et d'une simulation de processus de paiement.
Galerie d'Images
Cliquez sur les images pour les afficher en plein écran.
Approche Technique : HTML & CSS Purs
Ce projet a été entièrement réalisé en HTML5 et CSS3, sans aucun framework ni JavaScript, afin de me concentrer sur les fondamentaux.
Structure HTML Sémantique
J'ai utilisé une structure sémantique avec des balises comme <header>, <nav>, et <footer> pour organiser le contenu. La navigation et le pied de page sont reproduits sur toutes les pages pour garantir une expérience utilisateur unifiée et cohérente.
<!-- Extrait de la structure de index.html -->
<body>
<div id="conteneur">
<header>
{/* Logo et icônes panier/profil */}
</header>
<nav>
{/* Menu de navigation principal */}
</nav>
<hr />
<section class="premier_bloc">
{/* Contenu principal de la page */}
</section>
{/* ... autres sections ... */}
<footer>
{/* Liens, réseaux sociaux et copyright */}
</footer>
</div>
</body>Styling CSS Classique
La mise en page a été réalisée avec des techniques CSS fondamentales comme float pour la disposition en colonnes et le positionnement absolu pour placer précisément certains éléments.
Défis et Apprentissages
- La Mise en Page en CSS : Le plus grand défi a été de maîtriser le modèle de boîtes (box model), les flottants et le positionnement pour créer une mise en page complexe et cohérente sans les outils modernes comme Flexbox ou Grid. C'était un excellent exercice pour comprendre le fonctionnement fondamental du CSS.
- Cohérence entre les Pages : Assurer que le header, la navigation et le footer soient identiques sur toutes les pages m'a appris l'importance de la réutilisation du code et d'une structure de projet bien organisée.
- Design et Expérience Utilisateur : Au-delà du code, ce projet m'a initié à la réflexion sur l'expérience utilisateur : comment guider le visiteur, où placer les appels à l'action, et comment créer une identité visuelle qui a du sens.
Potentielles Améliorations (avec mes compétences actuelles)
- Responsive Design : La priorité serait de le rendre entièrement adaptatif avec Flexbox et CSS Grid.
- Interactivité : J'ajouterais du JavaScript pour rendre les filtres et le panier fonctionnels.
- Architecture Moderne : Je le reconstruirais avec un framework comme React/Next.js pour une gestion dynamique du contenu.