La question qu'on me pose le plus souvent quand quelqu'un apprend que je code : « et si je partais de zéro, par où je commence ? » Pas une école, pas un framework, pas une formation à 900 euros. Juste : quelle est la première chose à faire, concrètement, ce soir, sur mon ordinateur ?
La réponse tient en deux fichiers. Un fichier index.html, un fichier style.css, posés côte à côte dans un dossier, et votre premier site existe. C'est tout. Le reste, c'est de la décoration. Et pourtant, quand j'ai accompagné des débutants sur ce chemin, j'ai vu trois fois plus de gens bloqués à l'étape « mon CSS ne s'applique pas » qu'à l'étape « je ne comprends pas les balises ». Le piège n'est presque jamais là où on l'attend.
Points clés à retenir
- Un site web, au minimum, c'est un fichier HTML. Le CSS vient après, dans un second fichier séparé.
- La structure de dossiers compte plus que la qualité du code quand vous débutez.
- 90 % des « mon style ne s'affiche pas » viennent d'un chemin de fichier erroné ou d'une balise link mal écrite.
- Votre navigateur est le meilleur outil de débogage : F12, onglet Console, il vous dit ce qu'il n'a pas trouvé.
- Mettre un site en ligne coûte aujourd'hui zéro euro si vous acceptez une adresse fournie par l'hébergeur.
- Ne touchez pas à Flexbox avant d'avoir écrit votre première page sans lui.
HTML et CSS : comprendre la répartition des rôles avant d'écrire une ligne
Prenons une maison. Le HTML, ce sont les murs, les portes, les fenêtres. Le CSS, c'est la peinture, les rideaux, la couleur du carrelage. Vous pouvez habiter une maison sans peinture. Vous ne pouvez pas habiter une maison sans murs.
Cette analogie a un défaut, et je le vois répété chez tous les débutants que je croise : on croit que le CSS est « optionnel ». Il l'est techniquement. En pratique, un site sans CSS en 2026, c'est une page Times New Roman alignée à gauche, avec des liens bleus soulignés. Fonctionnel, moche, et personne ne vous croira quand vous direz que vous « savez faire un site ».
Ce que fait vraiment le HTML
Le HTML décrit du sens. Pas de l'apparence, du sens. Quand vous écrivez <h1>, vous dites « ceci est le titre principal de la page ». Vous ne dites pas « ceci doit faire 32 pixels et être gras ». Cette distinction paraît théorique. Elle ne l'est pas : c'est ce qui permet à Google, aux lecteurs d'écran et aux navigateurs mobiles de comprendre votre contenu.
Une page HTML valide, c'est une structure en couches :
<!DOCTYPE html>— la déclaration qui dit au navigateur « on est en HTML moderne »<html>— l'enveloppe totale<head>— la partie invisible : titre d'onglet, encodage, lien vers le CSS<body>— tout ce que le visiteur voit
Ce que fait le CSS, et pourquoi il vit ailleurs
Le CSS prend ces éléments et décide de leur apparence. Séparer les deux n'est pas une coquetterie d'architecture : c'est ce qui vous permettra, plus tard, de changer la couleur de tous vos titres d'un seul coup, dans un seul fichier, au lieu d'ouvrir cinquante pages.
Eh bien, cette séparation, je l'ai ignorée pendant mes premières semaines. J'écrivais style="color: red" directement dans mes balises. Résultat : pour changer une nuance, je repassais sur chaque élément, un par un. J'ai perdu une bonne dizaine d'heures sur ce seul réflexe.
Préparer son environnement sans se tromper
Question qu'on me pose souvent : faut-il installer un logiciel compliqué ? Non. Il en faut un, et il est gratuit.
Le choix de l'éditeur
Un éditeur de code n'est pas un traitement de texte. La différence fondamentale : il colore votre code, il ferme vos balises automatiquement, et il vous signale les erreurs avant même que vous ouvriez le navigateur. Trois options tiennent la route pour débuter :
| Éditeur | Poids | Pour qui |
|---|---|---|
| Visual Studio Code | Environ 350 Mo installé | Le choix par défaut. Extensions, thèmes, terminal intégré. Je l'utilise encore. |
| Sublime Text | Très léger, démarre instantanément | Machine ancienne, ou vous détestez attendre |
| Notepad++ / TextEdit | Déjà sur votre système | Dépannage d'urgence uniquement. Pas de coloration utile. |
Franchement, prenez VS Code. Pas parce qu'il est « meilleur » dans l'absolu, mais parce que toute l'aide que vous trouverez en ligne, toutes les captures d'écran des tutoriels, toutes les extensions dont on vous parlera, supposent que vous l'avez. Nager contre le courant quand on apprend n'a aucun intérêt.
Le dossier, et son arborescence
Voilà le point que les cours oublient systématiquement, et c'est celui qui fait perdre le plus de temps. La structure de vos dossiers doit être pensée avant d'écrire la première ligne.
Créez un dossier nommé mon-premier-site. À l'intérieur, deux fichiers et un sous-dossier :
index.html— le nom est conventionnel, le navigateur cherche ce fichier par défautstyle.css— votre feuille de style, à la racine pour l'instantimages/— un dossier vide pour l'instant, il accueillera vos visuels
Pourquoi cette rigueur ? Parce qu'un chemin de fichier, c'est une adresse. Si votre CSS est dans un sous-dossier et que vous écrivez href="style.css", le navigateur cherche au mauvais endroit, ne trouve rien, et applique zéro style. Sans message d'erreur visible. La page s'affiche, juste… nue.
Écrire son premier fichier HTML
Ouvrez VS Code, créez un fichier vide, tapez ! puis la touche Tabulation. Si l'extension Emmet est active (elle l'est par défaut), une structure complète apparaît. Sinon, écrivez-la à la main :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Mon premier site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bonjour</h1>
<p>Ceci est mon premier paragraphe.</p>
</body>
</html>Trois choses méritent votre attention dans ces neuf lignes, et ce sont exactement les trois que les débutants ratent.
La ligne <meta charset="utf-8"> dit au navigateur comment lire vos caractères. Sans elle, un accent mal interprété se transforme en suite de symboles illisibles. Vous écrivez « é », le visiteur lit « é ». C'est l'erreur numéro un des pages francophones mal configurées.
La balise <link> est votre pont vers le CSS. Elle vit dans le <head>, jamais dans le <body>. Elle est auto-fermante, elle ne contient rien.
Et l'attribut lang="fr" sur la balise html : il sert aux synthèses vocales et aux moteurs de recherche. Ce n'est pas obligatoire, mais l'oublier revient à laisser une porte ouverte sans raison.
Ouvrir son fichier dans le navigateur
Double-cliquez sur index.html. Il s'ouvre dans votre navigateur par défaut. Vous voyez « Bonjour » en gros, puis votre phrase. Félicitations, vous avez un site web. Pas en ligne, mais un site web.
À partir de maintenant, votre boucle de travail ressemble à ça : vous modifiez le fichier dans l'éditeur, vous enregistrez, vous appuyez sur F5 dans le navigateur. C'est tout. Cette boucle, vous allez la répéter des milliers de fois.
Donner vie à la page avec le CSS
Créez style.css, tapez ceci, enregistrez, rafraîchissez :
body {
font-family: system-ui, sans-serif;
max-width: 65ch;
margin: 0 auto;
padding: 2rem;
line-height: 1.6;
color: #1a1a1a;
}
h1 {
color: #0b5fa5;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 0.5rem;
}Le titre devient bleu, la page se centre, le texte respire. Six lignes de CSS pour un résultat qui change tout.
Un détail sur max-width: 65ch : cette unité mesure la largeur en nombre de caractères. Soixante-cinq, c'est à peu près la longueur au-delà de laquelle l'œil perd sa ligne en revenant à la gauche. Les débutants écrivent souvent width: 100% et se retrouvent avec des lignes de 200 caractères sur écran large. Illisible, et personne ne comprend pourquoi.
« Pourquoi mon CSS ne s'applique pas ? »
C'est la question qui revient le plus, et dans mon expérience elle a presque toujours l'une de ces quatre causes :
- La balise
<link>est absente du<head>, ou mal orthographiée (styles.cssau lieu destyle.css) - Le fichier CSS est dans un autre dossier que le HTML, et le chemin ne le reflète pas
- Une accolade
{n'a pas sa fermeture}, et tout ce qui suit est ignoré - Le fichier est enregistré quelque part, mais VS Code ne l'a pas encore écrit sur le disque parce que vous avez zappé le Ctrl+S
Le point 4 a l'air ridicule. Je l'ai fait au moins quinze fois. Un fichier non enregistré est un fichier inexistant pour le navigateur.
Pour diagnostiquer en dix secondes : appuyez sur F12, allez dans l'onglet Console. Si vous voyez une ligne rouge mentionnant un fichier introuvable, vous avez votre réponse. Le navigateur vous dit exactement ce qu'il a cherché et où. C'est le meilleur professeur de débogage qui existe, et il est intégré partout, gratuitement.
Mettre son site en ligne
Un site web sur votre disque dur n'est pas un site web. C'est un fichier. La dernière étape, celle que presque tous les tutoriels sautent, c'est la publication.
Deux chemins, selon votre objectif :
- Une adresse fournie gratuitement par un service d'hébergement statique. Vous déposez votre dossier, le site est accessible en quelques minutes, avec une URL du type
mon-projetsuivi de leur nom de domaine. Idéal pour apprendre, montrer à des proches, tester. - Un nom de domaine à vous, acheté quelques euros par an, et branché sur le même hébergement. C'est ce qu'il faut si vous voulez une adresse propre pour un portfolio.
La bonne nouvelle : pour un site en HTML et CSS pur, sans base de données ni serveur, l'hébergement statique est gratuit chez plusieurs acteurs et vous donne même le HTTPS automatiquement. J'ai migré mon premier projet sur ce type d'hébergement un dimanche après-midi, la mise en ligne a pris onze minutes, dont huit à chercher où cliquer. Le code marchait exactement comme en local, sans une ligne à changer. C'était presque décevant.
Le piège du chemin absolu
Un point qui vous mordra si vous ne l'anticipez pas maintenant. En local, <img src="/images/photo.jpg"> avec une barre oblique au début pointe vers la racine de votre disque. En ligne, cette même barre pointe vers la racine de votre site. Les deux ne correspondent pas.
La règle simple pour débuter : utilisez toujours des chemins relatifs (images/photo.jpg, sans barre au début), en gardant vos fichiers à la même profondeur. Vous éviterez toute une famille de bugs qui n'apparaissent qu'après la mise en ligne, quand vous ne comprenez plus rien parce que « ça marchait très bien hier ».
Par où continuer
Vous avez maintenant un site qui existe, en ligne, avec une structure propre. Ce qui suit n'est pas une liste de choses à apprendre, c'est un ordre.
Apprenez d'abord les balises qui couvrent 80 % des contenus réels : les niveaux de titres h2 et h3, les listes, les liens, les images. Ensuite seulement, attaquez le positionnement. Et parmi les outils de mise en page modernes, Flexbox résout la grande majorité des besoins courants — centrer un bloc, aligner un menu, organiser une rangée de cartes. Grid attendra. Il attendra longtemps.
Ce que je conseille vraiment, et je le pense à fond : faites un projet qui vous intéresse. Pas un site de démonstration avec du texte factice. Une page sur votre groupe de musique préféré, un récapitulatif de votre recette de cuisine, la liste de vos randonnées avec les photos. Le CSS s'apprend dix fois plus vite quand on veut sincèrement que le résultat soit beau.
Sur ce, il reste une chose que personne ne vous dira assez clairement au début : cette phase où vous ne comprenez encore rien à ce que vous tapez va durer quelques semaines. Elle est normale. Elle n'indique pas que vous n'êtes pas fait pour ça. Un jour, vous écrirez une règle CSS de mémoire, sans chercher, sans réfléchir, et c'est ce jour-là que vous saurez que c'est passé.
