La Boulangerie du Coin
La Boulangerie du Coin
Dans le cadre d’un projet fictif de création web, j’ai réalisé le site One page de La Boulangerie du Coin, une petite boulangerie artisanale imaginée pour l’exercice. L’objectif était de concevoir une interface simple, moderne et agréable, entièrement développée en HTML, CSS et JavaScript (JS), tout en respectant les bonnes pratiques d’intégration.
Ce projet m’a permis de travailler la structure d’une page web, la mise en forme visuelle et l’organisation du contenu.
Compétences
Développement
d’une One page
Recherche d’une expérience utilisateur sur version ordinateur
Logiciels
Utilisation du langage HTML
Utilisation du langage CSS
Utilisation du langage JS
Développement du projet
Pour ce projet, je suis partie d’une maquette que j’avais réalisée en cours de maquettage, au début de ma 1ère année d’études en Bachelor, à MyDigitalSchool de Vannes. Cette base m’a permis de structurer rapidement l’interface, tout en réinterprétant certains choix graphiques, pour obtenir un rendu plus moderne et cohérent avec l’univers d’une boulangerie artisanale.- J’ai ensuite cherché à améliorer l’expérience utilisateur, en travaillant notamment :
- la hiérarchisation des informations
- la mise en valeur des éléments essentiels (produits, valeurs, fait-maison)
- la fluidité de lecture sur une page unique
L’objectif était de proposer une expérience simple, intuitive et agréable, tout en respectant les bonnes pratiques d’intégration web. Pour ce projet, je me suis concentrée uniquement sur la version ordinateur, afin de maîtriser pleinement la mise en page, les espacements et l’équilibre visuel. - J'ai créé l'identité visuelle que vous pourrez retrouver sur le prochain article : Identité visuelle de La Boulangerie du Coin.
- Tout d'abord, le site a été développé en HTML, en suivant une logique One page, pour offrir une navigation fluide et intuitive. Chaque section, à savoir, Accueil, À propos, Notre histoire, Nos produits, Ingrédients locaux et Contact, est clairement délimitée par des ancres
avec des identifiants (id) spécifiques, permettant une navigation directe via le menu.
J’ai veillé à utiliser une structure sémantique claire :
- header pour la barre de navigation
- nav pour le menu principal
- footer pour les informations de bas de page
- des balises de titre (h2, h3) pour hiérarchiser le contenu
Cette organisation rend le code lisible et facilite la maintenance du site. - Puis, la feuille de style CSS a été conçue pour refléter l’univers artisanal et chaleureux d’une boulangerie de quartier. J’ai travaillé sur une palette douce et naturelle (beige, brun, blanc cassé) et sur des typographies élégantes (Playfair Display, Great Vibes, serif), pour évoquer la tradition et la convivialité. J’ai utilisé des Flexbox, pour structurer les différents blocs :
- présentation et images
- valeurs et produits
- contact en trois colonnes - En effet, cette approche garantit une mise en page équilibrée et adaptable. Le CSS intègre plusieurs effets pour dynamiser la page :
- soulignement animé au survol du menu
- ombres portées sur les images et les cartes
- bordures arrondies pour adoucir le rendu
- dégradé de fond sur la section d’accueil pour une ambiance lumineuse - Après, j’ai ajouté un script JavaScript pour rendre le menu de navigation dynamique. Le code détecte la section visible à l’écran et met automatiquement à jour le lien actif, dans le menu grâce à la classe .active. Cela permet à l’utilisateur de savoir en permanence où il se trouve sur la page, sans rechargement. Ce petit ajout améliore considérablement l’expérience utilisateur du site et donne une impression de fluidité typique des sites modernes.
- Enfin, ce projet m’a permis de mettre en pratique certaines de mes compétences acquises : structuration HTML, stylisation avancée en CSS et ajout d’interactions grâce au JavaScript. En partant d’une maquette réalisée en cours, j’ai pu concevoir un site One page fidèle à l’univers chaleureux d’une boulangerie artisanale, tout en travaillant l’ergonomie, la hiérarchie visuelle et la mise en valeur des contenus. La création du menu dynamique, l’attention portée aux détails graphiques et la cohérence de l’identité visuelle m’ont donné l'occassion d’approfondir la maîtrise du développement front‑end.
Recherche
Pour ce projet, je suis partie d’une maquette que j’avais réalisée en cours de maquettage, au début de ma 1ère année d’études en Bachelor, à MyDigitalSchool de Vannes. Cette base m’a permis de structurer rapidement l’interface, tout en réinterprétant certains choix graphiques, pour obtenir un rendu plus moderne et cohérent avec l’univers d’une boulangerie artisanale.
J’ai ensuite cherché à améliorer l’expérience utilisateur, en travaillant notamment :
- la hiérarchisation des informations
- la mise en valeur des éléments essentiels (produits, valeurs, fait-maison)
- la fluidité de lecture sur une page unique
L’objectif était de proposer une expérience simple, intuitive et agréable, tout en respectant les bonnes pratiques d’intégration web. Pour ce projet, je me suis concentrée uniquement sur la version ordinateur, afin de maîtriser pleinement la mise en page, les espacements et l’équilibre visuel.
Identité visuelle
J’ai créé l’identité visuelle que vous pourrez retrouver sur le prochain article : Identité visuelle de La Boulangerie du Coin.
Développement
Structure HTML
Tout d’abord, le site a été développé en HTML, en suivant une logique One page, pour offrir une navigation fluide et intuitive. Chaque section, à savoir, Accueil, À propos, Notre histoire, Nos produits, Ingrédients locaux et Contact, est clairement délimitée par des ancres
avec des identifiants (id) spécifiques, permettant une navigation directe via le menu.
J’ai veillé à utiliser une structure sémantique claire :
- <header> pour la barre de navigation
- <nav> pour le menu principal
- <footer> pour les informations de bas de page
- des balises de titre (<h2>, <h3>) pour hiérarchiser le contenu
Cette organisation rend le code lisible et facilite la maintenance du site.
Mise en forme avec CSS
Puis, la feuille de style CSS a été conçue pour refléter l’univers artisanal et chaleureux d’une boulangerie de quartier. J’ai travaillé sur une palette douce et naturelle (beige, brun, blanc cassé) et sur des typographies élégantes (Playfair Display, Great Vibes, serif), pour évoquer la tradition et la convivialité. J’ai utilisé des Flexbox, pour structurer les différents blocs :
- présentation et images
- valeurs et produits
- contact en trois colonnes
En effet, cette approche garantit une mise en page équilibrée et adaptable. Le CSS intègre plusieurs effets pour dynamiser la page :
- soulignement animé au survol du menu
- ombres portées sur les images et les cartes
- bordures arrondies pour adoucir le rendu
- dégradé de fond sur la section d’accueil pour une ambiance lumineuse
Interaction et dynamisme avec JavaScript
Après, j’ai ajouté un script JavaScript pour rendre le menu de navigation dynamique. Le code détecte la section visible à l’écran et met automatiquement à jour le lien actif, dans le menu grâce à la classe .active. Cela permet à l’utilisateur de savoir en permanence où il se trouve sur la page, sans rechargement. Ce petit ajout améliore considérablement l’expérience utilisateur du site et donne une impression de fluidité typique des sites modernes.
Conclusion
Enfin, ce projet m’a permis de mettre en pratique certaines de mes compétences acquises : structuration HTML, stylisation avancée en CSS et ajout d’interactions grâce au JavaScript. En partant d’une maquette réalisée en cours, j’ai pu concevoir un site One page fidèle à l’univers chaleureux d’une boulangerie artisanale, tout en travaillant l’ergonomie, la hiérarchie visuelle et la mise en valeur des contenus. La création du menu dynamique, l’attention portée aux détails graphiques et la cohérence de l’identité visuelle m’ont donné l’occassion d’approfondir la maîtrise du développement front‑end.
Quelques visuels
Liens
Visualisez le site en cliquant ci-dessous :
Retrouvez le code de ce site One-page
sur mon compte GitHub :