Interface e-commerce moderne et responsive avec HTML, CSS, Bootstrap 5

Dans ce tutoriel, je vous propose de réaliser une interface professionnelle de type marketplace, comme on en trouve sur Amazon, Decathlon ou Darty. L’objectif ? Concevoir un layout moderne, responsive et agréable à l’œil, qui affiche une top bar fonctionnelle (logo, compte, panier) et une grille de produits stylée et adaptable à tous les écrans.

Ce projet est idéal si :

• Vous êtes étudiant ou autodidacte en développement web.
• Vous souhaitez enrichir votre portfolio avec un projet visuel concret.
• Vous préparez une intégration dans un site Laravel, Symfony, WordPress ou Flask.
• Ou tout simplement… vous voulez apprendre à créer une interface utilisateur qui en jette ! 😄

Ce que vous apprendrez ici :

• Structurer proprement votre HTML de manière sémantique.
• Utiliser Bootstrap 5 pour créer une mise en page fluide et mobile-first.
• Styliser vos éléments avec du CSS personnalisé pour un design plus “vivant”.
• Rendre votre projet responsive, accessible, et visuellement engageant.
• Et bien sûr, préparer un contenu optimisé pour le référencement SEO, validé AdSense, Bing et tous les outils modernes d’analyse de contenu.

Ce dont vous avez besoin

Avant de commencer, assurez-vous d’avoir :

• Un dossier de projet HTML/CSS prêt à l’emploi.
• Les images de vos produits dans un dossier /images.
• Un éditeur de code comme VS Code.
• Une connexion à Internet pour charger Bootstrap et les icônes via CDN.

Vous pouvez télécharger le projet et ses images sur le dépot GitHub.

Étape 1 – La structure de base HTML

On commence simple : un fichier index.html et un fichier style.css. Dans ce tutoriel, on va construire chaque bloc avec une logique propre et facilement maintenable.

Nous allons diviser notre page en deux grandes sections :

1. Une top bar (ou barre de navigation)
2. Une grille de cartes produits

Le tout sera responsive, donc fluide quelle que soit la taille de l’écran.

En gros, nous aurons besoin d’une page html, un fichier css, un dossier pour nos images ou juste ajouter les liens de vos images si vous ne souhaitez pas surcharger votre projet.

/product-card/
├── index.html → page principale
├── style.css → styles personnalisés
├── images/ → images des produits
│ ├── calculator.jpg
│ ├── camera.jpg
│ ├── casque-fil.jpg
│ ├── guitar.jpg
│ ├── iphone.png
│ ├── ordi.jpg
│ ├── talent.jpg
│ └── velo.jpg
└── README.md → ce fichier

Étape 2 – La top bar : logo, mon compte et panier

La top bar est la première chose que voit un visiteur. Elle doit donc être :

• claire (logo ou nom du site à gauche)
• fonctionnelle (liens vers compte et panier à droite)
• et responsive (elle doit s’adapter sur mobile sans casser l’affichage)

Voici le code HTML que j’ai utilisé :

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
  <div class="container">
    <a class="navbar-brand fw-bold text-secondary" href="#">
      <i class="bi bi-shop fs-3"></i> MaBoutique
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTop">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarTop">
      <ul class="navbar-nav align-items-center">
        <li class="nav-item me-3">
          <a class="nav-link d-flex align-items-center" href="#"><i class="bi bi-person me-1"></i>Mon compte</a>
        </li>
        <li class="nav-item position-relative">
          <a class="nav-link d-flex align-items-center" href="#"><i class="bi bi-cart3 me-1"></i>Panier</a>
          <span class="position-absolute top-0 start-100 translate-middle badge bg-danger">0</span>
        </li>
      </ul>
    </div>
  </div>
</nav>

Pourquoi ce choix ?

• Bootstrap gère toute la structure responsive (nav, container, grille).
• Les icônes viennent de Bootstrap Icons, un CDN léger.
• J’utilise un badge Bootstrap pour afficher dynamiquement le nombre d’articles dans le panier.

Étape 3 – La grille de produits responsive

C’est ici que le design “fait la différence”. Le but est de présenter nos produits dans une grille 1 à 4 colonnes, selon la taille de l’écran.

Chaque produit aura :

• Une image (avec effet zoom au survol)
• Un badge “promo” ou “rupture de stock”
• Un titre, une note, un prix barré + prix actuel
• Un bouton “Ajouter au panier”

Exemple HTML d’une carte produit :

<div class="col-12 col-sm-6 col-md-4 col-lg-3">
  <div class="product-card shadow-sm">
    <div class="card-image-wrapper">
      <img src="images/ordi.jpg" alt="PC Portable 15 pouces" class="card-image" loading="lazy" />
      <span class="badge badge-promo">-10%</span>
      <button class="btn-wishlist" aria-label="Favoris">❤</button>
    </div>
    <div class="card-body d-flex flex-column">
      <h5 class="product-title">PC Portable 15"</h5>
      <div class="rating">★ ★ ★ ★ ☆ <small class="text-muted ms-2">(213)</small></div>
      <p class="product-price mb-3">
        <span class="old-price">749 €</span>
        <span class="current-price">674 €</span>
      </p>
      <button class="btn btn-buy mt-auto">Ajouter au panier</button>
    </div>
  </div>
</div>

Ce que j’ai amélioré par rapport à un site “basique” :

• Image avec zoom fluide (grâce à CSS transform: scale)
• Bouton cœur pour les favoris
• Badge dynamique affiché selon l’état du produit
• Typographie claire, lisible, avec Roboto (Google Fonts)

A ce stade, vous devrez avoir quelque chose pas très beau comme ça:

Vous pouvez observer l’importance du css dans un projet web. En effet, le css vient styliser, embélire nos pages html.

Page sans CSS

Étape 4 – Style CSS moderne et animations douces

Le style est la clé de l’engagement utilisateur. Voici quelques règles CSS que j’ai appliquées pour créer un rendu agréable :

.product-card {
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.card-image-wrapper:hover .card-image {
  transform: scale(1.1);
}

.badge-promo {
  background: #ff5722;
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  color: white;
}

.btn-buy {
  background: #007bff;
  color: white;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

Astuce : utilisez des variables CSS ou :root pour gérer vos couleurs, tailles et rayons de bordure facilement.

Étape 5 – Responsive design et accessibilité

J’ai testé ce projet sur :

• iPhone (Safari et Chrome mobile)
• Desktop (Chrome, Firefox, Edge)
• Plusieurs tailles d’écran avec DevTools

Et voilà ce que j’ai validé :

• L’affichage reste fluide de 320px à 1920px
• Tous les boutons sont accessibles au clavier (navigabilité + focus)
• Les images ont un alt descriptif (utile pour le SEO et les lecteurs d’écran)

Page avec CSS

Étape 6 – Idées d’améliorations

• Ajouter un filtre (par prix, catégorie, notation)
• Ajouter une pop-up de confirmation quand on clique sur « Ajouter au panier »
• Relier à un back-end (API Flask, Laravel, Firebase…)
• Suivi du panier avec localStorage ou SessionStorage

Je vous laisse la liberté d’envisager des améliorations et d’adapter ce projet selon vos besoin. Ce serait chouette de voir ce que vous avez réalisé sur base de cette maquette.

Conclusion

Ce projet simple en apparence vous permet de maîtriser les bases d’une interface e-commerce moderne, tout en appliquant de bonnes pratiques HTML/CSS, responsive design.

N’hésites pas à contribuer si vous le souhaiter sur GitHub, nous attendons vos retours. N’hésitez pas aussi à consulte les autres articles du blog et à t’abonner à la NewsLetter pour ne rien rater. A bientôt !