Introduction
Le projet Marisol consistait à créer un site web vitrine pour une entreprise fictive spécialisée dans la vente de produits artisanaux méditerranéens. Le but était de mettre en valeur les produits, la philosophie de la marque et de permettre à l’utilisateur une navigation fluide et agréable, en respectant les bonnes pratiques du développement web frontend.
Objectifs du projet
- Concevoir un site web responsive avec un design soigné
- Utiliser HTML / CSS de manière professionnelle
- Ajouter des effets visuels simples avec JavaScript
- Présenter les produits, l’histoire de l’entreprise et ses valeurs
- Fournir une page de contact avec un formulaire fonctionnel
Choix techniques
Langages et outils utilisés :
- HTML5 pour la structure
- CSS3 (avec animations simples) pour le design
- JavaScript Vanilla pour les interactions
- Visual Studio Code en IDE
- GitHub pour l’hébergement du projet
Structure du site :
index.html: page d’accueilproduits.html: liste des produits artisanauxhistoire.html: l’histoire de Marisolcontact.html: formulaire de contactstyle.css: feuille de style uniquescript.js: animation légère et comportements
Fonctionnalités mises en place
- Header et menu fixe avec scroll fluide
- Galerie de produits avec effet « hover » sur chaque carte produit
- Formulaire de contact (nom, email, message) avec vérification de base
- Section responsive adaptée à PC, tablette et mobile
- Animations CSS pour améliorer l’expérience utilisateur
Design & UX
Le site utilise une palette bleu et sable, rappelant la mer et le soleil, avec une typographie douce et lisible. L’objectif était de créer une ambiance méditerranéenne chaleureuse, cohérente avec le nom Marisol. Les sections sont bien espacées, aérées, et la navigation est fluide.
Difficultés rencontrées
- Responsive design : ajuster correctement les colonnes et éléments selon la taille de l’écran.
- Organisation CSS : comprendre la logique de classes et de réutilisabilité.
- Validation du formulaire : bien gérer les cas d’erreurs sans backend.
Conclusion
Ce projet m’a permis de maîtriser les bases du développement web frontend, de renforcer mes compétences en HTML/CSS et d’avoir une première approche sérieuse du responsive design. Il m’a aussi sensibilisé à l’importance de l’expérience utilisateur. Ce projet Marisol m’a donné confiance dans mes capacités à créer des interfaces propres, esthétiques et fonctionnelles.