Rôle
Développeuse Front‑End
Outils
HTML, CSS, JS
Contexte et Recherche
Dans le cadre d’un projet fictif de création web, j’ai développé 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 réalisée en HTML, CSS et JavaScript, tout en respectant les bonnes pratiques d’intégration.
Avant de commencer le développement, j’ai analysé la maquette initiale, afin d’en extraire les éléments essentiels : structure, hiérarchie, ambiance générale.
J’ai ensuite étudié plusieurs sites artisanaux, pour comprendre comment mettre en valeur les produits, les valeurs et l’histoire d’une petite entreprise locale.
De plus, cette phase m’a permis de définir une approche centrée sur la simplicité, la fluidité de lecture et la mise en avant des contenus clés, tout en réinterprétant certains choix graphiques, pour obtenir un rendu plus moderne.
Difficultés
La principale difficulté a été de créer une page unique fluide, où chaque section s’enchaîne naturellement sans surcharge visuelle. Il a également fallu gérer la cohérence entre les différentes zones, optimiser les espacements et assurer une navigation intuitive, grâce aux ancres et au menu dynamique.
Compétences transversales
Ce projet m’a permis de renforcer mes compétences en organisation, en gestion de contenu, en ergonomie web et en hiérarchisation visuelle. Il a aussi développé ma capacité à analyser une maquette, à l’adapter et à la transformer en une interface fonctionnelle et agréable.
Identité visuelle
L’identité visuelle du projet (logo, palette, typographies) a été réalisée dans un article séparé :
Voir l’article : Identité visuelle de La Boulangerie du Coin
Développement
Le site a été développé en HTML, selon une architecture One Page, offrant une navigation fluide entre les différentes sections, grâce à un système d’ancres. La structure sémantique repose sur les balises header, nav, footer et une hiérarchie de titres adaptée. Le design a été réalisé en CSS, avec une palette de couleurs douces, des typographies élégantes, une mise en page en Flexbox et plusieurs effets visuels, tels que des animations au survol et des bordures arrondies. Enfin, un script JavaScript permet de mettre automatiquement en évidence la section consultée dans le menu de navigation, améliorant ainsi l’expérience utilisateur.
const sections = document.querySelectorAll(‘div[id]’);
const navLinks = document.querySelectorAll(‘nav ul li a’);
function updateActiveLink() {
const scrollPosition = window.scrollY + window.innerHeight / 3;
let currentId = ‘accueil’;
sections.forEach(section => {
if (section.offsetTop <= scrollPosition) {
currentId = section.id;
}
});
navLinks.forEach(link => {
link.classList.toggle(‘active’, link.hash === ‘#’ + currentId);
});
}
Structure One Page maîtrisée
Organisation claire, sections ancrées, navigation fluide et hiérarchie visuelle optimisée.
CSS avancé et cohérent
Palette artisanale, typographies élégantes, flexbox, effets visuels et mise en valeur des contenus.
Menu dynamique en JavaScript
Détection de la section active, mise à jour automatique du menu, amélioration de l’expérience utilisateur.
Conclusion et résultat final
Ce projet m’a permis de mettre en pratique mes compétences en structuration HTML, stylisation avancée en CSS et ajout d’interactions en JavaScript.
En partant d’une maquette réalisée en cours, j’ai conçu un site One page fidèle à l’univers chaleureux d’une boulangerie artisanale, tout en travaillant l’ergonomie, la hiérarchie visuelle et la fluidité de navigation.
Une expérience formatrice qui a renforcé ma maîtrise du développement front‑end.
