Comment coder une landing page en HTML et CSS en 6 étapes

Vous avez une maquette sous les yeux, un dossier d’images à côté, et cette question qui bloque tout : par où commencer ? Passer d’un visuel à une vraie page web ressemble à une montagne quand on débute. Pourtant, l’essentiel tient dans une poignée de propriétés CSS et dans une méthode : découper la page en boîtes, puis remplir ces boîtes une par une.

Ce tutoriel reprend pas à pas la construction d’une page de vente de plantes en ligne : un en-tête avec logo et menu, une bannière plein écran avec slogan, une rangée de services, des cartes produits et une galerie en grille. À l’arrivée, vous obtenez une page unique, codée à la main en HTML et CSS, sans framework et sans bibliothèque JavaScript. Si vous savez ce qu’est une balise, vous avez le niveau requis.

Étape 1 : créer le dossier du projet et la page d’accueil

Tout part d’un dossier. Créez-en un sur le bureau et donnez-lui le nom du site, puis glissez à l’intérieur un sous-dossier images contenant les visuels fournis avec la maquette : le logo, l’arrière-plan et les photos de produits. Ranger les ressources dès le départ évite des chemins d’accès bancals plus tard.

Ouvrez ensuite votre éditeur de code. Le Bloc-notes ferait techniquement l’affaire, mais un éditeur dédié apporte la coloration syntaxique et l’autocomplétion, ce qui change tout quand on débute. Utilisez la commande Open Folder pour ouvrir le dossier du projet, et non un fichier isolé : l’éditeur affiche alors toute l’arborescence dans la colonne de gauche.

1. Cliquez dans la zone vide sous l’arborescence, en dessous du dossier images.
2. Créez un nouveau fichier nommé index.html. Ce nom n’est pas un hasard : c’est la page que le navigateur charge par défaut.
3. Dans le fichier vide, tapez html:5 puis appuyez sur Entrée.

Cette abréviation génère d’un coup le squelette complet : la déclaration de type de document, la balise html, un head qui paramètre la page et un body qui contiendra tout ce qui sera visible à l’écran. Profitez-en pour remplacer lang="en" par lang="fr" et pour renseigner la balise title, celle qui s’affiche dans l’onglet du navigateur. Ajoutez enfin un h1 dans le body avec le slogan du site, puis enregistrez. Si les raccourcis d’enregistrement vous font perdre du temps, activez la sauvegarde automatique dans le menu File.

Étape 2 : voir vos modifications en direct dans le navigateur

Le réflexe du débutant, c’est d’enregistrer, de basculer sur le navigateur, d’actualiser, de revenir au code, et de recommencer cinquante fois. Il existe beaucoup plus confortable. Rendez-vous dans le panneau des extensions de l’éditeur, cherchez « live » et installez l’extension de serveur local qui apparaît dans les premiers résultats.

Un clic droit dans le fichier puis l’option d’ouverture avec ce serveur lance le site sur le port 5500 de votre machine. Dès que vous enregistrez une modification, la page se recharge toute seule. Réduisez alors la fenêtre de l’éditeur sur la moitié gauche de l’écran et placez le navigateur sur la moitié droite : vous écrivez d’un côté, vous voyez le résultat de l’autre, en temps réel. C’est cette configuration qui rend la suite du tutoriel agréable à suivre.

Étape 3 : assembler l’en-tête avec Flexbox

Avant de coder quoi que ce soit, regardez la maquette et repérez les blocs. En haut, une grande zone d’accueil contient un logo, un menu, un slogan et un bouton de défilement. Un site web s’imagine comme un ensemble de boîtes emboîtées les unes dans les autres, à la manière de poupées russes. Cette lecture guide toute la structure HTML.

Créez donc une section à laquelle vous donnez une classe, par exemple top-page. Une classe est simplement une étiquette qui permettra de retrouver cet élément depuis le CSS. À l’intérieur, placez un header contenant le logo et le menu.

Le logo s’insère avec une balise img, qui fonctionne seule et n’a pas besoin de balise fermante. Elle prend deux attributs : src, le chemin de l’image, et alt, une description textuelle. Cet attribut alt est souvent oublié alors qu’il est lu par les logiciels utilisés par les personnes malvoyantes : décrivez simplement ce que l’image montre. Pour le menu, utilisez une balise nav contenant une liste à trois puces, une par entrée du menu.

Vient ensuite la feuille de style. Créez un dossier css et, dedans, un fichier styles.css. Dans ce fichier, on cible un élément avec un sélecteur, on ouvre des accolades, et on écrit les propriétés à l’intérieur. Chaque propriété se termine par un point-virgule, sans exception.

Deux détails font trébucher tout le monde à ce stade. D’abord, le chemin des images : puisque le fichier CSS se trouve dans le dossier css, il faut remonter d’un cran avec ../ avant d’entrer dans images. Ensuite, la feuille de style ne s’applique pas tant qu’elle n’est pas reliée à la page : ajoutez une balise link dans le head qui pointe vers css/styles.css. Sans elle, vous pouvez écrire tout le CSS du monde, rien ne bougera.

Reste à placer le logo et le menu côte à côte. C’est le rôle de Flexbox. Une boîte en display: flex aligne ses éléments sur une ligne, et justify-content: space-between les repousse aux extrémités. Ajoutez align-items: center pour un alignement vertical propre, et list-style: none pour effacer les puces de la liste. Pensez aussi à mettre margin: 0 sur le body : le navigateur applique par défaut une marge qui décolle l’arrière-plan des bords.

Étape 4 : régler la typographie et le bouton de défilement

Une maquette se reconnaît d’abord à ses polices. Les liens fournis avec le projet pointent vers deux familles de caractères hébergées chez Google : une police générale et une police d’affichage réservée aux grands titres. On les charge tout en haut du fichier CSS avec une règle @import url(...), en n’oubliant pas le point-virgule final, faute de quoi l’import échoue silencieusement.

Pour appliquer la police générale à toute la page, utilisez le sélecteur universel *, qui cible tous les éléments. La police des titres, elle, se pose uniquement sur la classe du grand titre. Ajoutez systématiquement une police de secours après une virgule : si la première ne se charge pas, le navigateur bascule sur la seconde au lieu d’afficher n’importe quoi.

Le grand titre reçoit ensuite sa couleur, sa taille de police et son épaisseur via font-weight. Pour l’espacement, un conseil pratique : mettez le padding sur la boîte qui contient le titre plutôt que sur le titre lui-même. Ainsi, tous les éléments de ce bloc, titre comme bouton, seront décalés ensemble sans avoir à dupliquer la règle.

Le bouton de défilement combine un lien et une icône. Les icônes proviennent d’un service externe chargé par une balise script placée dans le head ; chaque pictogramme s’affiche ensuite avec une balise i portant la classe correspondante. Côté style, on retire le soulignement du lien avec text-decoration: none, puis on le positionne en bas de la bannière avec position: absolute. Retenez ce mécanisme, il resservira : un élément en absolute se cale sur le bord haut, bas, gauche ou droite de son parent, à condition que ce parent soit lui-même en position: relative.

Étape 5 : répéter le même patron pour les services et les cartes produits

À partir d’ici, tout devient plus rapide, car les mêmes outils reviennent. La rangée de services se compose de trois blocs identiques contenant chacun une icône et un court texte. La section entière passe en display: flex pour aligner les trois blocs horizontalement, tandis que chaque bloc passe lui aussi en flex mais avec flex-direction: column, afin d’empiler l’icône au-dessus du texte. Un align-items: center centre le tout. Pour l’espacement horizontal, space-between colle les blocs aux extrémités ; space-evenly donne un rendu plus doux si le premier vous paraît trop brutal.

Les cartes produits reposent sur une idée maligne : au lieu d’insérer une balise img, on crée un lien auquel on applique une image en arrière-plan via background-image. On lui donne une largeur minimale, une hauteur, puis background-size: cover et background-position: center pour que la photo remplisse la carte sans se déformer. La propriété flex: 1 demande à chaque carte de prendre une part égale de l’espace disponible, et flex-wrap: wrap les fait passer à la ligne quand la fenêtre rétrécit. C’est déjà un début d’adaptation aux petits écrans, obtenu sans une seule ligne de code supplémentaire.

Le bandeau qui affiche le nom et le prix suit le principe vu à l’étape précédente : la carte passe en position: relative, le bandeau en position: absolute avec bottom: 0 et width: 100%. Un fond blanc légèrement transparent, noté #FFFFFFDF, laisse deviner la photo en dessous. Le prix reprend le vert clair de la charte, #ADD981, avec un font-weight élevé pour rester lisible. Si l’écart entre le nom et le prix vous semble trop large, jouez sur line-height pour le resserrer.

Un titre de section soigné complète l’ensemble. La petite barre verte sous le titre ne demande aucune image : le pseudo-élément ::before crée un bloc vide, auquel on donne une largeur, une hauteur, une couleur de fond et une position absolue calée en bas du titre.

Étape 6 : composer la galerie avec CSS Grid

La dernière section affiche six photos de tailles différentes, savamment imbriquées. Flexbox atteint ici ses limites : ce travail relève de CSS Grid, qui raisonne en lignes et en colonnes.

Le conteneur reçoit display: grid, une hauteur minimale, puis le découpage de la trame avec grid-template-columns: repeat(4, 1fr) et grid-template-rows: repeat(4, 400px). L’unité fr répartit l’espace disponible en fractions égales, ce qui évite de calculer des largeurs en pixels.

Chaque image se place ensuite individuellement grâce à grid-column et grid-row, qui prennent une ligne de départ et une ligne d’arrivée séparées par une barre oblique. Une image en grid-column: 1/3 s’étend de la première à la troisième ligne verticale de la trame, donc sur deux colonnes. En combinant ces valeurs, on obtient une grande image à gauche, deux images empilées à côté, puis trois autres en dessous, exactement comme sur la maquette.

Un point mérite votre attention. Les propriétés définies plus haut pour les cartes en Flexbox, à savoir la largeur minimale, la hauteur fixe et flex: 1, n’ont aucun sens dans une grille et viennent perturber le placement. La bonne pratique consiste à les déplacer dans une classe séparée, appliquée uniquement aux cartes qui vivent dans un conteneur flex. Les éléments de la grille, eux, ne reçoivent que la classe de base.

Il ne reste que le pied de page. Une balise footer en display: flex avec justify-content: space-between pousse la mention de copyright à gauche et le lien vers les conditions générales à droite. Le symbole de copyright s’écrit avec l’entité ©. Notez que ces mentions légales ne sont pas décoratives : un site marchand affiche des conditions générales de vente, un site sans vente des conditions générales d’utilisation.

Dernière touche, la navigation interne. Donnez un identifiant unique à chaque section avec l’attribut id, puis faites pointer les liens du menu vers #identifiant. Le clic amène directement à la bonne section. Et pour que ce déplacement se fasse en douceur plutôt que d’un saut sec, ajoutez scroll-behavior: smooth sur l’élément html. Une seule ligne de CSS remplace ici une bibliothèque JavaScript entière.

Les erreurs fréquentes qui font perdre du temps

• Créer le fichier au mauvais endroit. Si le dossier images est sélectionné au moment où vous créez index.html, le fichier atterrit dedans. Cliquez d’abord dans la zone vide sous l’arborescence.
• Oublier le point-virgule. Chaque propriété CSS s’achève par un point-virgule, y compris la règle @import des polices. Sans lui, la règle est ignorée sans le moindre message d’erreur.
• Écrire du CSS qui ne s’applique pas. Neuf fois sur dix, la balise link manque dans le head, ou le chemin qu’elle indique ne tient pas compte du dossier css.
• Se tromper de chemin relatif. Depuis le fichier CSS, une image n’est pas dans images/ mais dans ../images/, puisqu’il faut d’abord sortir du dossier css.
• Mélanger les propriétés Flexbox et Grid. Isolez dans une classe à part les réglages propres aux conteneurs flex, sinon ils saboteront votre grille.

Une astuce vaut d’être retenue pour le débogage : quand un bloc refuse de se placer correctement, donnez-lui temporairement une couleur de fond bien voyante. Vous voyez immédiatement où commence et où finit la boîte, ce qui règle la plupart des problèmes de positionnement en quelques secondes. Il suffit ensuite de retirer ces couleurs.

Questions fréquentes

Faut-il un logiciel payant pour suivre ce tutoriel ?

Non. L’éditeur de code utilisé ici est gratuit, l’extension de rechargement automatique aussi, et les polices comme les icônes sont chargées depuis des services gratuits. Un simple éditeur de texte suffirait même à écrire le HTML, au prix d’un confort nettement moindre.

Pourquoi mon image d’arrière-plan ne s’affiche-t-elle pas ?

C’est presque toujours une question de chemin. Le fichier CSS vit dans son propre dossier : il faut donc remonter d’un niveau avec ../ avant d’entrer dans le dossier des images. Vérifiez aussi l’extension exacte du fichier et la présence du point-virgule en fin de ligne.

Faut-il du JavaScript pour cette page ?

Aucune ligne de JavaScript n’est écrite dans ce projet. Le seul script chargé sert à afficher les icônes. Même le défilement fluide vers les ancres est obtenu en CSS avec scroll-behavior: smooth.

Et si mon contenu est déjà rédigé dans Word ?

Inutile de tout retaper. Un convertisseur Word vers HTML transforme vos titres, paragraphes et listes en balises propres, que vous n’avez plus qu’à coller dans les sections créées ici. Pour un contenu brut sans mise en forme, le passage par un outil de conversion texte vers HTML fait gagner autant de temps.

Vous voilà avec une page complète et, surtout, avec des réflexes réutilisables. Découper en boîtes, aligner avec Flexbox, positionner en relatif puis en absolu, composer une trame avec Grid : ces quatre gestes couvrent une bonne partie des maquettes que l’on vous confiera. Le projet des plantes n’est qu’un prétexte. Reprenez la même méthode sur votre propre maquette, changez les images et les couleurs, et vous verrez que la montagne du départ ressemblait surtout à un empilement de petites boîtes.