5 étapes pour coder votre première landing page

Vous souhaitez créer votre première page d'accueil mais ne savez pas par où commencer ? Pour vous aider, nous avons réduit le processus à cinq étapes, afin que vous puissiez construire votre première page web dès aujourd'hui. Lisez la suite pour en savoir plus !
Sommaire
Le but de votre landing page est de promouvoir votre marque et de convertir les utilisateurs en clients potentiels. Cette page est le point d'entrée sur votre site et résume votre marque. Nous savons tous combien la première impression est importante, c'est pourquoi votre page d'accueil doit être claire, informative et percutante. Pour vous aider, nous avons réduit le processus à cinq étapes simples, afin que vous puissiez construire votre première page d'accueil dès aujourd'hui.

Étape 1. Installez-vous et prenez un stylo 

Il est extrêmement important d'avoir une configuration correcte avant de commencer à coder. La configuration comprend non seulement le téléchargement d'un éditeur de texte fiable, mais aussi la planification du contour de votre page. Nous recommandons Sublime Text comme éditeur de texte, car il possède des fonctions intéressantes telles que l'auto-complétion et la mise en évidence de la syntaxe, ce qui rend l'apprentissage du codage beaucoup plus facile (et plus joli !)

Ensuite, pensez à la structure de votre page et à l'aspect que vous souhaitez lui donner.  Décomposez vos idées en sections et dessinez ces blocs sur une feuille de papier pour vous aider à créer la maquette de ce que vous allez construire. Ce rapide croquis vous sera très utile pour l'étape 2 ! N'oublie pas de télécharger un navigateur tel que Chrome (le préféré des développeurs). Vous en aurez besoin pour afficher votre code et vous permettre de tester au fur et à mesure et de faire des modifications rapides à votre code.  Vous trouverez ci-dessous un exemple d'esquisse de maquette.
Croquis d'une maquette


Étape 2. Donnez vie à votre maquette

Bien que le HTML ne soit pas le plus esthétique sans le CSS, une structure propre est intrinsèque à la construction d'une belle page d'accueil. Le document HTML est divisé en deux parties : <head></head> et <body></body>. Le <head> conserve l'intelligence de la page, tandis que le <body> conserve la structure et le contenu. Pour une structure propre, chaque section de votre esquisse doit être entourée de sa propre balise <div>. 

N'hésitez pas à ajouter des classes à ces balises <div>, afin de les cibler individuellement et d'ajouter un style CSS spécifique.  (Nous aborderons le style à l'étape 4 !) N'oubliez pas d'utiliser les balises d'en-tête et de paragraphe lorsque vous ajoutez votre texte. Cela ajoutera de la structure à votre contenu et fera ressortir les éléments de texte importants dans toute votre page. Vous trouverez ci-dessous un exemple de section de bannière de haut de page incluse dans une balise <div> avec une classe de bannière, qui contient une balise d'en-tête, une balise de paragraphe et un lien d'appel à l'action.


<div class="banner">   <h1>Change your life, learn to code</h1>   <p>Le Wagon brings technical skills to creative people</p>   <a href="https://www.lewagon.com" target="_blank" class="btn-blue">Apply now</a> </div>


Étape 3. Pensez visuel

Maintenant que votre structure et votre contenu sont en place, votre site commence à prendre forme. Cependant, un utilisateur peut facilement être rebuté par trop de texte, c'est pourquoi l'ajout d'images percutantes peut aider à engager les utilisateurs et à transformer votre site. L'utilisation d'images soigneusement sélectionnées est un moyen puissant d'évoquer des émotions positives et de communiquer le message de votre marque à des clients potentiels.

Les pages d'accueil comportent souvent une bannière avec une grande image de fond et du texte superposé en haut. L'objectif est d'attirer l'attention de l'utilisateur sur le "call to action" et de lui donner envie d'en savoir plus sur votre marque et votre site. L'utilisation d'images de haute qualité est importante, mais ne vous inquiétez pas si vous n'êtes pas vous-même photographe, vous pouvez utiliser des sites tels que unsplash.com pour trouver ce dont vous avez besoin. 

Étape 4. Mettons un peu de style

Le CSS est ce que nous utiliserons pour améliorer la structure de notre maquette HTML à partir de l'étape 2. Avant de coder, réfléchissez à votre public cible et à l'impact que cela aura sur votre conception. Nous recommandons de ne pas utiliser plus de trois couleurs pour l'ensemble de votre site ; une couleur dominante, associée à votre marque, et deux couleurs complémentaires pour créer votre palette de couleurs. Ne vous inquiétez pas si vous n'êtes pas un créatif sûr de vous, heureusement il existe d'excellents outils pour vous aider, tels que colorhunt et les coolors.

La cohérence est essentielle en matière de style, non seulement dans votre choix de couleurs, mais aussi dans vos polices de caractères. Le fait d'avoir un maximum de deux polices différentes pour vos titres et le texte de vos paragraphes assurera la continuité sur l'ensemble de votre site et rendra votre marque plus crédible et plus attrayante. Google fonts est gratuit, facile à utiliser et présente un mélange éclectique de styles. N'oubliez pas que si vous avez ajouté des classes à vos sections HTML à l'étape 2, vous pouvez désormais leur ajouter un style individuel dans votre CSS. Vous trouverez ci-dessous un exemple de style CSS pour la classe de bannière que nous avons créée à l'étape 2, avec un exemple de mise en œuvre d'une image en background percutante à l'étape 3. 


.banner {   background-image: url('images/background.jpg');   background-size: cover;   background-position: center;   padding: 150px 0;   text-align: center; }

Étape 5. Rendez votre landing page responsive

Jusqu'à présent, nous avons construit la structure de la page en HTML, ajouté des images percutantes et l'avons stylisée avec du CSS. Bien qu'il soit très beau sur le bureau, sans aucune requête média, votre site aura probablement l'air un peu bancal sur mobile. De nos jours, les smartphones génèrent un pourcentage énorme du trafic web, c'est pourquoi il est si important de rendre votre page d'accueil responsive pour ces appareils. 

L'ajout de requêtes médias au fichier CSS nous permet d'adapter le comportement des éléments en fonction de la taille de l'appareil de l'utilisateur. Cela garantit une bonne expérience utilisateur, quel que soit l'appareil sur lequel il se trouve. Par exemple, disons que vous souhaitez n'avoir qu'une colonne au lieu de trois pour la grille de vos cartes sur le mobile et la tablette, vous pouvez ajouter ce qui suit à votre CSS :


@media (max-width: 800px) {   .cards {     grid-template-columns: 1fr;   } }

Cela signifie que lorsque la taille de l'écran du navigateur est inférieure à 800px, la règle de style ci-dessous sera appliquée. Vous pouvez ajouter différentes règles de style à plusieurs points d'arrêt.  Vous trouverez ci-dessous une répartition des largeurs de périphérique que vous pouvez utiliser comme modèle pour le style de votre requête média : 


// Smallest device @media (min-width: 100px) and (max-width: 575px) {   // CSS for this breakpoint }  // Small devices (landscape phones, 576px and up) @media (min-width: 576px) {    // CSS for this breakpoint }  // Medium devices (tablets, 768px and up) @media (min-width: 768px) {    // CSS for this breakpoint }  // Large devices (desktops, 992px and up) @media (min-width: 992px) {    // CSS for this breakpoint }  // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) {    // CSS for this breakpoint }


Prenez le temps de planifier la conception de votre page d'accueil et établissez une structure claire de la façon dont vous envisagez l'aspect de la page finale. Cette base claire, combinée à des images significatives et à un style cohérent, vous donnera la recette parfaite pour une page puissante. En décomposant le processus en cinq étapes, vous serez bientôt sur la bonne voie pour construire votre première page d'accueil.

Si vous avez aimé cet article, n'hésitez pas à vous inscrire à l'un de nos workshops gratuits sur notre page meetup pour apprendre à coder votre première page web, savoir comment créer un bon produit web ou encore tout savoir sur les APIs ! Découvrez également notre série de webinars gratuits en anglais sur le développement web et la data analyse.
Les internautes ont également consulté :
Pour développe mes compétences
Formation développeur web
Formation data scientist
Formation data analyst
Les internautes ont également consulté :
Immigrating to Canada: How he landed an Analyst Developer position in Montréal

Olivier Riccini est analyste programmeur chez CGI. Avant cela, alors qu’il avait envie de partir

Suscribe to our newsletter

Receive a monthly newsletter with personalized tech tips.