One page · Interface front-end
Tchat App : interface de messagerie front-end intégrée en HTML/CSS (challenge Frontend Mentor)
Tchat App est un exercice front-end issu d'un challenge Frontend Mentor. À partir d'une maquette statique, j'ai reproduit l'interface d'une application de messagerie : carte de profil utilisateur et fil de conversation. L'objectif n'était pas de créer un vrai produit, mais de m'entraîner à transformer fidèlement un design en page web propre et lisible.
Côté technique, j'ai intégré l'écran uniquement en HTML et CSS, sans framework. La structure HTML reste sémantique et organisée, et la mise en page s'appuie sur le CSS moderne (Flexbox) pour aligner les bulles de conversation, gérer les espacements et reproduire la hiérarchie visuelle. Le rendu se veut responsive afin de rester cohérent du desktop à la tablette.
Ce projet One page démontre ma capacité à lire une maquette et à la restituer au pixel près en intégration HTML/CSS. Il met en avant ma rigueur sur le détail visuel (couleurs, marges, typographie), ma maîtrise de la mise en page CSS et mon souci d'un code clair et maintenable, des bases essentielles pour tout travail d'intégration front-end.
Intégration fidèle à la maquette
Reproduction de l'interface de messagerie au plus proche du design Frontend Mentor : profil, fil de conversation et hiérarchie visuelle restitués au détail près.
Mise en page CSS moderne
Structure HTML sémantique et mise en page en CSS pur (Flexbox) pour aligner les bulles de discussion, gérer les espacements et obtenir un rendu propre, sans framework.
Rendu responsive
Page One page pensée pour rester lisible et cohérente du desktop à la tablette, en adaptant la composition aux différentes largeurs d'écran.
Version desktop
Version tablette
Carousel Vertical
Un exercice front-end où j'ai conçu un carrousel d'images à défilement vertical pour une présentation photo immersive, en HTML, CSS et JS.
Carte Animee
Exercice front-end one page : une carte interactive qui masque ses informations puis les révèle au survol, en HTML, CSS et JS.
Carte QR Code
Exercice Frontend Mentor : j'ai reproduit en pixel-perfect une carte affichant un QR code, intégrée de zéro en HTML et CSS.
Un projet dans le même esprit ?
Parlez-moi de votre besoin : je vous dis rapidement ce qui est pertinent et réaliste.