Parcours 0 — Avant de commencer · leçon gratuite · 12 min

Code source, frontend, backend

Une application web a deux moitiés. Savoir laquelle est en cause te fait gagner des heures de recherche.

Objectifs

Définir code source, frontend et backend
Situer HTML, CSS, JavaScript et Node.js
Deviner si un problème est côté navigateur ou côté serveur

Le code source, c'est le texte que les développeurs écrivent : des fichiers .html, .css, .js, .ts… Lisible par un humain (avec de l'entraînement), transformé ou lu par une machine pour produire ce que tu vois à l'écran. Claude Code écrit et modifie du code source ; le « projet », c'est le dossier qui contient ce code.

Une application web a deux moitiés :

Le frontend (côté client) : ce qui tourne dans le navigateur de l'utilisateur. Il est fait de trois langages : HTML (la structure : titres, paragraphes, boutons), CSS (l'apparence : couleurs, tailles, mise en page), JavaScript (le comportement : ce qui se passe quand on clique). Le navigateur télécharge ces fichiers et les exécute.
Le backend (côté serveur) : ce qui tourne sur le serveur, loin de l'utilisateur. Il reçoit les demandes, parle à la base de données, vérifie les mots de passe, envoie les e-mails. Il est souvent écrit en JavaScript aussi (grâce à Node.js, qui permet d'exécuter du JavaScript hors du navigateur), ou en Python, PHP, Go…

Un site vitrine peut n'avoir que du frontend : des fichiers statiques servis tels quels. Une application avec des comptes utilisateurs a forcément un backend : on ne peut pas faire confiance au navigateur pour vérifier un mot de passe.

Le navigateur est une machine à exécuter du HTML/CSS/JavaScript. Tout ce qu'il exécute, l'utilisateur peut le voir (outils de développement, F12) et le modifier. Conséquence de sécurité fondamentale : tout ce qui est dans le frontend est public. Une clé d'API dans un fichier JavaScript du frontend est une clé volée.

Le backend, lui, tourne sur une machine que tu contrôles. Le navigateur lui envoie des demandes HTTP (« connecte-moi », « enregistre cette réservation ») et reçoit des réponses. C'est là que vivent les secrets et les décisions importantes.

Navigateur (frontend)                 Serveur (backend)               Base de données
─────────────────────                 ─────────────────               ───────────────
affiche le formulaire
l'utilisateur clique « Réserver »
envoie POST /reservations  ────────►  vérifie les données
                                      vérifie la disponibilité  ───►  lit les réservations
                                      enregistre                ───►  écrit la réservation
                                      envoie l'e-mail
affiche « Réservé ! »      ◄────────  répond 201 Created

Un bug apparaît. Où chercher ?

Symptôme	Probablement	Où regarder
Le bouton ne réagit pas, la mise en page est cassée	frontend	console du navigateur (F12), fichiers .html / .css / .js
« Erreur 500 », les données ne s'enregistrent pas	backend	terminal du serveur, logs
La page met 10 secondes à charger une liste	les deux (souvent la requête backend)	onglet Réseau des outils de développement
Ça marche chez moi, pas en ligne	configuration / déploiement	variables d'environnement, hébergeur

Quand tu décris un problème à Claude Code, dire « c'est côté frontend, dans le formulaire de contact » ou « le backend renvoie une erreur 500 quand j'envoie le formulaire » l'oriente immédiatement vers les bons fichiers. Sans cette distinction, il cherche partout et te propose des corrections à côté.

À retenir

Frontend = dans le navigateur (HTML, CSS, JavaScript). Tout y est public.
Backend = sur le serveur (Node.js, Python…). Les secrets et les décisions importantes vivent là.
Node.js permet d’exécuter du JavaScript hors du navigateur : c’est ce qui fait tourner beaucoup de backends et d’outils (npm, Vite…).
Localiser le problème (navigateur ou serveur) avant de chercher la cause.