Installation

Trois choses, et c’est tout pour le semestre

AstuceBonne nouvelle

Tout le cours se fait avec des fichiers simples ouverts dans un navigateur. Il n’y a rien d’autre à installer : ni Node, ni npm, ni compilateur.

Le navigateur

Installez Firefox ou Chrome.

NotePourquoi pas Edge ou Safari ?

Ils fonctionnent très bien pour naviguer. Mais leurs outils de développement sont un peu différents de ce qui sera montré en cours. Pour suivre sans se poser de questions, prenez Firefox ou Chrome.

Visual Studio Code

Téléchargez-le sur https://code.visualstudio.com/ et installez-le.

AvertissementWindows : cochez la bonne case

Pendant l’installation, cochez « Ajouter l’action Ouvrir avec Code au menu contextuel ». Ça permet ensuite de faire clic droit sur un dossier → Ouvrir avec Code.

Le français, si vous le souhaitez

VS Code s’installe en anglais. Pour le passer en français :

  1. Icône Extensions (les carrés, dans la barre de gauche)
  2. Cherchez French Language Pack
  3. Install, puis redémarrez VS Code
NoteFaut-il vraiment le mettre en français ?

C’est un vrai choix. La quasi-totalité de la documentation, des tutoriels et des messages d’erreur que vous rencontrerez sont en anglais. Garder VS Code en anglais aide à s’habituer au vocabulaire.

Dans ce cours, les menus sont donnés dans les deux langues.

L’extension Live Server

C’est la seule extension indispensable.

  1. Icône Extensions dans la barre de gauche
  2. Cherchez Live Server
  3. Choisissez celle de Ritwick Dey (plusieurs dizaines de millions de téléchargements)
  4. Install

Utilisation : clic droit sur un fichier .html → Open with Live Server. Votre navigateur s’ouvre, et la page se recharge automatiquement à chaque enregistrement.

AstuceDeux extensions optionnelles, mais très utiles
  • Prettier — Code formatter : remet le code au propre proprement
  • Error Lens : affiche les erreurs directement sur la ligne concernée

Préparer son dossier de travail

Créez une fois pour toutes un dossier web101 dans vos Documents, et travaillez toujours dedans.

Documents/
└── web101/
    ├── seance01/
    ├── seance02/
    └── …
ImportantDans VS Code, on ouvre le DOSSIER

Menu Fichier → Ouvrir le dossier…, jamais Ouvrir un fichier.

VS Code a besoin de voir tout le dossier pour retrouver vos images, vos fichiers CSS et vos scripts. Ouvrir un fichier isolé fait échouer la moitié des choses sans explication.

Vérifier que tout marche

  1. Ouvrez le dossier web101 dans VS Code

  2. Créez un fichier test.html avec :

    test.html
    <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>
  </head>
  <body>
    <h1>Ça marche !</h1>
    <script>
      console.log("Le JavaScript aussi.");
    </script>
  </body>
</html>

  3. Clic droit → Open with Live Server

  4. Dans le navigateur : F12 → onglet Console

Vous devez voir « Ça marche ! » dans la page et « Le JavaScript aussi. » dans la console.

AstuceSi c’est le cas, vous êtes prêt·e

Vous avez tout ce qu’il faut pour les 14 séances.