Les outils utiles pour son site web

Pour réussir l’intégration de son site web depuis la maquette, modifier son site  ou analyser le travail des autres développeur, il faut pouvoir s’appuyer sur les outils qui sont disponible depuis le navigateur.
Personnellement j’utilise Firefox, donc  la présentation de ses outils se fera sur ce navigateur.

La console de développement

Outil très important et même primordiale pour pouvoir scruter les entrailles de son site internet. Généralement sous le raccourci F12 sur tout bon navigateur, la console de développement permet de voir le code source en HTML, ainsi que le CSS , et la force de ces outils est de pouvoir faire des changements et de voir le résultat en direct. Je conseille à tous les novices de tester constamment sur la console leurs changements CSS, avant de les transférer pour éviter les erreurs, comme la ligne CSS et le nom de fichier son mentionné, il n’y à plus qu’à copier coller les modifications au bon endroit.
En allant même un peu plus loin on peut tester les code JavaScript dans la console.
Cet outil est tellement vaste qu’il mériterait un article complet, une prochaine fois peut être 😉

Web developper, l’addon obligatoire.

Disponible à cette adresse pour Firefox https://addons.mozilla.org/fr/firefox/addon/web-developer/
Mais aussi disponible sur Chrome, Web developper est un ensemble d’outil qui permet de pouvoir tester beaucoup d’aspect de votre site web, tel que les liens, la hiérarchie des titres, les  versions responsives, le poids des images, validation W3C… plein de chose à tester avant de mettre son site en ligne pour avoir des bases solides.

ColorZilla, le coup de pouce graphique

Disponible à cette adresse pour Firefox
https://addons.mozilla.org/fr/firefox/addon/colorzilla/
C’est l’add-on qu’il vous faut pour garder vos couleurs sous la main.
Vous pouvez cliquer partout sur une page web pour y pointer une couleur qui sera directement copier dans le presse-papier en valeur hexadécimal (#fff, #F2F2F2…) et que vous pouvez coller partout, dans Photoshop, sur votre CSS…
Donc un add-on très intéressant si vous testez vos couleurs de votre charte graphique.

Measure it pour être vraiment précis

Disponible à cette adresse pour Firefox
https://addons.mozilla.org/fr/firefox/addon/measureit/
Outil vraiment utile pour calculer ces marges et ses positions pour pouvoir aligner des blocs, c’est une règle en pixel dans votre navigateur web, mesurer des largeurs ou des hauteurs.

Avec tous ces outils et l’article sur bien réussir votre site web  vous ne pourrez que faire d’excellent site web 😉