En 4 semaines à raison d'une heure par jour, vous pouvez créer votre première page web fonctionnelle en HTML et CSS. Pas de diplôme requis. Juste un éditeur de texte gratuit, un navigateur et les bons exercices.
Ce guide vous montre exactement par où commencer : les outils à installer, les premières balises HTML à connaître, les propriétés CSS de base — et les erreurs qui font perdre du temps.
Étape 1 — Comprendre le rôle de chaque langage
Avant d'ouvrir VS Code, deux minutes de clarté.
HTML (HyperText Markup Language) structure la page. Il dit au navigateur : « ici un titre, là un paragraphe, là une image ». Résultat visuel : texte noir sur fond blanc. Aucune mise en forme. C'est délibéré — ce n'est pas son rôle.
CSS (Cascading Style Sheets) s'occupe de l'apparence. Il dit : « ce titre en bleu foncé, ce texte aéré, ce fond gris clair ». Deux fichiers séparés, deux rôles distincts.
On apprend toujours HTML en premier, CSS ensuite — parce qu'on a besoin d'un contenu à styliser avant de styliser quoi que ce soit.
Pour comprendre la relation entre HTML, CSS et JavaScript en détail, l'article le rôle concret de HTML, CSS et JavaScript explique chaque technologie avec des exemples métiers.
Étape 2 — Installer son environnement en 5 minutes
Aucun logiciel payant nécessaire. Deux outils suffisent.
Visual Studio Code — l'éditeur de référence
VS Code est gratuit, disponible sur Windows, Mac et Linux. Téléchargez-le sur code.visualstudio.com.
Ce qu'il apporte concrètement :
- Coloration syntaxique : les balises HTML apparaissent en couleur, les erreurs sont visibles instantanément
- Complétion automatique : tapez
h1et appuyez sur Tab — la balise s'ouvre et se ferme seule - Prévisualisation en temps réel avec l'extension gratuite "Live Server"
Aucune configuration avancée requise pour commencer.
Chrome et les outils développeur
La touche F12 dans Chrome ou Firefox ouvre les "Outils développeur". Ce panneau affiche le code HTML de n'importe quelle page et vous permet de modifier le CSS en direct pour voir l'effet avant de l'écrire dans votre fichier. Gratuit, immédiat, indispensable.
Ce qu'il faut avoir avant de commencer :
- VS Code installé
- Chrome ou Firefox ouvert
- Un dossier dédié sur votre bureau — par exemple
mon-premier-site/
Étape 3 — Votre première page HTML
Créez un fichier index.html dans votre dossier. Copiez ce code dans VS Code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page</title>
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<p>Je suis en train d'apprendre HTML et CSS.</p>
<a href="#">Un lien cliquable</a>
</body>
</html>Ouvrez ce fichier dans Chrome (glissez-le directement dans le navigateur). Vous voyez du texte noir sur fond blanc — votre première page web.
Ce que chaque bloc fait
<!DOCTYPE html>: signale un document HTML5 au navigateur<head>: informations techniques (titre de l'onglet, encodage) — non affiché à l'écran<body>: tout ce que l'utilisateur voit<h1>: titre principal de la page<p>: paragraphe de texte<a href="#">: lien hypertexte
Exercice : modifiez le texte du <h1> et du <p>. Enregistrez (Ctrl+S), rechargez Chrome (F5). Vous venez de modifier une page web.
Pour aller plus loin sur la structure d'une page, le guide les balises HTML5 sémantiques expliquées montre comment nommer correctement les zones d'une page pour Google et les navigateurs.
Étape 4 — Votre premier fichier CSS
Créez un fichier style.css dans le même dossier. Dans index.html, ajoutez cette ligne dans le <head>, juste avant </head> :
<link rel="stylesheet" href="style.css">Dans style.css, ajoutez :
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #2c3e50;
}
p {
line-height: 1.6;
color: #555;
}Rechargez Chrome. La même page a maintenant une police lisible, une largeur maximale et des couleurs. Quinze lignes de CSS font cette différence.
Les propriétés CSS à connaître en priorité
color/background-color: couleur du texte et du fondfont-family/font-size/font-weight: typographiemargin/padding: espacement extérieur et intérieurwidth/max-width: contrôle de la largeurdisplay: flex: mise en page moderne (à aborder après les bases)
Un cas pratique utile dès les premières semaines : centrer un élément en CSS — trois techniques expliquées sans jargon.
Combien de temps faut-il pour apprendre HTML et CSS ?
Les bases fonctionnelles prennent 4 à 8 semaines en pratiquant 1 heure par jour. Un mini-site complet demande 2 à 3 mois.
Les bases fonctionnelles en 4 à 8 semaines
En pratiquant 1 heure par jour, vous pouvez créer une page de présentation complète — menu, sections distinctes, design cohérent — en 4 à 8 semaines. C'est le consensus des forums spécialisés, d'OpenClassrooms à Quora FR.
« Les bases fonctionnelles » signifient concrètement : structurer une page, styler du texte, gérer les espacements, créer une mise en page en deux colonnes.
Un mini-site complet en 2 à 3 mois
Aller plus loin — menu responsive adapté au mobile, galerie d'images, formulaire stylé — demande 2 à 3 mois de pratique régulière, à raison d'une à deux heures par jour.
La clé : créer de vraies pages, pas juste lire des cours. Chaque notion apprise doit se traduire par une page créée — même imparfaite.
Les meilleures ressources gratuites
Pas besoin de payer pour apprendre HTML et CSS. Ces quatre ressources couvrent l'essentiel :
- MDN Web Docs (developer.mozilla.org/fr) : documentation officielle de Mozilla, disponible en français. Ultra-fiable. Utilisez-la pour vérifier une propriété CSS ou une balise HTML précise.
- OpenClassrooms (openclassrooms.com) : le cours « Créez votre site web avec HTML5 et CSS3 » est gratuit et bien structuré. Bon point de départ pour les débutants.
- Grafikart (grafikart.fr) : tutoriels vidéo en français, du débutant à l'avancé. Formation HTML de 17 chapitres, accessible gratuitement.
- W3Schools (w3schools.com) : exemples interactifs rapides. Pratique pour tester une propriété CSS sans créer un fichier complet.
Choisissez une ressource principale et tenez-vous-y. Changer de plateforme toutes les semaines est l'une des erreurs les plus courantes.
Les erreurs classiques qui font perdre du temps
Quatre comportements reviennent chez la plupart des débutants. Les identifier tôt fait gagner des semaines.
Lire sans créer
Lire des cours sans créer de pages en parallèle ne fonctionne pas. La mémoire retient ce qu'on pratique, pas ce qu'on lit. Après chaque concept, créez une page qui l'applique — même une seule ligne CSS.
Vouloir tout apprendre avant de commencer
HTML a plus de 100 balises. CSS a des centaines de propriétés. Vous n'en avez pas besoin pour créer votre première page. Concentrez-vous sur les 20 balises HTML et les 15 propriétés CSS les plus fréquentes. Le reste s'apprend par besoin, au fil des projets.
Ignorer le responsive design
En 2026, plus de la moitié des visites web viennent d'un mobile — c'est le consensus des statistiques mondiales de navigation. Si votre page ne s'adapte pas aux petits écrans, elle est inutilisable pour une part importante de vos visiteurs. Les media queries CSS (@media) permettent de gérer l'adaptation mobile — abordez-les dès la troisième ou quatrième semaine.
Copier du code sans le comprendre
Copier un exemple pour accélérer est normal. Mais si vous ne comprenez pas ce que chaque ligne fait, vous ne pourrez pas l'adapter à vos besoins. Prenez cinq minutes pour décortiquer chaque bloc copié avant de passer à la suite.
Ce qu'on peut créer avec HTML et CSS seuls
Avec HTML et CSS uniquement :
- Une page de présentation personnelle ou professionnelle
- Un site vitrine statique — services, à propos, galerie d'images
- Un CV en ligne
- Un portfolio simple
Ce qui nécessite du code supplémentaire :
- Un formulaire de contact qui envoie réellement un e-mail → PHP ou service tiers (Brevo, Formspree)
- Un espace membre, un panier, des données sauvegardées → JavaScript et base de données
- Un blog avec articles éditables sans toucher au code → CMS (WordPress, etc.)
HTML et CSS construisent la façade. Les fonctionnalités dynamiques nécessitent d'autres outils.
FAQ
Peut-on apprendre HTML et CSS sans bases en informatique ?
Oui. HTML et CSS ne sont pas des langages de programmation au sens strict. Il n'y a ni algorithmes ni logique complexe. Si vous savez utiliser un éditeur de texte et un navigateur, vous avez tout ce qu'il faut pour commencer.
HTML et CSS suffisent-ils pour créer un site professionnel ?
Pour une page vitrine statique, oui. Pour un site avec formulaire de contact fonctionnel, espace client ou mise à jour du contenu sans toucher au code — non. Ces fonctionnalités nécessitent du JavaScript et/ou un backend.
Quelle est la différence entre HTML et CSS ?
HTML structure le contenu — ce qu'il y a sur la page. CSS le met en forme — comment ça apparaît. CSS a besoin d'un contenu HTML à styliser pour exister.
Comment savoir si je progresse ?
Fixez-vous des projets concrets. Semaine 1 : une page avec un titre, un texte et une image. Semaine 4 : deux sections distinctes avec des couleurs cohérentes. Semaine 8 : un mini-site de 2-3 pages avec un menu fonctionnel. La progression se mesure à ce que vous créez, pas aux cours terminés.
Ce qu'il faut retenir
HTML et CSS s'apprennent en pratiquant, pas en lisant. Avec VS Code, un navigateur et une heure par jour, vous pouvez créer votre première page web fonctionnelle en quelques semaines.
Commencez simple : un fichier HTML, un fichier CSS, du texte et des couleurs. Ajoutez de la complexité progressivement, au fil des besoins.
Si votre objectif est un site qui génère des contacts — avec un référencement local soigné, un formulaire fonctionnel et une structure adaptée à Google — HTML et CSS seuls ne couvrent pas cette étape.
