Attaquons-nous à une autre problématique, celle de rajouter du code dans un projet existant. Cela peut faire peur, c’est normal. On a peur de mal faire, de casser ce qui fonctionne déjà, ou tout simplement on ne sait pas comment s’y prendre !
Pour notre exemple, je vous propose de rester sur votre projet de portfolio. Maintenant que vous avez une belle grille de photos et votre formulaire de contact, vous souhaitez ajouter une navigation. Elle permettra à votre utilisateur d’aller plus rapidement là où il a besoin d’aller.
Étape 1 : posez-vous des questions pour identifier l’objectif visé
Posez-vous toujours les bonnes questions avant de vous lancer !
Qu’est-ce que je souhaite faire ?
Ajouter une navigation. Vous avez vu sur plusieurs sites internet une barre qui reste collée en permanence en haut de la page. C’est plus pratique et plus efficace qu’un menu déroulant. Vous souhaitez faire la même chose. Il y aura 3 liens vers 3 pages ; l’accueil, le portfolio et la partie À propos.
De quel langage/quelle technologie j’ai besoin ?
Il semblerait que de l’HTML et du CSS soient bien suffisants.
Quels sont les outils à ma disposition ?
Vous avez les compétences nécessaires en HTML/CSS, et vous avez trouvé des exemples de code sur internet.
Quel serait mon MVP ?
Ici la fonctionnalité est suffisamment petite pour être un MVP en elle-même.
Étape 2 : isolez la fonctionnalité
Pour cet exemple, je vous conseille de faire cette fonctionnalité à part dans un premier temps. Pourquoi ? Vous allez pouvoir maîtriser votre code, sans avoir à gérer le contexte et la complexité du reste du projet.
Pas besoin de relier tous les fichiers, de configurer tout un projet… Cela vous permet de vous concentrer sur l’essentiel, votre fonctionnalité.
Vous pouvez accéder au code HTML - CSS - JavaScript, à la page web du résultat et à la console. Pas besoin de créer de compte et c’est gratuit. (La console s’affiche en cliquant en bas à gauche, et vous pouvez changer le format d’affichage en haut à droite) :
Un découpage facile, lorsque vous faites du code dit front-end (à l’inverse du back-end), c’est de séparer le squelette du style et de la logique. En web, cela se fait avec les 3 langages. D’abord la partie HTML, puis CSS et enfin JavaScript.
Parfois vous devrez appliquer des contraintes, par exemple sur le visuel que l’on vous aura donné depuis une maquette décidée par le client ou l’équipe UI/UX. Sinon, c’est à vous de faire ce travail.
Étape 3 : utilisez les ressources disponibles
En tapant “top navigation bar html” sur Google, vous avez trouvé un exemple de code sur W3School.
Il vous propose de commencer par mettre la partie HTML :
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>Vous ajoutez sur CodePen ce code dans l’encart HTML. Le site exécute automatiquement votre code dès qu’il est tapé. Sinon, c’est qu’il faut appuyer sur le bouton Run .
Alors, qu’est-ce qui s’affiche ? Vous pouvez voir une suite de liens HTML simples, en haut à gauche. Mais on est d’accord, c’est pas très joli !
Ensuite, la deuxième étape vous permet d’ajouter la partie CSS.
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}Les commentaires vous permettent de mieux comprendre afin de changer le style et les couleurs que vous souhaitez. Testez jusqu'à trouver ce que vous souhaitez. N’ayez pas peur non plus de refaire des recherches pour trouver de l’inspiration pour le style aussi !
Vous avez votre barre de navigation comme vous le voulez ? Parfait, vous allez pouvoir l'ajouter à votre projet !
Étape 4 : intégrez la solution à votre projet
Comme pour votre intégration sur le projet test CodePen, vous allez d’abord ajouter la structure de la barre de navigation en HTML, puis le CSS. Avancez petit pas par petit pas, et surtout, testez le plus régulièrement possible que vous n’avez rien cassé du projet existant :
Commencez par mettre la partie HTML (il n’y a pas beaucoup de lignes).
Puis testez la fonctionnalité.
Ensuite, intégrez chaque groupe de code CSS un par un.
Et testez à chaque fois.
Même si tout a fonctionné comme vous le souhaitiez dans CodePen, peut-être que le changement de couleur pourrait avoir un impact sur un autre élément de la page, par exemple.
Une fois la fonctionnalité intégrée, relisez-vous. Testez plusieurs cas d’utilisation une dernière fois avant de faire votre commit sur Git.
Si vous le pouvez, demandez à un pair de relire votre code. La code review (ou revue de code, en français) est très efficace pour éviter les bêtises ! Quand on travaille à plusieurs, cela permet de garder aussi une bonne communication.
En résumé
Le découpage sur un projet web peut se faire en utilisant chacun des langages que vous utilisez (HTML / CSS / JavaScript).
CodePen est un outil de code en ligne qui vous épargne la structure d’un projet.
Coder votre fonctionnalité à part réduit les chances de casser le projet et facilite le développement de celle-ci.
Si vous travaillez à plusieurs sur un projet, la code review est un super outil de vigilance et de communication.
Allez, on voit un dernier cas d’exemple ? Pour celui-ci, nous allons explorer les bonnes pratiques pour modifier un code existant. Sans le casser, bien sûr !
