La question qui revient le plus souvent quand quelqu'un me parle de son projet de site, ce n'est pas « par où je commence ? ». C'est « combien de temps avant que ça ressemble à quelque chose ? ». Et la réponse honnête, celle que personne ne donne dans les vidéos de dix minutes, c'est : deux heures pour une page moche mais fonctionnelle, trois semaines pour quelque chose que vous assumerez d'envoyer à un client. Le reste, c'est du vernis.
Apprendre le HTML et le CSS pour créer son premier site, ce n'est pas sorcier. C'est même l'un des rares apprentissages numériques où vous voyez un résultat tangible dès la première session. Mais l'ordre dans lequel on apprend les choses compte plus que le volume de balises mémorisées. C'est là que la plupart des débutants se plantent.
Points clés à retenir
- HTML = structure et sens. CSS = apparence. Confondre les deux au départ, c'est se condamner à des nuits de galère.
- Une page en ligne vaut mille tutoriels suivis passivement. Publiez dès la première semaine, même moche.
- Visual Studio Code reste l'éditeur le plus pratique pour démarrer, sans installation lourde.
- Les erreurs de débutant sont presque toujours les mêmes : balise non fermée, chemin de fichier bancal, nom de fichier avec accents.
- Les constructeurs visuels existent et fonctionnent, mais ils ne vous apprendront pas le métier.
- Compter 20 à 30 heures pour être autonome sur un site vitrine simple.
HTML et CSS : par où commencer quand on part de zéro ?
Première chose à comprendre, et elle change tout : le HTML décrit ce que la page contient, le CSS décide de quoi ça a l'air. Un titre reste un titre même sans couleur. Un paragraphe reste un paragraphe même sans police. Si vous inversez la logique — en cherchant d'abord à faire joli — vous allez écrire du code que vous détesterez dans six mois.
J'ai fait cette erreur. Sur mon premier site perso, j'ai passé une soirée entière à empiler des <div> avec des styles en ligne partout. Résultat : une page qui s'affichait correctement sur mon écran, et qui ressemblait à un sapin de Noël sur mobile. Trois heures perdues, à refaire.
Le plan d'apprentissage qui tient debout
Voici l'ordre que je conseille à quiconque me demande un point de départ. Il est séquencé, et chaque étape se valide par un résultat visible.
- Balises de base : html, head, body, h1-h6, p, a, img, ul/li. Vous écrivez une page de texte simple, vous l'ouvrez dans le navigateur. Fini.
- Structure sémantique : header, nav, main, section, article, footer. Vous refaites la même page, mais proprement découpée.
- Formulaires : input, label, button, textarea. Vous créez un formulaire de contact qui ne sert à rien pour l'instant.
- CSS de base : sélecteurs, couleurs, marges, padding, bordures. Vous habillez ce que vous avez déjà écrit.
- Mise en page moderne : flexbox, puis grid. C'est ici que le déclic arrive pour la plupart des gens.
- Responsive : media queries, unités relatives. Vous regardez votre site sur votre téléphone et vous corrigez.
Cette séquence prend, en pratique, une vingtaine d'heures étalées sur deux à trois semaines à raison d'une heure par jour. Pas « une soirée ». Les promesses de soirée unique concernent l'affichage d'une page blanche avec un titre rouge, ce qui n'est pas un site.
Quel outil pour écrire du code ?
Visual Studio Code, gratuit, disponible sur Windows, macOS et Linux, reste le choix par défaut et je ne vois pas de raison d'en changer pour un débutant. Il existe aussi une version qui tourne directement dans le navigateur, pratique quand on est sur un ordinateur emprunté ou une machine verrouillée par l'employeur.
Ce dont vous n'avez pas besoin au départ : Node, npm, un framework JavaScript, une chaîne de build. J'ai vu des débutants installer Vite avant d'avoir écrit leur premier <h1>. C'est du bruit.
Le workflow minimal, c'est deux dossiers et un fichier :
index.htmlstyle.css- un dossier
images/à côté, pas ailleurs
Vous double-cliquez sur index.html, le navigateur l'ouvre, vous modifiez, vous rafraîchissez. Cette boucle toute bête est votre outil de travail pour les deux prochaines semaines. Ne la compliquez pas.
Les erreurs qui font perdre des heures (et comment les repérer)
Il y a un moment précis où presque tout le monde bloque. Le CSS ne s'applique pas. La page s'affiche sans style, ou les images ne chargent pas, et on cherche pendant vingt minutes.
Dans 90 % des cas que j'ai vus — sur mes propres projets comme sur ceux de personnes que j'accompagnais — c'est l'une de ces quatre choses :
| Symptôme | Cause probable | Vérification rapide |
|---|---|---|
| Le CSS ne s'applique pas du tout | Chemin du fichier style.css faux | Console du navigateur, onglet Réseau : le fichier apparaît en rouge s'il est introuvable |
| La page entière est en italique | Une balise <em> ou <i> jamais refermée | Chercher dans le code la dernière balise ouverte non fermée |
| Les images ne s'affichent pas | Nom de fichier avec accent, espace ou majuscule | Renommer en minuscules, sans espace, sans accent |
| Rien ne bouge malgré le CSS écrit | Fichier non sauvegardé | Sauvegarder. Vraiment. On oublie tous, moi le premier. |
Le point sur les noms de fichiers mérite qu'on s'y arrête. Un fichier nommé Photo été.JPG vous fera perdre une heure minimum, parce que le serveur qui hébergera votre site est souvent sensible à la casse et à l'encodage. Prenez l'habitude dès le début : tout en minuscules, pas d'espace, pas d'accent, tirets à la place des espaces. photo-ete.jpg. C'est moche comme nom, c'est propre comme pratique.
Faut-il apprendre à lire les messages d'erreur ?
Oui, et c'est une compétence qui rapporte plus que la mémorisation des balises. La console de développement du navigateur — accessible avec F12 — vous dit exactement quel fichier ne charge pas, à quelle ligne se situe l'erreur CSS, et pourquoi une image ne s'affiche pas. La première fois qu'on l'ouvre, ça ressemble à du bruit. Au bout de trois utilisations, c'est un radar.
Comment mettre son site en ligne (l'étape que les cours oublient)
C'est le trou béant de la majorité des tutoriels. On vous apprend à créer une page qui s'affiche sur votre ordinateur, et on s'arrête là. Sauf qu'un site qui n'est pas en ligne n'est pas un site. C'est un fichier.
Pour un site statique — HTML, CSS, un peu d'images — la mise en ligne tient en quinze minutes et ne coûte rien. Les hébergeurs statiques modernes acceptent qu'on dépose un dossier et vous donnent une adresse en quelquechose.netlify.app ou équivalent. Vous pouvez ensuite brancher votre propre nom de domaine pour une dizaine d'euros par an.
Pourquoi c'est important de le faire tôt ? Parce que publier vous force à affronter des problèmes que l'affichage local cache : les chemins de fichiers qui étaient « relatifs à mon bureau », les images lourdes qui mettent huit secondes à charger, les balises meta manquantes qui font que Google ne comprend rien à votre page.
Mon conseil, que j'assume à fond : mettez en ligne dès la première semaine, même si c'est laid. Une page avec un titre, un paragraphe et votre prénom vaut mieux qu'un projet parfait qui reste dans un dossier. C'est en publiant qu'on apprend le métier.
Est-ce que je peux créer un site HTML gratuitement ?
Oui, entièrement. L'éditeur de code est gratuit, l'hébergement statique aussi dans sa formule de base, et le nom de domaine est la seule chose qui coûte, si vous en voulez un qui vous appartienne. Un site vitrine simple peut donc tourner à zéro euro pendant des mois.
Faut-il encore apprendre HTML et CSS en 2026 ?
La question mérite d'être posée, parce qu'elle est légitime. Les constructeurs visuels — ces outils où l'on glisse-dépose des blocs — produisent aujourd'hui des sites tout à fait corrects pour un commerce, un portfolio ou une page de vente. En deux jours, vous avez quelque chose de propre. Sans écrire une ligne.
Ma position, et elle est tranchée : dépend de ce que vous voulez faire dans deux ans.
- Vous avez besoin d'un site, une fois, pour un projet précis ? Le constructeur visuel est probablement le meilleur choix. Ne perdez pas trois semaines par principe.
- Vous voulez pouvoir modifier n'importe quel site, comprendre ce qui casse, ou envisager une carrière dans le développement ? Apprenez le HTML et le CSS. Aucun raccourci ne remplace ça.
- Vous voulez combiner les deux — construire vite, puis ajuster finement ? Apprenez d'abord les bases, puis allez vers les outils. Dans cet ordre.
Ce qui s'est réellement déplacé, ce n'est pas la valeur du HTML et du CSS. C'est le seuil d'entrée pour obtenir un résultat acceptable. Il a baissé. Mais le plafond de ce qu'on peut faire sans comprendre le code, lui, n'a pas bougé d'un millimètre. Les constructeurs vous enferment dans leurs limites. Le code, non.
Combien de temps avant d'être autonome ?
Comptez 20 à 30 heures de pratique active pour maîtriser un site vitrine simple de bout en bout : structure, mise en page responsive, formulaire de contact, mise en ligne. En pratique, à raison d'une heure par jour, cela représente un mois. Au-delà, tout dépend de ce que vous voulez construire. Le JavaScript — pour l'interactivité — s'ajoute après, et là on entre dans un autre registre, plus long, plus exigeant.
Ce qui distingue les gens qui y arrivent de ceux qui abandonnent n'est ni le talent ni le temps disponible. C'est le fait d'avoir publié quelque chose de visible, tôt, même imparfait. Une page bancale en ligne génère plus de progrès qu'un dossier soigné qui ne quitte jamais votre disque dur.
Alors la vraie question n'est pas « combien de temps pour apprendre le HTML et le CSS ». C'est « qu'est-ce que je publie cette semaine ? ». Répondez à celle-là, le reste suivra.
