Installation des outils de base

Dans cet article, nous prendrons uniquement le bagage minimum : un éditeur de texte, ainsi que des navigateurs web récents.

Vous disposez sans doute déjà d'un éditeur de texte basique sur votre ordinateur. Par défaut, Windows inclut Bloc-notes, et macOS inclut TextEdit. Pour les distributions Linux, cela peut varier d'une à l'autre, par exemple Ubuntu 22.04 permet d'utiliser l'éditeur de texte GNOME par défaut.

Pour le développement web, Notepad ou TextEdit seront certainement limités. Nous vous recommandons de démarrer avec Visual Studio Code, un éditeur gratuit et open source qui permet des prévisualisations en direct et qui fournit des indications pour la complétion du code.

Pour le moment, nous allons installer quelques navigateurs de bureau dans lesquels nous pourrons tester notre code. Sélectionnez votre système d'exploitation et utilisez les liens associés pour télécharger les installeurs des navigateurs les plus répandus :

• Génériques (Linux, Windows, macOS)
  • Firefox
  • Chrome
  • Opera
  • Brave
• Windows
  • Edge (Edge est préinstallé par défaut sur Windows 10 et 11)
• macOS
  • Safari (Safari est présent par défaut sur macOS et iOS)

Avant d'aller plus loin, installez au moins deux navigateurs différents afin de pouvoir tester vos sites ou applications web avec.

Pour que certains exemples fonctionnent correctement, il vous faudra avoir mis en place un serveur web local. Pour cela, vous pouvez consulter l'article Comment configurer un serveur de test local ?

La liste ci-après peut sembler longue, mais il est tout à fait possible de se lancer dans du développement web sans pour autant connaître dans les détails ce qui suit.

Un ordinateur

Si vous lisez cet article depuis un téléphone ou l'ordinateur d'une bibliothèque, sachez qu'il est préférable de disposer d'un ordinateur (de bureau ou portable) sous Linux, Windows ou macOS pour le développement web.

Un éditeur de texte

Un logiciel qui vous permettra d'écrire votre code. Il peut s'agir d'un éditeur de texte (comme Visual Studio Code, Notepad++, Sublime Text, Pulsar, GNU Emacs, ou VIM), ou d'un éditeur hybride (comme Dreamweaver ou WebStorm). Les éditeurs de texte graphiques comme Office Word ne doivent pas être utilisés, car ils ne permettent pas d'enregistrer des fichiers texte simple et contiennent des éléments qui interfèrent avec les moteurs de rendu des navigateurs web.

Des navigateurs web

Les navigateurs vous permettront de tester votre code. Les navigateurs les plus répandus sont Firefox, Chrome, Safari, Edge. Il est également recommandé de tester votre site sur des appareils mobiles et sur d'éventuels anciens navigateurs qui seraient utilisés par votre public. Lynx est un navigateur web texte, qui s'affiche dans un terminal, et qui permet de voir comment le site peut être utilisé par les personnes en situation de handicap visuel.

Un éditeur graphique

GIMP, Figma, Paint.NET, Photoshop, Sketch ou XD vous permettent d'éditer des images pour les visuels de vos pages web.

Un système de gestion de version

Qu'il s'agisse de travailler en équipe sur les mêmes fichiers, d'avoir un serveur de stockage, de partager du code ou d'éviter les conflits de version, vous devrez utiliser un outil de gestion de version. Git est le plus répandu aujourd'hui, et permet d'utiliser des plateformes d'hébergement comme GitHub ou GitLab.

Un client (S)FTP

Certains hébergeurs vous permettent de téléverser vos fichiers web via (S)FTP (même si Git tend à remplacer (S)FTP). Il existe de nombreux clients (S)FTP comme Cyberduck, Fetch, WinSCP, et FileZilla.

Un système d'automatisation

Des systèmes comme Webpack, Grunt, ou Gulp vous permettront d'automatiser certaines tâches répétitives comme la minification du code et le lancement des tests.

Bibliothèques et frameworks

Ces outils vous permettront de gagner en efficacité pour implémenter les fonctionnalités les plus communes. Une bibliothèque prendra généralement la forme d'un fichier JavaScript ou CSS qui fournit une fonctionnalité prête à l'usage que vous pouvez inclure dans votre code. Un framework va plus loin et fournit un système complet, avec une surcouche spécifique dans laquelle vous pouvez écrire votre application web.

Cette liste n'est pas exhaustive, il existe de nombreux autres outils qui pourront vous être utiles.

• Aperçu : Commencer avec le Web
• Suivant