Présentation complète en phrases
La maquette est composée de plusieurs blocs de contenu bien identifiés. Elle commence par une introduction en paragraphe simple, suivie d’un sous-titre structurant la lecture. Au cœur de la page, une citation est mise en avant à l’aide d’un encadré coloré avec une bordure orange douce. Cette citation est accompagnée d’un script JavaScript qui modifie sa couleur de fond lorsque l’utilisateur fait défiler la page. Cela crée un effet subtil mais efficace, destiné à attirer l’attention du lecteur de manière naturelle.
Une liste à puces vient ensuite présenter des points clés de manière synthétique. Cette liste est stylisée pour offrir une lecture rapide et claire. Enfin, un paragraphe de conclusion plus dense permet de clore le contenu dans un format professionnel.
Tous les éléments HTML ont été choisis de façon sémantique : j’ai utilisé des balises comme <section>, <h2>, <blockquote> ou encore <ul> afin de structurer le contenu de manière propre et accessible. Cela favorise non seulement le référencement naturel (SEO), mais aussi la compatibilité avec les lecteurs d’écran.
Le style CSS a été codé à la main, sans framework. J’ai opté pour une police sans empattement moderne, une taille de texte lisible, et des espacements généreux pour faciliter le confort de lecture. La mise en page est responsive, c’est-à-dire qu’elle s’adapte aussi bien aux écrans d’ordinateur qu’aux tablettes ou aux smartphones.
Un petit script JavaScript a été ajouté pour créer une interaction légère. Il détecte si la citation est visible à l’écran et change légèrement son fond pour capter discrètement l’attention de l’utilisateur, renforçant ainsi l’aspect dynamique de la maquette.
Compétences mobilisées
- Intégration HTML/CSS à partir d’une maquette figma/sketch ou image
- Création d’interfaces claires et équilibrées
- Utilisation du HTML sémantique
- Responsive design (sans media queries complexes)
- Mise en œuvre de micro-interactions JS
- Respect des standards d’accessibilité et de lisibilité
Ce projet m’a permis de consolider mes compétences en HTML et CSS, de pratiquer une intégration propre et accessible, et d’aborder l’ajout d’interactions simples avec JavaScript. Il reflète ma capacité à concevoir une interface web à la fois claire, fonctionnelle, élégante et orientée utilisateur — sans recourir à des outils complexes ou des bibliothèques externes.
