Stage 1ʳᵉ année – La Cité du Savon
La Cité du Savon – Annecy
Boutique artisanale de savons et cosmétiques bio, installée au cœur du Vieil Annecy. Stage de développement web : conception, hébergement et mise en ligne de plusieurs sites.
Informations du stage
Entreprise
La Cité du Savon
Période
26 – 27 juin (1ʳᵉ année BTS SIO SISR)
Lieu
4 Rue Notre-Dame, Annecy 74000
Rôle
Développeur Web – Hébergement & Déploiement
Site mis en ligne
Contexte & objectif
La Cité du Savon est une boutique artisanale d'Annecy spécialisée dans les savons naturels et cosmétiques bio aux Parfums de Grasse. L'entreprise n'avait pas de présence en ligne structurée et souhaitait se doter d'un site vitrine pour présenter sa boutique, ses horaires et ses produits.
Ma mission principale a consisté à concevoir et déployer plusieurs pages web en partant de zéro : un site vitrine pour la boutique, un catalogue complet de leurs savons, et un site dédié à leur gamme Savon Derma. L'ensemble a ensuite été mis en production sur le domaine lacitedusavon.fr.
Ce stage m'a permis de travailler en conditions réelles : comprendre le besoin d'un client, produire un rendu fonctionnel dans un délai court, et assurer le déploiement complet (serveur web, DNS, HTTPS).
Missions réalisées
Trois livrables produits durant ce stage, chacun répondant à un besoin précis de la boutique.
Site vitrine – lacitedusavon.fr
Page d'accueil complète présentant la boutique, ses horaires et ses coordonnées. Navigation responsive avec menu burger mobile.
- Hero plein écran avec photo de la façade
- Section « À propos » avec photo des savons
- Bloc Contact & Horaires (Mar–Sam 10h–18h)
- Carte Google Maps intégrée
- Navigation responsive (menu burger mobile)
- CSS pur sans framework, animations douces
Catalogue – Tous nos savons
Page catalogue listant l'intégralité des savons par famille (lait d'ânesse, argiles, huiles, fruits, fleurs, etc.) avec composition et images.
- Grille responsive à 3 colonnes (2 sur tablette, 1 sur mobile)
- Affichage par catégorie avec titre de section
- Fiche produit : image, nom, composition INCI, poids
- Images chargées depuis savons.com (URLs distantes)
- Effets hover sur les cartes produits
- Navigation vers les familles de savons
Site Savon Derma – Gamme spécialisée
Site vitrine animé pour la gamme Savon Derma France enrichi à l'eau thermale, plus élaboré avec slider et modales produits.
- Slider d'images automatique avec navigation par points
- Fond aquarelle animé (effet atmosphérique)
- Grille de 15 savons Derma (argan, lavande, charbon…)
- Modale produit : images recto/verso + description
- Navigation par sections (SPA single-page)
- Animations CSS (fadeIn, transitions cubic-bezier)
Livrables rendus
Fichiers produits et mis en ligne à l'issue du stage.
index.html – Site vitrine
Page d'accueil responsive de La Cité du Savon avec hero, à propos, contact et carte. Mis en ligne sur lacitedusavon.fr.
tous-savons.html + savons.html
Navigation des familles de savons et catalogue complet de 50+ produits avec compositions INCI et images.
cite_derma.html – Site Savon Derma
Site animé pour la gamme Derma avec slider, modales produits recto/verso et fond aquarelle.
styles.css – Feuille de style globale
CSS partagé entre toutes les pages : header, navigation, galerie, footer, composants responsive.
Déploiement & mise en ligne
Configuration du serveur web, DNS et certificat SSL/HTTPS pour lacitedusavon.fr.
Assets graphiques intégrés
Logo La Cité du Savon, logos Savon Derma, badge Fabriqué en France, photos façade et produits.
Aperçu des réalisations
Extraits des pages développées et livrées au client.
Boutique artisanale de savons & cosmétiques bio à Annecy
Hero • À propos • Contact & Horaires • Google Maps
Enrichi à l'eau thermale · Fabriqué en France
Slider · 15 produits · Modales recto/verso · Animations
100g
100g
125g
125g
Compétences BTS SIO mobilisées
Ce stage contribue directement au référentiel BTS SIO SISR.
Développer la présence en ligne – Création et déploiement du site vitrine, du catalogue et du site Derma pour valoriser La Cité du Savon sur le web.
Mettre à disposition un service informatique – Hébergement complet (serveur web, FTP, SSL/TLS, DNS) et mise en production sur lacitedusavon.fr.
Gérer le patrimoine informatique – Organisation des fichiers sources, assets graphiques, documentation et hébergement du projet.
Développement professionnel – Première expérience en conditions réelles : respect des délais, compréhension du besoin client, livraison d'un produit fini.
Ce que j'ai appris
- Travailler en autonomie sur un projet client réel
- Concevoir une interface à partir d'un brief simple
- Coder en HTML/CSS/JS sans framework
- Rendre un design responsive (mobile-first)
- Déployer un site complet (serveur, DNS, SSL)
- Gérer des animations CSS et du JS vanilla
- Organiser un catalogue produit en HTML structuré
- Livrer un produit fini dans un délai court