Tu peux apprendre HTML et CSS à partir de zéro et gratuitement, avec juste un navigateur et un éditeur de code. À raison de 30 à 60 minutes par jour, les bases prennent environ quatre semaines. HTML décrit la structure d'une page et CSS son apparence. Apprends-les dans cet ordre : squelette du document, texte, liens et images, listes, tableaux et formulaires, puis sélecteurs, box model, Flexbox, Grid et design responsive. À la fin, tu publies ta propre page.
Ce texte fonctionne comme un mini-cours : chaque étape propose une explication, un exemple de code et un exercice. La plupart des étapes renvoient vers une leçon gratuite du cours HTML et CSS sur CodeWorlds, pour pratiquer directement dans le navigateur. Tu ne sais pas encore si le développement web est fait pour toi ? Lis d'abord par où commencer à apprendre à programmer.
Ce que sont HTML et CSS
HTML (HyperText Markup Language) est un langage de balisage qui décrit la structure d'une page : où se trouve le titre, le paragraphe ou l'image. CSS (Cascading Style Sheets) gère l'apparence : couleurs, polices, espacements et mise en page. HTML dit ce qui est sur la page, CSS dit comment ça se présente. JavaScript ajoute du comportement, mais tu n'en as pas encore besoin.
Tu écris le contenu avec des balises. La plupart vont par paires, comme <p> et </p>, avec le contenu entre les deux. Certaines, comme <img>, n'ont pas de balise fermante. Les attributs ajoutent des informations : href indique à un lien où aller, et alt décrit une image pour les personnes qui ne la voient pas. Voici de quoi commencer :
<h1>à<h6>: les titres, du plus important au moins important,<p>: un paragraphe,<a>: un lien,<img>: une image,<ul>,<ol>et<li>: listes à puces et numérotées,<div>: un conteneur générique,<button>: un bouton.
La documentation MDN décrit chaque élément, et la leçon Introduction au HTML fait un bon échauffement.
Un plan d'apprentissage sur quatre semaines
Ce plan suppose 30 à 60 minutes par jour. Avec plus de temps, tu termines plus vite, et avec moins, étale-le sur deux mois. La régularité compte le plus, comme l'explique l'article sur comment apprendre à coder.
| Semaine | Sujets | Ce que tu as à la fin |
|---|---|---|
| 1 | squelette du document, sémantique, texte, liens, images | quelques sous-pages reliées par des liens |
| 2 | listes, tableaux, formulaires, sélecteurs CSS | une page stylée avec un formulaire de contact |
| 3 | la cascade, le box model, Flexbox, Grid | un menu, des cartes et une galerie en grille |
| 4 | design responsive, projet final, publication | ta propre page à une adresse publique |
Il te faut un éditeur de code, par exemple le gratuit Visual Studio Code, et un navigateur avec les outils de développement (touche F12, ou Cmd+Option+I sur Mac). Tu y cliques sur n'importe quel élément, tu vois ses styles et tu les modifies en direct : le meilleur endroit pour expérimenter.
Le squelette d'un document HTML
Chaque page partage le même squelette. Crée un dossier de projet avec un fichier index.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p>Voici mon premier paragraphe écrit en HTML.</p>
</body>
</html><!DOCTYPE html> signifie HTML moderne, et lang indique la langue du contenu aux lecteurs d'écran et aux moteurs de recherche. <head> contient des informations sur la page : l'encodage des caractères, le titre de l'onglet et le réglage viewport, sans lequel un téléphone affiche la page réduite comme sur un ordinateur. Le contenu visible va dans <body>.
Exercice : ouvre le fichier dans un navigateur, change le titre, enregistre et actualise l'onglet. C'est ta boucle de travail pour tout le cours.
Les balises sémantiques
Les titres forment une hiérarchie : <h1> est le titre de la page, <h2> marque les chapitres et <h3> les sous-sections. Choisis-les selon leur importance, pas leur taille, car c'est CSS qui règle la taille. Les balises sémantiques découpent une page en parties, et leur nom dit ce qu'elles contiennent :
<body>
<header>
<nav>
<a href="index.html">Accueil</a>
<a href="projets.html">Projets</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<article>
<h1>Comment ma première page a vu le jour</h1>
<p>Tout a commencé avec un seul fichier index.html.</p>
</article>
<aside>
<h2>Liens utiles</h2>
</aside>
</main>
<footer>
<p>Contact : anna@example.com</p>
</footer>
</body>À l'écran, <header> ressemble exactement à <div>, mais les utilisateurs de lecteurs d'écran peuvent aller directement à <main> ou à la navigation, et les moteurs de recherche comprennent mieux quel est le contenu principal. Garde <div> pour les conteneurs qui ne servent qu'au style. La leçon La sémantique en HTML va plus loin.
Exercice : découpe sur papier un site que tu aimes en header, nav, main et footer.
Texte, liens et images
Tu découpes le texte en paragraphes <p>, tu marques les passages importants avec <strong> et les passages en relief avec <em>. Ces balises portent un sens, pas un style, donc le gras décoratif se fait en CSS.
<p>Tu peux construire ta première page en <strong>une seule soirée</strong>.</p>
<p>Regarde mes <a href="projets.html">projets</a> ou écris à
<a href="mailto:anna@example.com">anna@example.com</a>.</p>
<img src="img/photo.jpg" alt="Anna à son bureau avec un ordinateur portable" width="600" height="400">Un lien est une balise <a> avec un attribut href, qui peut être relatif (projets.html), absolu (commence par https://) ou spécial, comme mailto:, qui ouvre un client e-mail. Dans <img>, src indique le fichier et alt le décrit : les lecteurs d'écran le lisent, et les navigateurs l'affichent si l'image ne se charge pas. width et height réservent de la place, pour que le contenu ne bouge pas pendant le chargement. Entraîne-toi dans la leçon Mise en forme du texte en HTML.
Exercice : crée les pages index.html et projets.html et relie-les par des liens dans les deux sens.
Listes et tableaux
<ul> crée une liste à puces, <ol> une liste numérotée, et chaque élément est un <li>. Un tableau sert à présenter des données en lignes et en colonnes, comme un emploi du temps ou une liste de prix.
<ol>
<li>Écris la structure en HTML</li>
<li>Ajoute les styles en CSS</li>
<li>Publie la page</li>
</ol>
<table>
<caption>Plan de la semaine</caption>
<thead>
<tr><th>Jour</th><th>Sujet</th></tr>
</thead>
<tbody>
<tr><td>Lundi</td><td>Liens et images</td></tr>
<tr><td>Mardi</td><td>Formulaires</td></tr>
</tbody>
</table>Mets les titres de colonnes dans <th>, pas dans <td>, pour que les lecteurs d'écran sachent à quelle colonne appartient une valeur. Plus personne ne met en page des sites entiers avec des tableaux : c'est le travail de Flexbox et de Grid.
Formulaires
Un formulaire collecte des données : connexion, recherche, contact. La règle clé est un <label> lié à son champ par les attributs for et id. Cliquer sur l'étiquette place alors le curseur dans le champ, et les lecteurs d'écran connaissent son nom.
<form action="/contact" method="post">
<label for="email">E-mail</label>
<input type="email" id="email" name="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">Envoyer</button>
</form>Avec le type email, les téléphones affichent un clavier avec @ et le navigateur vérifie le format de l'adresse, tandis que required bloque l'envoi d'un champ vide. C'est un confort, pas une sécurité, car le serveur doit valider les données de toute façon. HTML seul n'envoie pas non plus le message dans ta boîte mail : il te faut un serveur ou un service de formulaires. La leçon Les formulaires HTML couvre les types de champs.
Exercice : ajoute un formulaire de contact et regarde ce qui se passe quand tu cliques sur Envoyer avec un champ vide.
Sélecteurs CSS et la cascade
Tu écris les styles dans un fichier séparé, par exemple style.css, et tu l'attaches dans <head> avec <link rel="stylesheet" href="style.css">. Une règle CSS est un sélecteur qui vise des éléments, plus des déclarations qui disent quoi en faire.
p {
line-height: 1.6;
color: #1f2937;
}
.button {
background-color: #2563eb;
color: white;
padding: 12px 24px;
border-radius: 8px;
}
#contact {
margin-top: 48px;
}
nav a:hover {
text-decoration: underline;
}Le sélecteur d'élément p cible tous les paragraphes, le sélecteur de classe .button les éléments avec class="button", et le sélecteur d'identifiant #contact l'unique élément avec id="contact". La dernière règle combine un sélecteur de descendant avec une pseudo-classe : les liens dans nav sous le curseur.
Quand plusieurs règles fixent la même propriété, la spécificité la plus haute gagne : un identifiant l'emporte sur une classe, et une classe sur un élément. En cas d'égalité, la règle écrite le plus tard gagne. Au quotidien tu stylises surtout avec des classes, car leur poids est prévisible et facile à surcharger. La couleur du texte et la police sont héritées du parent, donc les régler sur body change toute la page. Entraîne-toi aux sélecteurs dans la leçon Les classes et les ID en CSS.
Exercice : règle une police sur body et change la couleur des liens du menu au survol.
Le modèle de boîte (box model)
Chaque élément est une boîte rectangulaire faite de quatre couches, de l'intérieur vers l'extérieur : le contenu, l'espacement intérieur (padding), la bordure (border) et la marge extérieure (margin). Le padding éloigne le contenu du bord, la margin éloigne tout l'élément de ses voisins.
*,
*::before,
*::after {
box-sizing: border-box;
}
.card {
width: 300px;
padding: 16px;
border: 2px solid #d4a017;
margin: 24px auto;
}Par défaut, width ne couvre que le contenu, donc la carte de l'exemple mesurerait 336 pixels de large : 300 pour le contenu, plus 16 de padding et 2 de bordure de chaque côté. box-sizing: border-box inclut le padding et la bordure dans la largeur, donc la carte fait exactement 300 pixels. La plupart des projets commencent par cette règle.
margin: 24px auto donne 24 pixels au-dessus et au-dessous, et les marges automatiques sur les côtés centrent la carte. Les outils de développement dessinent le box model de chaque élément, donc c'est là que tu trouves la source d'un espace indésirable. La leçon Le modèle de boîte CSS a plus d'exemples, et MDN propose une explication illustrée.
Flexbox
Flexbox met en page les éléments dans une seule dimension : en ligne ou en colonne. Donne au conteneur display: flex, et ses enfants directs s'alignent côte à côte.
.menu {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.projects {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.project {
flex: 1 1 250px;
}justify-content répartit les éléments sur l'axe principal, horizontal dans une ligne, et align-items les aligne sur l'axe transversal. Ces deux propriétés résolvent la plupart des problèmes d'alignement du quotidien, et gap fixe les espacements sans marges. flex-wrap: wrap fait passer les cartes à la ligne suivante, et flex: 1 1 250px dit à chaque carte : commence à 250 pixels, grandis quand il y a de la place, et rétrécis quand il n'y en a pas. Apprends le reste dans la leçon Flexbox, mise en page flexible.
Exercice : construis un en-tête de page avec le logo à gauche et le menu à droite, alignés verticalement.
CSS Grid
Grid met en page les éléments dans deux dimensions à la fois, en lignes et en colonnes. Tu définis la grille sur le conteneur, et les éléments remplissent les cellules dans l'ordre.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}L'unité fr représente une fraction de l'espace libre. repeat(auto-fit, minmax(200px, 1fr)) crée autant de colonnes d'au moins 200 pixels que possible et partage le reste à parts égales. La galerie a donc une colonne sur un téléphone et plusieurs sur un grand écran, sans la moindre media query. La mise en page avec une barre latérale arrive dans la section sur le design responsive, et la leçon CSS Grid introduit la grille.
Exercice : mets en page six images comme dans cette galerie et redimensionne la fenêtre pour observer le nombre de colonnes changer.
Flexbox ou Grid
Un petit aide-mémoire pour qui connaît les deux techniques :
| Caractéristique | Flexbox | Grid |
|---|---|---|
| Dimension | une : une ligne ou une colonne | deux : lignes et colonnes à la fois |
| Qui fixe la taille | le contenu des éléments | la grille définie sur le conteneur |
| Usages typiques | menus, barres de boutons, centrage | galeries, cartes en colonnes égales, mise en page de page |
| Propriétés clés | justify-content, align-items, flex | grid-template-columns, grid-area, gap |
| Support des navigateurs | tous les navigateurs modernes | tous les navigateurs modernes |
Les deux techniques se combinent souvent : Grid met en page la page ou une section, tandis que Flexbox aligne les détails dans les cellules, comme une icône à côté d'un texte de bouton. Règle de base : une ligne ou une colonne, c'est Flexbox ; une grille, c'est Grid. Vérifie le support des propriétés récentes sur Can I use.
Design responsive
Une page responsive s'adapte à la largeur de l'écran. L'approche la plus simple est mobile first : tu écris d'abord les styles pour un écran étroit, puis tu ajoutes les changements pour les écrans plus larges dans des media queries.
img {
max-width: 100%;
height: auto;
}
.layout {
display: grid;
gap: 24px;
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 250px 1fr;
}
}Sur un écran étroit, .layout a une seule colonne avec la barre latérale au-dessus du contenu, et à partir de 768 pixels deux colonnes : une fixe pour la barre latérale et une flexible pour le contenu. La règle pour img veille à ce qu'aucune image ne dépasse son conteneur.
Ajoute trois habitudes : max-width plutôt que des largeurs figées, des unités rem pour les polices et les espacements, et des tests en mode appareil mobile dans les outils de développement et sur un vrai téléphone. N'oublie pas non plus la balise viewport de la première étape, car sans elle les media queries ne se comportent pas sur un téléphone comme tu l'attends. La leçon Les media queries fait pratiquer tout ça.
Premier projet : une page personnelle
Pendant la quatrième semaine, construis une page complète sur toi-même. Elle n'a pas besoin d'être belle, elle doit fonctionner. Il te faut index.html, style.css et un dossier img pour les photos, et la page doit avoir :
- un en-tête avec ton nom et un menu en Flexbox,
- une section à propos avec une photo et un texte
alt, - une section projets avec des cartes sur une grille Grid,
- un formulaire de contact avec des étiquettes,
- un pied de page avec des liens vers tes profils.
Commence par le HTML seul et vérifie que la page a du sens sans les styles, puis ajoute le CSS section par section. Esquisse d'abord la mise en page sur papier ou dans Figma, car suivre un plan vaut mieux qu'inventer le visuel en codant. À la fin, passe le fichier dans le validateur W3C, qui repère les balises non fermées et les fautes de frappe dans les attributs.
Comment publier sa page
Une page statique, c'est-à-dire composée de fichiers HTML, CSS et d'images, se publie sans serveur personnel et sans hébergement payant. Trois voies courantes :
- GitHub Pages. Tu crées un dépôt public sur GitHub, tu envoies les fichiers avec le bouton Add file, et dans les réglages, onglet Pages, tu choisis de publier depuis la branche
main. Peu après, la page est en ligne à une adresse du typeton-pseudo.github.io/nom-du-depot. Les détails sont dans la documentation GitHub Pages. - Netlify. Après avoir créé un compte, tu glisses ton dossier de fichiers sur la page Netlify Drop et tu obtiens une adresse publique. Plus de détails dans l'article sur Netlify.
- Vercel. Tu connectes ton compte à un dépôt GitHub, et chaque changement poussé se publie tout seul. Les détails sont dans l'article sur Vercel.
Pour commencer, choisis GitHub Pages : c'est gratuit pour les dépôts publics et ça fait pratiquer la gestion de dépôt, utile dans n'importe quel emploi de développeur. La leçon Hébergement de sites statiques compare les trois voies.
Erreurs fréquentes de débutant
- Balises non fermées. Le navigateur devine ce que l'auteur voulait dire, donc au lieu d'un message d'erreur tu vois une page à l'allure bizarre. Un validateur trouve la cause en quelques secondes.
- Texte
altabsent sur les images. Sans quelques mots de description, certains visiteurs ne sauront jamais ce que montre la photo. - Lutter contre les styles avec
!important. Quand une règle ne s'applique pas, vérifie dans les outils de développement laquelle gagne et pourquoi. - Copier du code sans le comprendre. Un extrait trouvé sur internet ou donné par un assistant IA n'aide que si tu sais ce que fait chaque ligne, alors retape-le à la main et change les valeurs.
S'entraîner avec CodeWorlds
Si tu préfères un parcours structuré avec un retour immédiat, essaie le cours HTML et CSS sur CodeWorlds. C'est le monde Égypte antique : 9 modules et 429 exercices, des premières balises aux bases de CSS, Flexbox, design responsive, animations et SASS, jusqu'à CSS Grid et un projet final. Mohamed est ton guide, et tu résous les exercices dans le navigateur, certains dans un éditeur de code avec aperçu en direct, donc rien à installer. La description du cours l'estime à 40 à 60 heures d'apprentissage. Le plan gratuit donne 10 unités de carburant par jour, donc tu peux t'entraîner chaque jour sans payer. Regarde aussi les autres cours de programmation.
Et après HTML et CSS ?
Une fois ta page en ligne, tu as trois directions pertinentes. La première est JavaScript, qui ajoute du comportement à la page : menus déroulants, vérification de formulaire, récupération de données. L'article sur JavaScript pour débutants détaille un plan.
La deuxième est l'outillage CSS. Tailwind CSS stylise une page avec des classes directement dans le HTML, mais ça n'a de sens qu'une fois que tu comprends le CSS classique, car chaque classe correspond à des propriétés que tu connais déjà. Lire le code d'autres personnes aide aussi : la bibliothèque Uiverse regorge de boutons et de cartes en CSS à démonter.
La troisième est d'approfondir les bases : accessibilité, animations, SASS et fonctionnalités CSS modernes, par exemple avec le cours gratuit Learn CSS sur web.dev, de Google.
FAQ
Peut-on apprendre HTML et CSS gratuitement ?
Oui. MDN, les cours de web.dev et les validateurs W3C sont gratuits, et un éditeur de code gratuit plus un navigateur suffisent. Sur CodeWorlds, le plan gratuit donne 10 unités de carburant par jour, donc tu peux t'entraîner chaque jour sans frais.
Combien de temps faut-il pour apprendre HTML et CSS en partant de zéro ?
Tu maîtrises les bases en 2 à 4 semaines d'apprentissage régulier, ce qui correspond au plan de ce texte. Construire des pages simples avec aisance demande en général quelques mois de pratique. La régularité compte le plus : une demi-heure par jour marche mieux que de longues sessions une fois par semaine.
Faut-il connaître HTML avant de commencer à apprendre CSS ?
Oui, car CSS stylise des éléments HTML. Il suffit cependant de connaître les titres, les paragraphes, les liens, les images et les listes pour écrire tes premières règles CSS et apprendre le reste en parallèle.
HTML est-il un langage de programmation ?
Pas au sens strict. HTML est un langage de balisage : il décrit la structure d'un contenu, mais n'a ni variables, ni conditions, ni boucles. CSS non plus n'est généralement pas considéré comme un langage de programmation. Tu apprends la programmation au sens plein avec JavaScript, ce qui fait de HTML et CSS une entrée en matière en douceur.
HTML et CSS suffisent-ils pour trouver un emploi de développeur ?
Avec seulement HTML et CSS, rarement, car la plupart des offres frontend demandent aussi JavaScript et un framework. C'est cependant le socle sans lequel tu n'avances pas. L'article sur comment devenir développeur décrit tout le parcours.