Apprendre le HTML et CSS quand on débute : le guide simple

Un débutant m'a envoyé la semaine dernière un fichier de 340 lignes. Il avait fait son premier site. Bravo. Sauf que sa page, il l'avait construite à coups de <div> empilés, sans un seul <header>, sans <main>, et son CSS tenait sur un seul sélecteur universel. Ça s'affichait. Ça ressemblait à quelque chose. Et c'était un cauchemar à reprendre.

Je lui ai dit la même chose qu'à chaque personne qui me demande par où commencer pour apprendre le HTML et le CSS : la difficulté n'est presque jamais la syntaxe. C'est de savoir ce qu'on écrit, et pourquoi.

Voici comment je conseille de s'y prendre aujourd'hui, avec les étapes dans le bon ordre, les outils que j'utilise réellement, et les erreurs que je vois se répéter à chaque session.

Par où commencer quand on débute en HTML et CSS ?

La question qu'on me pose le plus souvent, et la réponse est contre-intuitive : n'ouvrez pas un cours de 40 heures. Ouvrez un éditeur de texte et écrivez dix lignes.

Le HTML décrit le sens du contenu. Pas son apparence. Une balise <h1> dit « ceci est le titre principal de la page », pas « ceci doit être gros et en gras ». Cette distinction paraît anodine. Elle détermine tout ce que vous ferez ensuite, y compris votre référencement et l'accessibilité de vos pages.

Le CSS, lui, s'occupe de la présentation. Couleurs, largeurs, espacements, positionnement. Séparer les deux n'est pas une coquetterie de puriste : c'est ce qui vous permettra de changer l'aspect complet d'un site sans toucher une ligne de contenu.

Votre premier fichier, concrètement

Créez un dossier, puis un fichier index.html. Trois lignes suffisent pour voir quelque chose dans votre navigateur :

• une déclaration de type de document
• une balise <html> qui englobe tout
• un <body> dans lequel vous glissez un titre et un paragraphe

Double-cliquez sur le fichier. Votre page s'affiche. Ce moment, cette bascule entre un fichier texte et une page web, c'est là que la plupart des gens accrochent. Pas avant.

Pourquoi ne pas apprendre HTML puis CSS, séparément ?

Parce que vous perdriez le retour visuel. Le HTML seul produit une page grise, en Times New Roman, avec des liens bleus soulignés. Des heures de balises sans aucune satisfaction. J'ai vu des débutants abandonner à ce stade, persuadés que « le web, c'est moche ».

Apprenez-les en parallèle dès le deuxième jour. Vous écrirez cinq balises, puis trois règles CSS, et vous verrez immédiatement le résultat.

Combien de temps faut-il réellement pour apprendre le HTML et CSS ?

Deux heures par jour, six jours par semaine. Au bout de quatre à six semaines, vous construisez une page statique propre sans copier personne.

Ce chiffre mérite d'être décomposé, parce que « apprendre » veut dire des choses très différentes selon les personnes :

Paliers	Durée raisonnable	Ce que vous savez faire
Bases HTML	1 semaine	Titres, paragraphes, liens, images, listes, formulaires simples
Sélecteurs et boîte CSS	1 à 2 semaines	Cibler des éléments, marges, bordures, largeurs, couleurs
Mise en page moderne	2 semaines	Flexbox, grid, positionnement
Responsive	quelques jours	Media queries, unités relatives, images adaptatives
Autonomie	continu	Reproduire une maquette simple de bout en bout

Attention à un piège : ce tableau décrit une progression pour quelqu'un qui pratique chaque jour. Le même contenu avalé en regardant des vidéos en accéléré ne produira rien.

Peut-on apprendre plus vite avec des PDF et des cours gratuits ?

Les cours HTML et CSS au format PDF ont un avantage réel : ils se parcourent vite, se gardent, se relisent. Ils ont un défaut tout aussi réel : ils ne vous obligent jamais à écrire.

Mon conseil après avoir testé les deux approches : utilisez un PDF comme référence, pas comme parcours principal. Vous y reviendrez pour vérifier une propriété oubliée. Mais votre apprentissage doit passer par un clavier.

Les outils dont vous avez vraiment besoin

Rien de compliqué. Et surtout, rien de payant pour commencer.

Quel éditeur de code choisir en 2026 ?

VS Code reste mon choix par défaut, et je ne suis pas seul. Gratuit, disponible partout, avec une extension HTML/CSS intégrée qui vous signale vos erreurs de balises pendant que vous tapez.

Une alternative existe pour ceux qui trouvent l'interface chargée : des éditeurs plus minimalistes, ou des environnements en ligne qui fonctionnent directement dans le navigateur. Je les déconseille pour un usage quotidien, parce que vous finirez par vouloir vos fichiers en local. Autant prendre l'habitude tout de suite.

Le navigateur, votre second outil

Appuyez sur F12. Vous ouvrez les outils de développement, et là se trouve l'inspecteur d'éléments. C'est l'outil que j'utilise le plus en quinze ans de pratique, sans exception.

Vous survolez un élément, vous modifiez une couleur en direct, vous ajustez une marge. Rien n'est sauvegardé, tout est jetable. Pour comprendre pourquoi votre boîte déborde de son conteneur, il n'y a pas plus rapide.

• Le panneau Elements montre le HTML réel de la page, même quand il diffère de votre fichier source
• Le panneau Styles indique quelles règles s'appliquent, et lesquelles sont écrasées
• Le mode responsive simule différentes tailles d'écran en un clic

Troisième outil, gratuit lui aussi : la documentation MDN. Elle fait référence sur HTML et CSS. Quand vous cherchez une propriété, allez-y en premier. Les blogs et les forums arrivent en second, et souvent avec des informations périmées.

Cinq erreurs que je vois se répéter à chaque session

Avouons-le : certaines sont inévitables. Je les ai toutes commises. La bonne nouvelle, c'est qu'on les corrige vite une fois qu'on les a identifiées.

1. Copier du code sans le retaper

Le copier-coller fonctionne. C'est bien le problème. Votre projet s'affiche, vous êtes content, et trois jours plus tard vous ne savez pas pourquoi votre grille se casse sur mobile. Retypez. Toujours. La mémoire passe par les doigts.

2. Sauter le CSS pour « avancer plus vite »

J'ai fait ça sur mon premier projet. Résultat : une page fonctionnelle que personne ne voulait montrer. Le CSS n'est pas une couche de finition, c'est la moitié du travail.

3. Négliger le HTML sémantique

Le cas de mon lecteur avec ses 340 lignes de <div>. Une page qui empile des divisions anonymes est illisible pour vous, pour les lecteurs d'écran, et pour les moteurs de recherche. Apprenez les balises de structure tôt. Les reprendre plus tard coûte dix fois plus cher.

4. Combattre le CSS au lieu de l'écrire

Quand une mise en page résiste, le réflexe est d'ajouter des exceptions : !important, positions absolues, marges négatives. Franchement, à ce stade, le problème est presque toujours que vous vous battez contre la logique du navigateur.

5. Enchaîner les tutoriels sans jamais finir un projet

J'ai un ami qui a suivi une bonne dizaine de cours. Il n'a jamais construit une seule page personnelle. Le savoir sans application ne s'ancre pas.

Quel mini-projet HTML/CSS choisir pour progresser ?

Un projet qui vous tient à cœur. C'est la vraie réponse, et elle compte plus que le choix technique.

Quelques pistes qui donnent des résultats visibles en quelques soirées :

1. Une page de présentation personnelle, avec une photo et quelques liens.
2. La reproduction d'une maquette existante, à partir d'une capture ou d'un site que vous aimez.
3. Une page de recette ou d'article de blog, avec styles cohérents.
4. Une galerie d'images en CSS grid, avec un survol qui réagit.
5. Une page de contact avec un formulaire, même s'il n'est pas encore branché à un serveur.

Mon projet de référence, celui que je conseille toujours : reproduire une page d'accueil de site connu. Pas pour la copier, mais pour le défi. Vous rencontrerez des problèmes concrets que les tutoriels n'abordent jamais, et c'est exactement ce qui vous fera progresser.

Et après, on apprend quoi ?

Trois chantiers, dans cet ordre : le responsive, Git, puis JavaScript.

Le responsive vient en premier parce qu'il prolonge directement le CSS que vous connaissez. Vous ajoutez des media queries, vous passez vos largeurs en pourcentages ou en unités relatives, et votre page s'adapte. Environ une semaine de travail pour en saisir les bases.

Git ensuite. Même seul sur un projet, il change tout. Vous versionnez, vous revenez en arrière, vous déployez. C'est devenu la norme sur quasiment toutes les plateformes d'hébergement, y compris les gratuites.

JavaScript enfin. Le langage rend les pages interactives. C'est un vrai saut de complexité, et il vaut mieux y arriver avec un HTML et un CSS solides qu'avec des bases fragiles.

Ce qui reste une fois le cours terminé

Les frameworks passeront. Les outils changeront. Ce qui reste, c'est la compréhension de la boîte CSS, la logique du flux et des sélecteurs, le sens des balises.

Vous connaîtrez probablement une phase de découragement, vers la troisième semaine, quand la mise en page refusera de se plier. Ne décidez rien pendant cette phase. Ouvrez l'éditeur le lendemain, corrigez une chose, puis une autre.

Un jour, vous regarderez un site que vous n'avez pas écrit, et vous saurez comment il est construit. Ce jour-là, vous ne serez plus débutant.