TP1re année14 livrables
Prendre en main ses outils
Avant de coder, on s'équipe. Un développeur a trois outils qu'il manie toute la journée : un éditeur de code, un terminal, un navigateur. Aujourd'hui, on les installe, on les apprivoise, et on prépare ton espace de travail pour toute l'année.
Par Josselyn C., prof de BTS SIO. Publié le , mis à jour le .
- Objectif
- installer et maîtriser l'éditeur VS Code, le terminal intégré et le navigateur ; organiser un projet
- On manipule
- Visual Studio Code, le terminal, un navigateur, un premier dossier de projet
- Pré-requis
- aucun. On part de zéro.
- Pour qui
- SLAM et SISR, 1re année
- Durée
- environ 3 h
Compétences : C1.6 Organiser son développement professionnel
Ces outils te serviront à CHAQUE séance Ateliers (HTML, CSS, Git, SQL…). Autant bien les prendre en main.
Avant de commencer
Pourquoi bien s'outiller change tout
On n'écrit pas du code dans Word. Un développeur travaille avec des outils faits pour ça, qui lui font gagner un temps fou : un éditeur de code (qui colore, complète, signale les erreurs), un terminal (pour lancer des commandes), un navigateur (pour tester et inspecter). Bien les connaître dès maintenant, c'est s'éviter des galères toute l'année. On pose les fondations.
Ce que tu sauras faire à la fin
| Outil / notion | Tu sauras… |
|---|---|
| VS Code | installer l'éditeur, t'y repérer, créer/ouvrir des fichiers |
| Ton système | connaître les raccourcis et chemins de TON OS (Windows / macOS / Linux) |
| Les fichiers | comprendre les extensions (.html, .css) et les afficher |
| Le projet | organiser un dossier de travail proprement, bien nommer |
| Le terminal intégré | lancer des commandes sans quitter l'éditeur |
| Productivité | onglets, multi-curseur, palette de commandes |
| Le navigateur | ouvrir ta page et l'inspecter (DevTools) |
| Live Server | installer l'extension et voir ta page se recharger en direct |
0. Les 3 outils du développeur
Quasi tout ce que tu feras cette année passe par trois outils. Voici le rôle de chacun.
Le trio du développeur web : on écrit dans l'éditeur, on exécute via le terminal, on visualise dans le navigateur.
| Outil | À quoi il sert | Un exemple cette année |
|---|---|---|
| Éditeur de code (VS Code) | écrire et organiser ton code, avec coloration et aide | écrire une page HTML |
| Terminal | donner des ordres à la machine en tapant des commandes | lancer Git, démarrer un serveur |
| Navigateur | afficher ta page web et voir « sous le capot » | tester ta page, inspecter son code |
Flag A1
Checkpoint
Cite les 3 outils du développeur et, en une phrase chacun, à quoi ils servent.
Rends : ta réponse (3 lignes).
1. C'est quoi un éditeur de code ?
Un éditeur de code est un logiciel pour écrire du code — pas du texte mis en page. À la différence de Word, il comprend ce que tu écris : il colore les mots-clés, complète automatiquement, aligne, et signale les erreurs.
| Ce que fait l'éditeur | Pourquoi c'est utile |
|---|---|
| Coloration syntaxique | chaque type de mot a sa couleur → tu repères les fautes d'un coup d'œil |
| Auto-complétion | il propose la suite → tu tapes moins, tu te trompes moins |
| Soulignement des erreurs | une vague rouge sous une faute → tu corriges avant de tester |
| Indentation | il aligne ton code → plus lisible |
Le plus utilisé au monde : Visual Studio Code (VS Code), gratuit, édité par Microsoft, dispo sur Windows, macOS et Linux. C'est celui qu'on prend.
VS Code vs les alternatives — pourquoi lui ?
Il existe d'autres éditeurs. Le tableau ci-dessous t'explique pourquoi le secteur s'est standardisé sur VS Code.
| Éditeur | Gratuit ? | Extensions ? | Terminal intégré ? | Pour qui ? |
|---|---|---|---|---|
| VS Code | ✅ oui | ✅ 50 000+ | ✅ oui | tout le monde — standard du secteur |
| Notepad++ | ✅ oui | limité | ❌ non | petites modifs rapides sur Windows |
| Sublime Text | ⚠️ gratuit / licence $99 | moyen | ❌ non | vite, léger — mais moins d'aide |
| JetBrains (WebStorm…) | ❌ ~€24/mois | ✅ riches | ✅ oui | pros en entreprise, projet large |
| Bloc-notes / TextEdit | ✅ oui | ❌ aucune | ❌ non | jamais pour coder |
Flag A2
Checkpoint
Pourquoi n'écrit-on pas du code dans Word ? Donne 2 choses qu'un éditeur de code fait pour t'aider.
Rends : ta réponse.
2. Installer VS Code
- Va sur code.visualstudio.com.
- Clique sur Download : le site détecte ton système et te propose la bonne version (Windows, macOS ou Linux).
- Lance le fichier téléchargé et suis les étapes (accepte les options par défaut).
- Ouvre VS Code.
Flag B1
Production
Installe (ou ouvre) VS Code.
Rends : confirme qu'il s'ouvre et indique ton système (Windows / macOS / Linux).
3. Windows, macOS, Linux : ce qui change
Les manips sont presque identiques partout. Deux différences à connaître par cœur : la touche des raccourcis et la forme des chemins de fichiers.
La touche des raccourcis : Ctrl ou Cmd
Sur Mac, la touche Cmd ⌘ remplace presque partout le Ctrl de Windows/Linux. Dans ce playbook, quand tu lis Ctrl+S, sur Mac lis Cmd+S.
| Action | Windows / Linux | macOS |
|---|---|---|
| Sauvegarder | Ctrl+S | Cmd+S |
| Copier / Coller | Ctrl+C / Ctrl+V | Cmd+C / Cmd+V |
| Palette de commandes | Ctrl+Shift+P | Cmd+Shift+P |
| Ouvrir un dossier | Ctrl+K Ctrl+O | Cmd+O |
| Ouvrir le terminal intégré | Ctrl+ù ou Ctrl+` | Ctrl+` |
Les chemins de fichiers
Un chemin, c'est l'adresse d'un fichier sur la machine. Sa forme change selon l'OS :
| OS | Exemple de chemin | Séparateur |
|---|---|---|
| Windows | C:\Users\toi\dev\mon-site | \ (antislash) |
| macOS | /Users/toi/dev/mon-site | / (slash) |
| Linux | /home/toi/dev/mon-site | / (slash) |
Quel terminal selon ton système ?
Quand on te dit « ouvre le terminal », ça cache plusieurs programmes différents. C'est une source de confusion fréquente : la même commande peut fonctionner ou échouer selon lequel tu utilises.
| Terminal | OS | Défaut dans VS Code ? | Commandes dispo |
|---|---|---|---|
| PowerShell (5.1 ou 7+) | Windows | oui — recommandé | ls, pwd, mkdir, cd |
| cmd.exe | Windows (ancien) | non — à éviter | dir au lieu de ls, cd au lieu de pwd |
| Git Bash | Windows (si Git installé) | configuré manuellement | toutes les commandes Unix identiques à Linux/Mac |
| zsh / Terminal | macOS (Catalina+) | oui | toutes les commandes Unix |
| bash | Linux | oui | toutes les commandes Unix |
Flag A3
Checkpoint
Indique ton OS, puis le raccourci « Sauvegarder » et le séparateur de chemin correspondants.
Rends : ta réponse (3 infos).
4. Se repérer dans VS Code
L'interface paraît dense, mais 4 zones suffisent pour 90 % du travail. Repère-les sur le schéma.
1 Barre d'activité (icônes à gauche) 2 Explorateur 3 Éditeur 4 Terminal intégré
| Zone | Rôle |
|---|---|
| 1. Barre d'activité (gauche) | basculer entre Explorateur 📁, Recherche 🔍, Git, Extensions |
| 2. Explorateur | l'arborescence de ton projet (dossiers / fichiers) |
| 3. Éditeur (centre) | là où tu écris ton code, en onglets |
| 4. Terminal intégré (bas) | une ligne de commande, dans l'éditeur |
Flag A4
Checkpoint
Nomme les 4 zones de VS Code et le rôle de chacune.
Rends : ta réponse.
5. Les fichiers et leurs extensions
Un fichier porte un nom en deux parties : index.html. La partie après le dernier point s'appelle l'extension. Elle dit à l'ordinateur de quel type est le fichier.
| Extension | Type de fichier | Tu en feras… |
|---|---|---|
.html | page web | dès la prochaine séance |
.css | feuille de style (l'apparence) | la séance d'après |
.js | JavaScript (le comportement) | plus tard |
.json | données structurées (texte lisible par machine) — config, API | dès les séances Git + Node |
.sql | script de base de données | séance SQL |
.cs | code C# (projet GSB Ordonnances) | séances C# |
.env | variables d'environnement (mots de passe, clés API) — JAMAIS dans Git | séances déploiement |
.png / .jpg | image (png = sans perte, jpg = compressé) | tout le temps |
.txt | texte brut, sans rôle particulier | rarement |
Afficher les extensions (à faire une fois)
Par défaut, Windows et macOS cachent souvent l'extension. C'est piégeux : tu crois avoir index.html alors qu'il s'appelle index.html.txt. On force l'affichage.
| OS | Comment afficher les extensions |
|---|---|
| Windows 11 | Explorateur de fichiers → Affichage → Afficher → coche Extensions de noms de fichiers |
| Windows 10 | Explorateur → onglet Affichage → coche Extensions de noms de fichiers |
| macOS | Finder → menu Finder > Réglages → Avancé → coche Afficher toutes les extensions de fichiers |
| Linux (Fichiers/Nautilus) | les extensions sont déjà visibles ; rien à faire |
Flag B2
Production
Active l'affichage des extensions sur ton système.
Rends : indique ton OS et confirme que tu vois maintenant .html, .txt, etc. à la fin des noms.
6. Ouvrir & organiser un projet
Un développeur travaille toujours dans un dossier de projet : un seul dossier qui contient tout. On en crée un proprement.
Étape 1 — Créer le dossier
Crée sur ta machine un dossier dev (dans Documents), puis dedans mon-premier-site. C'est ton espace de travail.
Étape 2 — L'ouvrir dans VS Code
Dans VS Code : Fichier → Ouvrir le dossier… → choisis mon-premier-site.
Étape 3 — Créer un fichier
Dans l'Explorateur, survole le nom du projet et clique l'icône Nouveau fichier 📄. Nomme-le index.html. Écris une ligne (ton prénom), puis sauvegarde avec Ctrl+S (Cmd+S sur Mac).
Flag B3
Production
Crée le dossier de projet, ouvre-le dans VS Code, et crée index.html dedans.
Rends : le chemin de ton dossier et confirme que le fichier apparaît bien sous le nom du projet dans l'Explorateur.
7. Sauvegarder : le point rouge
Tant qu'un fichier n'est pas sauvegardé, tes modifications ne sont écrites nulle part : elles vivent seulement en mémoire. VS Code te le signale visuellement.
| Sur l'onglet du fichier | Signification |
|---|---|
| un rond plein ● à la place de la croix | fichier modifié, non sauvegardé |
| une croix ✕ (bouton fermer) | fichier à jour, tout est enregistré |
La sauvegarde automatique (optionnel)
Tu peux demander à VS Code de sauvegarder tout seul : menu Fichier → Enregistrement automatique (Auto Save). Une coche apparaît, et le rond plein ne reviendra plus.
Flag A5
Checkpoint
Modifie ton fichier sans sauvegarder, observe l'onglet, puis sauvegarde.
Rends : que voit-on sur l'onglet avant la sauvegarde, et après ?
8. Gagner du temps dans VS Code
Trois fonctions transforment ta vitesse. On les voit maintenant pour les avoir dans les doigts dès la séance HTML.
Les onglets multiples
Chaque fichier ouvert = un onglet en haut de l'éditeur, comme dans un navigateur. Clique un onglet pour basculer dessus. Ferme avec la croix ou Ctrl+W.
Le multi-curseur
Tu peux écrire à plusieurs endroits en même temps. C'est magique pour modifier des lignes répétées.
| Geste | Effet |
|---|---|
| Alt + clic (Mac : Option + clic) | ajoute un curseur là où tu cliques |
Ctrl+D (Mac : Cmd+D) | sélectionne l'occurrence suivante du mot sélectionné |
| Échap | revient à un seul curseur |
La palette de commandes
Le raccourci à retenir avant tous les autres : Ctrl+Shift+P (Cmd+Shift+P). Une barre s'ouvre en haut : tape ce que tu veux faire, VS Code trouve la commande.
| Tu tapes… | Tu obtiens… |
|---|---|
theme | changer le thème de couleurs |
terminal | ouvrir un nouveau terminal |
format | remettre ton code en forme |
reload | recharger la fenêtre (utile si un bug) |
encoding | changer l'encodage du fichier (UTF-8, ANSI…) |
eol | changer les fins de ligne (LF / CRLF) |
Emmet — générer du HTML en 1 seconde
VS Code inclut Emmet : un moteur d'abréviations qui génère du HTML complet d'une frappe + Tab. Rien à installer, c'est intégré.
Tu tapes (dans un .html) | + Tab → tu obtiens |
|---|---|
! | le squelette HTML complet : <!DOCTYPE html>, <head>, <meta charset="UTF-8">, <body>… |
div | <div></div> avec curseur dedans |
p.intro | <p class="intro"></p> |
ul>li*3 | une liste <ul> avec 3 <li> |
h1+p | un <h1> suivi d'un <p> |
Flag E1
Extension
Dans index.html, écris une même balise titre sur 3 lignes, puis utilise le multi-curseur (Ctrl+D ou Alt+clic) pour les transformer toutes les 3 en sous-titre d'un seul geste.
Rends : décris la manip et le résultat (avant / après).
9. Le terminal intégré
VS Code embarque un terminal : la même ligne de commande qu'un terminal classique, mais intégrée à l'éditeur et déjà placée dans ton dossier de projet.
L'ouvrir
Menu Terminal → Nouveau terminal (ou Ctrl+ù sur clavier FR, sinon Ctrl+` ; Mac : Ctrl+`). Un panneau s'ouvre en bas de la fenêtre.
pwd
/Users/toi/Documents/dev/mon-premier-site
Lister le contenu du dossier
ls
index.html
Les commandes essentielles du terminal
Ces commandes reviennent à chaque séance (Git, serveurs, SQL…). Apprends-les maintenant.
| Commande | Signification | Exemple | Équivalent cmd.exe (Windows ancien) |
|---|---|---|---|
pwd | où suis-je ? (print working directory) | → /Users/toi/dev/mon-site | cd (seul) |
ls | liste les fichiers ici | → index.html | dir |
ls -la | liste tout, y compris les fichiers cachés (.env…) | → voit aussi .gitignore | dir /a |
cd nomDossier | entre dans un dossier (change directory) | cd dev | identique |
cd .. | remonte d'un niveau | cd .. | identique |
mkdir nomDossier | crée un dossier | mkdir mon-projet | identique |
clear | vide l'écran du terminal | — | cls |
cd ..
pwd
/Users/toi/Documents/dev
mkdir test-terminal
ls
mon-premier-site test-terminal
Flag B4
Production
Ouvre le terminal intégré et affiche le dossier courant.
Rends : la commande utilisée et le chemin affiché (se termine-t-il bien par ton projet ?).
10. Le navigateur, outil de dev
Le navigateur n'est pas que pour surfer : c'est l'outil où tu testes tes pages et où tu peux voir « sous le capot ».
Quel navigateur choisir ?
| Navigateur | DevTools | Recommandé ? | Pourquoi |
|---|---|---|---|
| Chrome (Google) | ✅ excellents | ✅ 1er choix | DevTools les plus complets, onglet Performance + Lighthouse intégrés |
| Edge (Microsoft) | ✅ identiques à Chrome | ✅ bon choix | même moteur Chromium → DevTools quasiment identiques à Chrome |
| Firefox | ✅ très bons | ⚠️ 2e choix | DevTools différents (noms d'onglets diffèrent) — dépaysant pour débuter |
| Safari (macOS) | ⚠️ limités | ❌ déconseillé pour dev | DevTools moins riches, activer dans Réglages > Avancé d'abord |
Ouvrir ta page
Double-clique ton index.html (ou glisse-le dans une fenêtre du navigateur) : il s'affiche. Tu viens de voir ta première page.
Les DevTools (outils de développement)
Fais un clic droit → Inspecter (ou appuie sur F12). Un panneau s'ouvre : ce sont les DevTools, présents dans Chrome, Edge et Firefox.
| Onglet DevTools | Sert à | Quand l'ouvrir |
|---|---|---|
| Elements (Éléments) | voir et modifier le HTML/CSS en direct — les modifs disparaissent au rechargement | comprendre pourquoi un style ne s'applique pas |
| Console | voir les erreurs JS en rouge ; tester des expressions JavaScript à la volée | à chaque bug JavaScript |
| Network (Réseau) | voir toutes les requêtes HTTP : images, CSS, scripts… avec leur taille et temps de chargement | page lente, ressource manquante (erreur 404) |
| Sources | voir les fichiers JS/CSS chargés, poser des points d'arrêt (breakpoints) | déboguer du JavaScript pas à pas |
| Application | inspecter les cookies, localStorage, sessionStorage | vérifier qu'un token JWT est bien stocké |
| Lighthouse (onglet ou extension) | audit automatique : performance, accessibilité, SEO | optimiser une page avant livraison |
Flag D1
Investigation
Ouvre une page web de ton choix, lance les DevTools (F12), onglet Elements, et survole le code pour repérer un élément sur la page.
Rends : décris ce que tu as observé (le lien code ↔ page).
11. Extensions & Live Server
VS Code se complète avec des extensions : des modules d'aide qu'on installe en un clic depuis l'icône Extensions de la barre de gauche (ou Ctrl+Shift+X).
| Extension | Auteur | ~Installations | Ce qu'elle apporte — et POURQUOI | Quand l'installer |
|---|---|---|---|---|
| Live Server | Ritwick Dey | 50 M+ | recharge ta page à chaque Ctrl+S — sans ça tu recharges le navigateur à la main des dizaines de fois par séance | aujourd'hui |
| Prettier | Prettier | 40 M+ | reformate le code automatiquement à la sauvegarde — indentation, guillemets, virgules — code propre sans effort | séance HTML/CSS |
| ESLint | Microsoft | 35 M+ | souligne les erreurs JavaScript avant d'exécuter — comme un correcteur orthographique pour le code JS | séances JavaScript |
| GitLens | GitKraken | 25 M+ | affiche qui a modifié chaque ligne de code et quand — essentiel pour comprendre l'historique Git | séances Git |
| French Language Pack | Microsoft | 4 M+ | met l'interface VS Code en français — purement cosmétique, pas obligatoire | maintenant si tu veux |
| indent-rainbow | oderwat | 12 M+ | colore les niveaux d'indentation — rend visible les blocs imbriqués, très utile en HTML et JSON | dès les premières séances |
Installer Live Server — pas à pas
- Clique l'icône Extensions (les 4 carrés) dans la barre de gauche, ou
Ctrl+Shift+X. - Dans la barre de recherche, tape Live Server.
- Repère celle de l'auteur Ritwick Dey (des millions d'installations) et clique Install.
Lancer ta page avec Live Server
- Dans l'Explorateur, clic droit sur
index.html. - Choisis « Open with Live Server » (ou clique le bouton Go Live en bas à droite).
- Ton navigateur s'ouvre tout seul sur ta page.
http://127.0.0.1:5500/index.html
Arrêter Live Server
Quand tu as fini, clique le bouton « Port : 5500 » en bas à droite de VS Code (il remplace « Go Live » pendant que le serveur tourne) : ça l'arrête.
Flag B5
Production
Installe Live Server et lance ta page avec.
Rends : l'URL affichée (commence par 127.0.0.1:5500 ?) et confirme que la page se recharge quand tu sauvegardes une modif.
12. La boucle de travail
Maintenant que tout est en place, voici le rythme que tu répéteras des centaines de fois cette année. Une boucle simple, à trois temps.
La boucle du développeur web : écrire, sauvegarder, observer le résultat — en quelques secondes.
Flag B6
Production
Lance ta page avec Live Server, garde le navigateur visible, puis modifie ton texte dans VS Code et sauvegarde deux fois de suite (deux textes différents).
Rends : confirme que la page change toute seule à chaque sauvegarde, sans toucher au navigateur.
13. Mini-projet : ton espace prêt
La mission
On vérifie que ton environnement est complet et opérationnel pour toute l'année. Tu dois avoir, en même temps à l'écran :
- Un dossier
dev/mon-premier-sitebien rangé, ouvert dans VS Code (son nom en haut de l'Explorateur). - Un fichier
index.htmlavec une ligne de ton choix (ex. ton prénom), sauvegardé (onglet avec la croix, pas le rond). - Le terminal intégré ouvert,
pwdpointant sur ton projet. - La page lancée avec Live Server, l'URL
127.0.0.1:5500dans le navigateur. - Les DevTools ouverts (F12), onglet Elements.
Flag B7
Mini-projet (production)
Mets en place ton espace de travail complet (dossier + fichier sauvegardé + terminal + page Live Server + DevTools).
Rends : une capture de VS Code avec ton projet ouvert et le terminal visible, + une capture du navigateur (URL + DevTools). Tu es paré pour les séances web !
Pour finir
Ton antisèche (les raccourcis)
| Action | Windows / Linux | macOS |
|---|---|---|
| Sauvegarder | Ctrl+S | Cmd+S |
| Ouvrir le terminal | Ctrl+ù / Ctrl+` | Ctrl+` |
| Palette de commandes | Ctrl+Shift+P | Cmd+Shift+P |
| Panneau Extensions | Ctrl+Shift+X | Cmd+Shift+X |
| Multi-curseur (occurrence suivante) | Ctrl+D | Cmd+D |
| Fermer un onglet | Ctrl+W | Cmd+W |
| Ouvrir les DevTools (navigateur) | F12 | F12 / Cmd+Option+I |
Vérifie tes acquis
- Quels sont les 3 outils du développeur et leur rôle ?
- Pourquoi un éditeur de code plutôt que Word ?
- Sur Mac, quelle touche remplace Ctrl dans les raccourcis ?
- Qu'est-ce qu'une extension de fichier et pourquoi compte-t-elle ?
- À quoi sert l'Explorateur de VS Code ?
- Que signifie un rond plein ● sur l'onglet d'un fichier ?
- Quel intérêt a le terminal intégré ?
- Que montre l'onglet Elements des DevTools ?
- Que fait Live Server quand tu sauvegardes ?
- Pourquoi éviter espaces et accents dans les noms de fichiers ?
Glossaire
| Mot | Définition |
|---|---|
| Éditeur de code | logiciel pour écrire du code en texte brut (VS Code) |
| Extension de fichier | la fin du nom après le dernier point (.html) ; dit le type du fichier |
| Chemin | l'adresse d'un fichier sur la machine (ex. /Users/toi/dev) |
| Explorateur | la zone de VS Code qui affiche les fichiers du projet |
| Terminal intégré | une ligne de commande dans VS Code, placée sur ton projet |
| Palette de commandes | barre Ctrl+Shift+P pour lancer n'importe quelle action |
| Multi-curseur | écrire à plusieurs endroits en même temps |
| Extension (VS Code) | un module qui ajoute des fonctions à l'éditeur |
| Live Server | extension qui sert ta page et la recharge à chaque sauvegarde |
| localhost / 127.0.0.1 | adresse de loopback : ta propre machine qui se répond à elle-même. Le trafic ne sort jamais sur Internet. Synonyme de « moi-même ». |
| Port | numéro (0–65 535) qui identifie un service sur la machine. Ports < 1024 = réservés système (80 = HTTP, 443 = HTTPS, 22 = SSH). Live Server utilise 5500 par défaut car c'est un port libre. Si 5500 est pris, il essaie 5501, 5502… |
| DevTools | les outils du navigateur pour inspecter une page (F12) |