Mais avant tout, il va nous falloir mettre en place notre environnement de travail, c’est-à-dire réunir les différents éléments qui vont nous permettre de pouvoir coder en HTML et en CSS.
Pour coder en HTML et en CSS, cela va être très simple puisque nous n’aurons besoin que d’un éditeur de texte.
Qu’est-ce qu’un éditeur de texte ?
Un éditeur de texte est un programme qui va nous permettre d’écrire des lignes de code et de simplifier l’écriture de ce code en embarquant une panoplie de fonctionnalités utiles comme l’auto-complétion de certaines commandes de code et etc.
Un éditeur de texte ne doit pas être confondu avec un outil de traitement de texte comme Word. L’éditeur de texte a véritablement vocation à créer des pages de code dans n’importe quel langage comme le HTML, le CSS, le JavaScript ou même encore le PHP en utilisant du texte brut tandis qu’un outil de traitement de texte comme Word permet de créer du texte « enrichi » c’est-à-dire du texte mis en forme (choix de l’alignement, de la police, du poids de celle-ci, etc.).
Aujourd’hui, chaque système d’exploitation reconnu (Windows, Mac, Linux) embarque son ou ses propres éditeurs de texte nativement, ce qui signifie que votre ordinateur dispose déjà certainement d’un éditeur de texte pré-installé vous permettant de créer des pages de code en HTML, CSS, etc.
Comment bien choisir son éditeur de texte ?
Il existe aujourd’hui des milliers d’éditeurs disponibles sur le web.
Certains fonctionnent exclusivement sous certains environnements (Windows, Mac Os, etc.) tandis que d’autres vont être cross-plateformes (fonctionner sous plusieurs environnements). Certains éditeurs de texte vont être gratuits tandis que d’autres vont être payants ou disponibles sous forme d’abonnement. Le plus connu des éditeurs de texte est certainement NotePad++, le fameux éditeur fonctionnant avec Windows.
Un éditeur va donc nous permettre de pouvoir écrire des pages de code et de les enregistrer au bon format (c’est-à-dire avec la bonne extension). Un bon éditeur de texte est selon moi un éditeur qui va proposer différentes options pour vous aider à coder. Parmi ces options, on peut notamment citer :
- La mise en couleur des différents éléments d’un langage informatique pour pouvoir les distinguer (un bon éditeur de texte fera apparaitre les éléments HTML d’une couleur différente des attributs, etc.) ;
- L’affichage d’indications lorsque l’on fait une faute de syntaxe dans le code avec une explication du problème en question ;
- L’auto-complétion des balises (un bon éditeur écrira automatiquement la balise fermante d’un élément HTML par exemple dès que vous aurez écrit la balise ouvrante) ;
- Des bibliothèques (notamment jQuery) intégrées ou téléchargeables et installables en 1 clic ;
- Une indentation automatique et pertinente.
Aux vues de ce que nous allons réaliser durant ce cours, et pour un débutant, la plupart des éditeurs vont se valoir et vont parfaitement convenir. Je vous conseille donc simplement d’en trouver un compatible avec votre système et qui a déjà fait ses preuves.
Personnellement, j’utilise aujourd’hui Visual Studio Code, le célèbre IDE de Microsoft. Un IDE est un environnement de développement intégré : c’est grosso-modo un logiciel qui contient un éditeur ainsi que d’autres fonctionnalités intéressantes pour les développeurs.
Visual Studio Code est gratuit, multiplateformes et il dispose de toutes les fonctionnalités qu’un développeur peut attendre ainsi que d’une très bonne ergonomie. Vous pouvez le télécharger à l’adresse suivante : https://code.visualstudio.com/.
Voici une liste d’autres éditeurs reconnus si jamais vous voulez davantage de choix :
- Atom : Atom est doté d’une excellente ergonomie qui facilite grandement la prise en main et l’approche du code pour les nouveaux développeurs. Cet éditeur de texte dispose de toutes les fonctions qu’on attend d’un bon éditeur : bibliothèques intégrées, auto-complétion des balises, etc.
- NotePad++ : Certainement l’éditeur de texte le plus connu de tous les temps, NotePad++ est également l’un des plus anciens. Il a passé le test du temps et a su s’adapter au fur et à mesure en ajoutant des fonctionnalités régulièrement comme l’auto-complétion des balises, le surlignage des erreurs de syntaxe dans le code etc. Le seul bémol selon moi reste son interface qui est à peaufiner.
- Brackets : Brackets est un éditeur très particulier puisqu’il est tourné uniquement vers les langages de développement front-end (c’est-à-dire HTML, CSS et JavaScript). Cependant, il dispose d’une excellente ergonomie (UI / UX) et d’un support extensif pour les langages supportés.
Une fois l’éditeur de votre choix installé, n’hésitez pas à l’ouvrir pour vous familiariser avec son affichage et découvrir les nombreuses options qu’il propose.
La plupart des éditeurs de texte ont aujourd’hui un fond foncé lorsque vous créez une nouvelle page. Si ce n’est pas le cas, je vous conseille fortement de changer la couleur de fond (vous devrez certainement également changer la couleur de votre code afin d’y voir) pour coder avec un plus grand confort visuel.
Logiciel éditeur de texte contre éditeur en ligne
Si vous vous intéressez à la programmation, vous connaissez peut-être les sites codepen.io ou jsbin.com ? Ces deux sites permettent d’écrire du code HTML, CSS ou JavaScript et de voir le résultat immédiatement.
En cela, ils servent le même rôle qu’un éditeur de texte HTML mais sont encore plus pratiques, notamment lorsque vous voulez tester rapidement un bout de code ou pour des démonstrations de cours. J’utiliserai d’ailleurs souvent codepen.io dans mes leçons pour vous fournir directement un code et pour que vous puissiez le voir immédiatement en action ou le modifier.
Cependant, retenez bien qu’ils sont aussi limités car il y a plusieurs choses que vous ne pourrez pas faire en termes de développement avec ces sites. Parmi celles-ci, on notera que vous ne pourrez par exemple pas exécuter de code PHP ou un quelconque code utilisant un langage dit server-side ou encore que vous ne pourrez pas à proprement parler créer plusieurs pages et les lier entre elles (comme c’est le cas lorsque l’on doit créer un site) ou du moins pas gratuitement.
Cette solution n’est donc pas satisfaisante si vous souhaitez véritablement vous lancer dans le développement et c’est la raison pour laquelle tous les développeurs utilisent un éditeur de texte.
Je vous conseille donc durant ce cours d’utiliser un maximum votre éditeur pour bien vous familiariser avec celui-ci et pour assimiler les différentes syntaxes des langages que l’on va étudier plutôt que de simplement copier et / ou utiliser mes codes que je mettrai à disposition via CodePen.