Bienvenue au départ du Rallye.
Chaque trajet = une notion à comprendre, des exercices concrets à effectuer dans ton éditeur de code, et un QCM pour valider. C'est le QCM réussi qui valide les kilomètres et fait tourner le compteur. Avance à ton rythme — pas de chrono.
Les fondations
Comprendre ce qu'est HTML, écrire ta première page, faire le lien avec CSS. Le moteur — avant de rouler.
C'est quoi HTML ?
HTML, c'est le squelette d'une page web. Il décrit le contenu : titres, paragraphes, images, liens. Pas de style, pas de couleur — juste la structure.
- Crée un dossier
mon-rallyesur ton bureau. - Ouvre VS Code et crée un fichier
index.htmldans ce dossier. - Tape
<h1>Ferrari</h1>(ou la marque de ton choix) et sauvegarde. - Double-clique sur le fichier pour l'ouvrir dans le navigateur. Tu vois ton titre ? C'est du HTML.
<p> qui décrit ta voiture préférée en deux phrases.
Les balises essentielles
Titres h1→h6, paragraphe p, image img, lien a. Ces quatre types constituent 80% de ce qu'on trouve dans une page HTML.
alt sur les images n'est pas optionnel — c'est ce que les lecteurs d'écran lisent à la place de l'image pour les personnes malvoyantes.
- Sous ton
<h1>, ajoute un<h2>avec le modèle exact de ta voiture. - Trouve une image sur le web, copie son adresse (clic droit → copier l'adresse de l'image).
- Ajoute-la avec
<img src="ADRESSE" alt="Ferrari F40 rouge">— rends l'alt descriptif. - Ajoute un lien vers Wikipedia de la marque :
<a href="URL">En savoir plus</a>.
<ul> avec 3 caractéristiques de ta voiture (puissance, vitesse max, année…).
La structure complète d'une page
Une page HTML correcte a toujours la même ossature : DOCTYPE, <html>, <head>, <body>. Beaucoup confondent head et body au départ — et ça cause des bugs bizarres.
- Tout en haut, ajoute
<!DOCTYPE html>sur la première ligne. - Entoure tout avec
<html> ... </html>. - Ajoute un
<head></head>vide avant le contenu, entoure le contenu avec<body> ... </body>. - Dans le
<head>, ajoute<title>Ma page Ferrari</title>. Tu vois le titre dans l'onglet ?
<meta charset="UTF-8"> dans le head — elle évite les problèmes d'accents.
Relier un fichier CSS au HTML
HTML et CSS sont deux fichiers séparés. On les relie avec une balise <link> dans le <head>. À partir de là, tout ce qu'on écrit dans le CSS s'applique à la page.
- Crée un fichier
style.cssdans le même dossier que tonindex.html. - Dans le
<head>, ajoute :<link rel="stylesheet" href="style.css">. - Dans
style.css, écris :h1 { color: red; }et sauvegarde. - Recharge — ton titre est en rouge ? La liaison fonctionne.
body { background-color: #111; }. Adapte la couleur du texte pour qu'il reste lisible.
<link> pour relier un fichier CSS ?Le modèle de boîte
En CSS, chaque élément est une boîte : contenu, padding (espace intérieur), border, margin (espace extérieur). Comprendre ça, c'est comprendre 80% des problèmes de mise en page.
- Sur
p, ajoute :border: 1px solid black;. Recharge et observe. - Ajoute
padding: 16px;— l'espace intérieur s'agrandit. - Ajoute
margin: 20px 0;— l'espace extérieur haut/bas s'agrandit. - Ouvre l'inspecteur (clic droit → Inspecter) et survole ton paragraphe — tu vois le schéma de boîte en couleurs ?
<div> avec fond coloré, padding et bordure fine.
Mettre en forme
Couleurs, typographie, sélecteurs, variables. La carrosserie de ta page.
Couleurs et fonds
color pour le texte, background-color pour le fond. Noms (red), codes hex (#CE1126) ou RGB.
- Cherche "code couleur [ta marque]" sur Google — tu trouveras le hex exact.
- Applique-le à ton
h1:color: #CE1126;(exemple Ferrari). - Change le fond de la page — essaie un noir ou gris très sombre.
- Vérifie la lisibilité avec WebAIM Contrast Checker.
Typographie et Google Fonts
font-size, font-weight, font-family, line-height. Google Fonts donne accès à des centaines de polices gratuites.
- Sur Google Fonts, cherche une police qui correspond à l'image de ta marque.
- Clique "Get font" → "Get embed code" — copie la balise
<link>dans ton<head>. - Applique :
h1, h2 { font-family: 'NomPolice', sans-serif; }. - Passe le
h1àfont-size: 3em;etfont-weight: 800;.
line-height: 1.8;. Compare avant/après.
Les sélecteurs CSS
Balise (h1), classe (.titre), identifiant (#header). Les classes sont les plus utiles — et les plus utilisées dans tous les projets.
- Joue aux 10 premiers niveaux de CSS Diner.
- Ajoute
class="fiche"sur le div qui contient ta voiture. - Dans ton CSS :
.fiche { background: #f0f0f0; padding: 20px; }. - Crée une deuxième carte avec la même classe — le style s'applique automatiquement.
.vedette pour mettre en avant ta voiture préférée — bordure plus épaisse, fond différent.
Variables CSS
Définis une couleur une seule fois dans :root, utilise-la partout avec var(). Change la variable — tout change d'un coup. C'est exactement ce qui est utilisé dans ce fichier de parcours !
- En haut de ton CSS, crée
:root { }. - Définis :
--couleur-principale: #CE1126;et--fond: #111111;. - Remplace toutes les occurrences de ces couleurs par
var(--couleur-principale). - Change la valeur dans
:root— tout se met à jour d'un coup.
--police-titre avec le nom de ta Google Font et utilise-la partout.
--ma-couleur ?Balises sémantiques
<header>, <nav>, <main>, <section>, <article>, <footer> — ces balises décrivent la fonction de chaque zone. Les moteurs de recherche et lecteurs d'écran les adorent.
<nav>.
- Remplace les
<div>génériques de ta page par les bonnes balises sémantiques. - Le titre et le logo →
<header>. - Chaque grande partie de contenu →
<section>. - Le bas de page →
<footer>. - Vérifie dans l'inspecteur que la structure est claire.
<nav> avec des liens vers les différentes sections de ta page (les ancres <a href="#section-id">).
Mise en page
Flexbox, Grid, positionnement, responsive. Le châssis qui tient tout ensemble.
Flexbox — les bases
Flexbox organise les éléments en ligne ou en colonne. Le système de mise en page le plus utilisé aujourd'hui. Un peu de pratique et ça devient naturel.
- Joue à Flexbox Froggy jusqu'au niveau 15 minimum.
- Crée un
<div class="grille">qui contient 3 fiches de voitures. - Dans ton CSS :
.grille { display: flex; gap: 20px; }. - Essaie
justify-content: space-between;puiscenter;— observe.
flex: 1; sur les fiches pour qu'elles occupent la même largeur.
CSS Grid — la mise en page en tableau
Là où Flexbox organise en une dimension (ligne OU colonne), Grid organise en deux dimensions (lignes ET colonnes). Parfait pour une grille de voitures bien alignées.
- Joue aux 10 premiers niveaux de Grid Garden.
- Crée un conteneur
.galerieavec 6 fiches voitures. - Dans ton CSS :
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }. - Résultat : 3 colonnes automatiques, égales, avec espace entre elles.
- Essaie
repeat(2, 1fr)pour passer à 2 colonnes — observe.
grid-column: span 2;.
grid-template-columns: repeat(3, 1fr) ?L'inspecteur du navigateur
Clic droit → Inspecter. L'outil le plus puissant du développeur web. Il montre le HTML et CSS de n'importe quelle page, et permet de modifier les valeurs en temps réel.
- Va sur le site officiel de Ferrari, BMW ou Porsche.
- Clic droit sur le titre principal → Inspecter.
- Dans le panneau CSS, trouve
font-family— c'est leur police. - Double-clique sur la valeur de
coloret change-la en direct. - Fais la même chose sur ton propre fichier.
Le positionnement CSS
position: relative, absolute, fixed, sticky — ces valeurs permettent de placer un élément précisément dans la page, en dehors du flux normal.
- Ajoute sur une fiche :
position: relative;— rien ne change visuellement encore. - Ajoute un badge "Nouveau" :
<span class="badge">Nouveau</span>dans la fiche. - Dans ton CSS :
.badge { position: absolute; top: 10px; right: 10px; background: red; color: white; padding: 4px 8px; }. - Le badge se place dans le coin — c'est
absolutepar rapport au parentrelative. - Essaie
position: fixed;sur une barre de navigation — elle reste en place au scroll.
position: fixed; qui reste visible quand on fait défiler la page.
position permet de placer un élément par rapport à son parent ?Le responsive — s'adapter à l'écran
Un site responsive s'adapte à la taille de l'écran avec des @media queries. Indispensable : la moitié du web se consulte sur mobile.
- Réduis la fenêtre progressivement — observe comment ta page se comporte.
- Dans l'inspecteur, clique sur l'icône mobile pour simuler un smartphone.
- Ajoute tout en bas :
@media (max-width: 600px) { .grille { flex-direction: column; } }. - Réduis la fenêtre — les fiches passent en colonne unique sur mobile.
h1 de 3em à 2em sur mobile dans la media query.
@media (max-width: 600px) ?CSS avancé
Transitions, formulaires, pseudo-classes, pseudo-éléments. Les finitions qui font la différence entre un site amateur et un site pro.
Transitions CSS
Une transition rend un changement progressif plutôt que brutal. Quand la couleur d'un bouton change au survol en douceur — c'est une transition. Une seule ligne suffit : transition: all 0.3s ease;.
@media (prefers-reduced-motion: reduce) pour les désactiver si l'utilisateur l'a demandé dans ses réglages.
- Sur tes fiches voiture, ajoute :
transition: all 0.3s ease;. - Ajoute un état hover :
.fiche:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15); }. - Passe la souris sur une fiche — elle se soulève doucement.
- Joue avec la durée (
0.1svs0.8s) et l'accélération (ease,linear,ease-in-out).
transition: background 0.3s ease; ?Formulaires HTML
<form>, <input>, <label>, <textarea>, <button> — les formulaires permettent de collecter des informations. Un formulaire de contact, une recherche, un vote pour la meilleure voiture…
<label for="id-du-champ"> associé — sans ça, les lecteurs d'écran ne savent pas à quoi sert le champ.
- Crée un formulaire "Vote pour ta voiture préférée" avec
<form>. - Ajoute un champ texte avec son label :
<label for="nom">Ton prénom</label><input id="nom" type="text">. - Ajoute un champ de sélection
<select>avec plusieurs marques en options. - Ajoute un bouton :
<button type="submit">Voter</button>. - Stylise le formulaire en CSS — padding sur les inputs, bordure, couleur au focus.
input:focus { border-color: red; outline: none; }.
<label> associé à chaque champ de formulaire ?Pseudo-classes avancées
:hover tu connais déjà. Il en existe plein d'autres : :focus (champ actif), :nth-child() (le 2e élément d'une liste), :not() (tous sauf…). Très puissant pour éviter d'ajouter des classes partout.
- Colore les lignes paires de ta liste en alternance :
li:nth-child(even) { background: #f5f5f5; }. - Cible uniquement le premier élément :
li:first-child { font-weight: bold; }. - Cible tous les éléments sauf le dernier :
li:not(:last-child) { border-bottom: 1px solid #ddd; }. - Applique un style au champ de formulaire actif :
input:focus { box-shadow: 0 0 0 3px rgba(1,240,184,0.3); }.
:first-child — sans ajouter de classe dans le HTML.
li:nth-child(2) ?Pseudo-éléments ::before et ::after
Avec ::before et ::after, tu crées du contenu décoratif uniquement en CSS — sans toucher au HTML. Un trait sous un titre, un badge en coin de carte, un guillemet géant. La magie du CSS.
::before ou ::after — ce contenu peut être ignoré par les lecteurs d'écran. Uniquement de la décoration.
- Ajoute un trait décoratif sous tes titres de section :
h2::after { content: ''; display: block; width: 40px; height: 3px; background: red; margin-top: 8px; } - Observe dans l'inspecteur — le pseudo-élément apparaît dans le DOM mais n'est pas dans ton HTML.
- Ajoute un badge "🏎" automatique avant chaque nom de marque :
.marque::before { content: '🏎 '; } - Crée un badge positionné en coin de fiche voiture (combine
::beforeavecposition: absolute).
::after et une transition — le trait glisse de gauche à droite au survol.
::before ou ::after s'affiche ?
Animations CSS — bonus
Avec @keyframes, on définit des étapes d'animation. Plus puissant que les transitions — un élément peut pulser, glisser, tourner en boucle, sans JavaScript.
@media (prefers-reduced-motion: reduce) { * { animation: none; } } en bas de ton CSS pour respecter les utilisateurs sensibles aux mouvements.
- Crée une animation de pulsation :
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } - Applique-la à ta fiche vedette :
.vedette { animation: pulse 2s ease-in-out infinite; } - Crée une animation d'entrée qui fait glisser les fiches depuis le bas :
@keyframes entree { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } - Ajoute en bas de ton CSS la règle
prefers-reduced-motionpour l'accessibilité.
Le projet
Tu as tous les outils. Il est temps d'assembler ta vraie page automobile. Pas de contrainte — juste ce que tu veux montrer, comme tu veux le montrer.
Choisir le sujet et la structure
Avant de coder, décide ce que contiendra ta page. Dessine la structure à la main sur papier — c'est ce que font les vrais développeurs avant de toucher au clavier.
- Décide du sujet : une marque, un modèle, un comparatif, un palmarès ?
- Dessine les grandes zones : header, sections, footer.
- Liste les 3 couleurs et la police.
- Crée un nouveau dossier propre et un
index.htmlvierge.
Construire le HTML
Remplis la structure avec le vrai contenu. Pas de CSS pour l'instant. Une page laide mais complète vaut mieux qu'une page belle et vide.
- Structure complète : DOCTYPE, html, head (title + charset + meta viewport), body.
- Un
<header>avec titre et navigation. - Des
<section>pour chaque partie de contenu. - De vrais textes, images avec alt, liens.
- Un
<footer>avec ton prénom et l'année.
Appliquer le style
Le CSS en couches successives : variables d'abord, couleurs, polices, espacements, mise en page, responsive. Un chantier organisé.
- Variables dans
:root— toutes tes couleurs et ta police. - Couleurs et polices globales sur
body. - Style des titres, liens, textes.
- Flexbox ou Grid pour la grille de contenu.
- Transitions sur les cartes et boutons.
- Media query pour le mobile.
Publier sa page en ligne
GitHub Pages permet d'héberger gratuitement une page HTML en quelques minutes. Ta page aura une vraie adresse URL, visible par tout le monde.
- Crée un compte sur GitHub (github.com).
- Crée un nouveau dépôt nommé exactement
ton-pseudo.github.io. - Upload tes fichiers HTML et CSS.
- Settings → Pages → active GitHub Pages sur la branche main.
- Attends 2 minutes puis ouvre
https://ton-pseudo.github.io.
Ressources utiles
Les liens essentiels — à garder dans tes favoris pour toute la suite.