Séquence 1 · 2-3h

L'environnement & les bases

Découverte du Web, installation des outils, premiers pas avec VS Code.

Objectif : Avoir un environnement prêt à coder et comprendre comment fonctionne le Web.

C
Cours

Comment fonctionne le Web ?

Quand tu tapes une adresse dans ton navigateur, voici ce qui se passe :

  1. Ton navigateur envoie une requête à un serveur (un ordinateur quelque part dans le monde).
  2. Le serveur reçoit la demande, prépare une réponse (fichiers HTML, CSS, JS).
  3. Ton navigateur reçoit ces fichiers et les interprète pour afficher la page.

Il y a donc deux côtés :

  • Front-end (client) — ce que l'utilisateur voit : HTML, CSS, JavaScript.
  • Back-end (serveur) — la logique invisible : PHP, bases de données.

Dans ce parcours, tu vas apprendre les deux.

C
Cours

Installer VS Code

VS Code (Visual Studio Code) est l'éditeur de code le plus utilisé dans le monde. Il est gratuit, léger, et très puissant.

Installation

  1. Va sur https://code.visualstudio.com
  2. Télécharge la version pour ton système (Windows / Mac / Linux)
  3. Lance l'installateur et suis les étapes

Extensions indispensables à installer

  • Prettier — formate ton code automatiquement
  • PHP Intelephense — autocomplétion PHP
  • Live Server — recharge ton navigateur en temps réel
  • Auto Rename Tag — renomme les balises HTML par paires

Pour installer une extension : clic sur l'icône Extensions dans la barre gauche (ou Ctrl+Shift+X), tape le nom, clic sur Installer.

T
Astuce

Les raccourcis clavier essentiels

Un bon développeur utilise le clavier, pas la souris. Ces raccourcis vont te faire gagner un temps fou.

ActionWindows / LinuxMac
SauvegarderCtrl+SCmd+S
Copier une ligneShift+Alt+↓Shift+Option+↓
Supprimer une ligneCtrl+Shift+KCmd+Shift+K
Déplacer une ligneAlt+↑/↓Option+↑/↓
Chercher dans le fichierCtrl+FCmd+F
Remplacer dans le fichierCtrl+HCmd+H
Ouvrir le terminalCtrl+`Cmd+`
Commenter une ligneCtrl+/Cmd+/
Sélectionner toutCtrl+ACmd+A
Multi-curseurCtrl+DCmd+D
T
Astuce

Organiser ses fichiers

Un projet bien organisé, c'est un projet maintenable. Dès le début, adopte ces bonnes habitudes :

  • Un dossier par projet, toujours.
  • Noms de fichiers en minuscules, sans espaces ni accents : ma-page.html et non Ma Page.html.
  • Structure recommandée : 
    mon-projet/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
  • Le fichier principal s'appelle toujours index.html — c'est la convention universelle.
P
Projet

Projet — Ta première page

Il est temps de créer ta première page Web.

Objectif

Créer un fichier index.html qui affiche une page simple dans le navigateur.

Étapes

  1. Crée un dossier sequence-1 sur ton bureau.
  2. Ouvre VS Code, puis ouvre ce dossier (Fichier → Ouvrir le dossier).
  3. Crée un nouveau fichier index.html.
  4. Tape ! puis appuie sur Tab — VS Code génère automatiquement la structure HTML de base.
  5. Dans le <body>, écris : <h1>Bonjour, je code !</h1>
  6. Sauvegarde (Ctrl+S), puis clique sur Go Live en bas de VS Code.

Résultat attendu : ton navigateur s'ouvre et affiche "Bonjour, je code !" en grand.

Félicitations — tu viens de créer ta première page Web.

Tu as terminé les leçons de cette séquence ?

Quiz — Séquence 1

Vérifie ta compréhension avant de passer à la suite. Réponds à toutes les questions, puis valide.

Question 1/4
Quel logiciel utiliseras-tu principalement pour écrire du code ?
Question 2/4
Le HTML s'exécute sur quel côté ?
Question 3/4
Quel raccourci permet de sauvegarder un fichier dans VS Code ?
Question 4/4
Comment doit s'appeler le fichier principal d'un site Web ?