Vous ouvrez l'inspecteur du navigateur sur une page blanche, vous tapez trois lignes, vous rechargez, et là… rien. Aucun style. Vous avez oublié le fameux <link rel="stylesheet">, ou votre fichier CSS n'est pas dans le bon dossier. Ce moment-là, quasiment tout le monde y passe dans sa première semaine. Et c'est exactement la raison pour laquelle apprendre le HTML et le CSS reste la meilleure porte d'entrée en développement web : vous voyez immédiatement le résultat de vos erreurs.
Je vais vous donner le parcours que j'aurais aimé qu'on me donne, pas une liste de liens. Parce qu'un annuaire de cours, vous en trouverez partout. Ce qui manque, c'est l'ordre des choses et le temps que ça prend vraiment.
Points clés à retenir
- Le HTML structure le contenu, le CSS le met en forme : deux rôles distincts, à ne pas mélanger.
- Comptez environ 6 à 8 semaines à raison de 5 heures par semaine pour être autonome sur une page simple.
- Le HTML sémantique se retient mieux que le HTML « qui marche », même si le second semble plus rapide.
- Un projet concret toutes les deux semaines vaut mieux que vingt leçons regardées passivement.
- Ne touchez pas au JavaScript avant de savoir centrer une div sans chercher sur le web. Oui, vraiment.
Apprendre le HTML et le CSS pour débuter : par où commencer sans se perdre
La première question qu'on me pose, invariablement : faut-il apprendre les deux en même temps ou l'un après l'autre ? Ma réponse est tranchée. Le HTML d'abord, seul, pendant une bonne semaine. Pas parce que le CSS serait plus dur, mais parce que manipuler du contenu nu vous force à comprendre à quoi sert chaque balise avant d'y coller une couleur.
Quand j'ai commencé, j'ai fait l'inverse. J'ai copié un template entier, j'ai changé les couleurs, j'étais fier. Puis j'ai voulu ajouter une section et je ne savais pas quelle balise utiliser. J'avais appris à décorer une maison sans savoir où étaient les murs.
Le HTML n'est pas un langage de programmation
Répétons-le, parce que la confusion coûte cher plus tard : le HTML décrit une structure, il n'exécute rien. Pas de variable, pas de condition, pas de boucle. Une balise ouvrante, du contenu, une balise fermante. C'est tout.
Ce qui ne veut pas dire que c'est trivial. La différence entre <div> et <section>, entre <b> et <strong>, ce n'est pas de la décoration lexicale. C'est ce qui permet aux lecteurs d'écran et aux moteurs de recherche de comprendre votre page.
Le CSS, c'est une histoire de cascade et de spécificité
Le CSS, lui, applique des règles. Et la difficulté n'est jamais d'écrire une règle isolée. Elle est de savoir laquelle gagne quand deux règles se contredisent. C'est ce qu'on appelle la spécificité, et c'est le mur contre lequel bute la majorité des débutants vers la troisième semaine.
Un sélecteur d'identifiant bat une classe. Une classe bat un sélecteur d'élément. Un !important bat tout le monde, et c'est presque toujours une mauvaise idée. Retenez ces trois phrases, vous gagnerez des heures.
Combien de temps faut-il réellement pour apprendre ?
Si vous cherchez un chiffre honnête : environ 40 à 50 heures de pratique active pour produire une page responsive correcte sans copier de code. Étalez-le sur deux mois, pas sur un week-end intensif.
Pourquoi insister sur l'étalement ? Parce que la mémoire procédurale, celle des gestes, a besoin de nuits entre les sessions. J'ai testé les deux approches sur des personnes que j'accompagnais : celles qui faisaient 8 heures d'affilée le samedi retenaient moins que celles qui faisaient 45 minutes chaque soir. Ce n'est pas une statistique, juste ce que j'ai observé, mais c'est constant.
Un rythme qui tient sur la durée
- Semaine 1 à 2 : balises de texte, liens, images, listes, tableaux. Objectif : reproduire une page d'article simple.
- Semaine 3 à 4 : boîtes, marges, bordures, couleurs, polices. C'est là que le modèle de boîte devient limpide ou reste un mystère.
- Semaine 5 à 6 : Flexbox, puis un peu de Grid. Position et responsive.
- Semaine 7 à 8 : un vrai projet du début à la fin, sans tutoriel qui vous tient la main.
Le passage au JavaScript ? Après. Quand le CSS ne vous fait plus peur. Sinon vous empilez trois syntaxes et vous n'en maîtrisez aucune.
| Ressource | Format | Pour qui | Point faible |
|---|---|---|---|
| MDN Web Docs | Référence + guides | Ceux qui veulent comprendre le pourquoi | Peu guidé pour un pur débutant |
| Plateformes de cours interactifs | Leçons courtes + exercices | Ceux qui ont besoin d'un cadre | On peut avancer sans rien retenir |
| Vidéos | Démonstration | Voir les gestes en direct | Passif, on croit avoir compris |
| Cloner un site existant | Projet libre | Tous, dès la semaine 3 | Démoralisant au début |
Quels projets HTML/CSS pour un débutant ?
Voici les quatre que je fais faire systématiquement, dans cet ordre. Chacun ajoute une compétence que le précédent n'avait pas.
- Une page de profil statique. Photo, présentation, liens. Vous y travaillez la structure et la typographie.
- Une carte de visite en ligne avec Flexbox. Trois blocs alignés, centrés, qui se réorganisent en colonne sur mobile.
- Une landing page responsive. En-tête, section héros, grille de fonctionnalités, pied de page. C'est le projet qui fait le déclic.
- Une reproduction d'une page que vous aimez. Pas pixel-perfect, juste reconnaissable. C'est l'exercice le plus formateur et le plus humiliant.
Le troisième projet m'a pris deux jours la première fois. La deuxième fois, trois heures. Cette courbe-là, c'est votre vrai indicateur de progression, pas le nombre de cours terminés.
Les pièges qui font perdre le plus de temps
Personne ne vous prévient sur ces trois-là, et pourtant ils reviennent sans arrêt.
Confondre HTML sémantique et HTML qui s'affiche
Une page faite uniquement de <div> s'affichera parfaitement. Elle sera aussi inaccessible et mal comprise. Le HTML sémantique, c'est du travail invisible dont vous ne verrez le bénéfice que plus tard, quand vous toucherez à l'accessibilité ou au référencement. Faites-le dès le début, l'effort est faible.
Se jeter sur un framework CSS trop tôt
Les frameworks de classes utilitaires sont séduisants : on obtient un rendu correct en dix minutes. Le problème ? Vous ne saurez pas pourquoi ça marche. J'ai vu des personnes incapables d'écrire une media query après six mois de pratique, parce qu'elles avaient appris un vocabulaire, pas un langage.
Apprenez le CSS natif d'abord. Le framework viendra tout seul, et vous saurez quand l'utiliser.
Enchaîner les tutoriels sans jamais finir un projet
C'est le piège numéro un. Vous regardez, vous comprenez, vous vous sentez compétent. Puis vous ouvrez un éditeur vide et vous restez bloqué. La solution est désagréable mais simple : arrêtez les cours à la fin de la semaine 4 et construisez quelque chose de laid mais complet.
Les ressources gratuites valent-elles celles payantes ?
Pour le HTML et le CSS, oui, dans la grande majorité des cas. La documentation de référence est gratuite, complète et à jour. Un cours payant vous vend surtout un parcours ordonné et un accompagnement, pas une information inaccessible autrement.
Mon conseil : commencez gratuit, et ne payez que si vous décrochez au bout de deux semaines. L'argent ne règle pas un problème de motivation.
Et les supports en PDF ?
Un support téléchargeable, c'est pratique pour réviser sans distraction, notamment si vous apprenez dans les transports. En revanche, un PDF ne vous montrera jamais le rendu de votre code. Utilisez-le comme aide-mémoire, jamais comme méthode principale.
Comment savoir si vous êtes prêt pour la suite
Un test simple, à faire sans rien consulter. Ouvrez un éditeur vide et construisez une page avec un en-tête, une navigation à trois liens, une section de contenu et un pied de page, le tout lisible sur un écran de téléphone. Sans copier.
Si vous y arrivez en une heure, vous avez les bases. Si vous passez votre temps à chercher la syntaxe de Flexbox, refaites un tour. Ce n'est pas une course.
Le vrai signal, ce n'est pas de tout connaître. C'est de savoir où chercher quand vous ne savez pas. Cette compétence-là vous servira jusqu'à la fin de votre parcours de développeur, bien après que vous aurez oublié la moitié des balises.
