VS Code · Leçon 2

Mon premier projet

Créer un dossier de projet, ses fichiers HTML, CSS et JS, les relier entre eux, et voir le résultat dans le navigateur, avec rechargement automatique.

Un projet = un dossier

Un site, c'est un dossier qui contient tous ses fichiers. On ouvre toujours le dossier entier dans VS Code, pas un fichier isolé.

  1. Crée un dossier mon-site (par exemple dans Documents).
  2. Dans VS Code : Fichier › Ouvrir le dossier… et choisis mon-site.
    Ou : clic droit sur le dossier › Ouvrir avec Code.
  3. Si VS Code demande « Faites-vous confiance aux auteurs de ce dossier ? », réponds Oui : c'est ton propre dossier.

Créer les fichiers

Dans l'explorateur, survole le nom du dossier et clique sur l'icône Nouveau fichier (feuille avec un +). Crée ces trois fichiers :

mon-site/
├── index.html   ← la page d'accueil (ce nom est une convention)
├── style.css    ← l'apparence
└── script.js    ← le comportement
Noms de fichiers En minuscules, sans espace ni accent : ma-page.html ✅, Ma Page.html ❌. Sur un serveur en ligne, Photo.png et photo.png sont deux fichiers différents !

Emmet : écrire du HTML à toute vitesse

VS Code intègre Emmet : tu tapes une abréviation, puis Tab (ou Entrée), et elle se transforme en HTML. La plus utile : dans index.html vide, tape ! puis Tab pour obtenir le squelette complet.

Essaie ici : modifie l'abréviation ou clique sur un exemple.

Exemples :
SymboleSignificationExemple
>enfant (dans)ul>li
+frère (à côté)h2+p
*3répéter 3 foisli*3
.nom / #nomclasse / identifiantdiv.carte, ul#menu
{texte}contenu textebutton{OK}
$numéro de répétitionli.item$*3
Squelette en français Le ! d'Emmet écrit <html lang="en"> : pense à remplacer en par fr, ou règle-le une fois pour toutes (leçon suivante).

Défis Emmet

Trouve l'abréviation qui produit exactement ce code :

À toi !

À toi !

À toi !

Relier le CSS et le JavaScript

Les trois fichiers ne se connaissent pas tant qu'on ne les relie pas dans index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon site</title>
  <link rel="stylesheet" href="style.css">     ← le CSS
</head>
<body>
  <h1>Bonjour !</h1>
  <script src="script.js"></script>          ← le JS, juste avant </body>
</body>
</html>

Le chemin style.css est relatif : le fichier est dans le même dossier que index.html. Avec un dossier css/, tu écrirais css/style.css.

Autocomplétion Tape link:css puis Tab : Emmet écrit la balise <link> pour toi. Pour le script : script:src.

Enregistrer

Ctrl+S après chaque modification. Tant que l'onglet affiche un ●, le navigateur ne voit pas tes changements.

Pour ne plus y penser : Fichier › Enregistrement automatique.

Voir le résultat dans le navigateur

Méthode simple

Double-clique sur index.html dans le dossier de ton ordinateur. Après chaque modification : enregistrer, puis F5 dans le navigateur.

Méthode pro : Live Server ✅

Une extension qui ouvre ta page et la recharge toute seule à chaque enregistrement.

Installer Live Server

  1. Extensions (Ctrl+Maj+X) › cherche Live Server (auteur : Ritwick Dey) › Installer.
  2. Ouvre index.html, puis clique sur Go Live en bas à droite (ou clic droit dans le fichier › Open with Live Server).
  3. Le navigateur s'ouvre sur une adresse du type http://127.0.0.1:5500. Modifie ton code, enregistre : la page se met à jour !
Bonus Avec Live Server, ta page est servie comme sur un vrai site (adresse http://). Certaines fonctionnalités, comme les vérifications de ce cours ou fetch(), ne marchent correctement que comme ça.

Et pour voir tes console.log() : dans le navigateur, F12 › onglet Console.

Tu modifies style.css, mais la page ne change pas dans le navigateur. Quelle est la cause la plus probable ?

  1. Le navigateur ne supporte pas le CSS
  2. Il faut redémarrer l'ordinateur
  3. Le fichier n'est pas enregistré, ou pas relié avec <link>

Vérifie le ● dans l'onglet, puis la balise <link rel="stylesheet" href="style.css"> et l'orthographe exacte du nom du fichier.

À retenir