HTML CSS JS

Avant d'écrire votre première ligne de code, vous devez comprendre comment fonctionne le web et préparer vos outils de travail. Ce chapitre est la fondation sur laquelle tout le reste du cours repose.

Comment fonctionne le web

Quand vous tapez une adresse dans votre navigateur (par exemple google.com), voici ce qui se passe :

1. Votre navigateur envoie une requête au serveur qui héberge le site
2. Le serveur renvoie des fichiers : du HTML (la structure), du CSS (le style) et du JavaScript (l'interactivité)
3. Votre navigateur lit ces fichiers et affiche la page

Chaque page web que vous visitez est composée de ces 3 langages. Pas plus. Un site magnifique comme Apple.com ou un site simple comme Wikipédia — tous sont faits de HTML, CSS et JS. La différence, c'est la maîtrise.

Les 3 langages du web — l'analogie de la maison

Imaginez une maison :

• HTML = la structure : les murs, le toit, les pièces, les portes, les fenêtres. Sans HTML, il n'y a rien à afficher.
• CSS = la décoration : la peinture, le carrelage, les meubles, l'éclairage. Le CSS rend la maison belle et agréable.
• JavaScript = l'électricité et la plomberie : les interrupteurs, les portes automatiques, l'alarme. Le JS rend la maison interactive et vivante.

Vous pouvez avoir une maison sans décoration (HTML seul) — elle est fonctionnelle mais moche. Vous pouvez avoir une maison décorée sans électricité (HTML + CSS) — elle est belle mais statique. Les trois ensemble créent une expérience complète.

Les outils nécessaires

Vous n'avez besoin que de 2 choses :

1. Un éditeur de code — Visual Studio Code (VS Code)

VS Code est gratuit et c'est le standard de l'industrie. Téléchargez-le sur code.visualstudio.com. C'est bien plus qu'un simple éditeur de texte : il colore votre code par type (syntaxe highlighting), complète automatiquement vos balises, et détecte les erreurs.

Extensions VS Code indispensables :

• Live Server — Actualise automatiquement la page dans le navigateur quand vous sauvegardez un fichier. Indispensable pour voir le résultat en temps réel.
• Prettier — Formate votre code proprement à chaque sauvegarde. Fini le code mal indenté.
• Auto Rename Tag — Quand vous changez une balise ouvrante, la balise fermante se met à jour automatiquement.

2. Un navigateur moderne avec les DevTools

Chrome, Firefox ou Edge — tous ont des "outils développeur" intégrés accessibles avec F12 (ou Cmd+Option+I sur Mac). C'est votre microscope pour inspecter n'importe quel site web.

Les DevTools contiennent :

• Elements — L'arbre HTML et les styles CSS de la page, modifiables en direct. Survolez un élément et il se surligne sur la page.
• Console — L'endroit où JavaScript affiche des messages et des erreurs. Vous pouvez y taper du JS pour tester.
• Network — Tous les fichiers chargés par la page (HTML, CSS, JS, images) avec leur taille et leur temps de chargement.

Prenez l'habitude d'ouvrir les DevTools systématiquement. Allez sur n'importe quel site, faites F12, clic droit sur un élément > "Inspecter". Vous verrez comment les sites professionnels sont construits.

Structure d'un projet web

Un projet web est simplement un dossier contenant des fichiers :

• index.html — La page d'accueil (le point d'entrée)
• css/style.css — Tous les styles visuels
• js/script.js — Toute l'interactivité
• images/ — Les images du site

Le fichier principal DOIT s'appeler index.html — c'est le fichier que les serveurs web et les navigateurs cherchent par défaut quand quelqu'un visite votre site.

> Attention : Créez toujours des dossiers séparés pour le CSS, le JS et les images dès le début du projet. Mettre tous les fichiers à la racine devient vite ingérable quand le projet grandit.