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.
C'est quoi HTML ?
HTML signifie HyperText Markup Language, un système de balises qui organise et hiérarchise le contenu d'une page Web. Il dit QUOI afficher : titres, paragraphes, images, liens… mais pas COMMENT. Pas de choix typographiques, pas de couleur, pas de mise en page ; uniquement le contenu structuré.
Ci-dessous, un lien qui mène vers des ressources permettant d'apprendre les bases du html (sans ces bases, rien n'est possible).
- Crée un dossier
mon-rallyesur ton bureau. - Ouvre VS Code (ou n'importe quel éditeur de code) et crée un fichier
index.htmldans ce dossier. - Entre les balises
<body>et</body>, tape<h1>Ferrari</h1>(ou la marque de ton choix) et sauvegarde. - Ouvre ce fichier dans un 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 balises constituent 80% de ce qu'on trouve dans une page HTML, mais il en existe d'autres.
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 URL (Uniform Ressource Locator) : clic droit → copier l'adresse de l'image.
- Ajoute-la avec
<img src="URL" alt="Ferrari F40 rouge">(la balise ‘alt’ permet de donner un descriptif de l'image). - Ajoute un lien (URL) vers la page 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>. Ne pas confondre head (qui contient des informations non affichées dans le corps de page) et body (qui contient les éléments affichés).
- Tout en haut, ajoute
<!DOCTYPE html>sur la première ligne. - Entoure tout avec
<html lang="fr"> ... </html>. - Ajoute un
<head>...</head>avant le contenu, encadre 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. Cette instruction évite les problèmes d'affichage des caractères avec accents, comme ceux de la langue française.
Relier un fichier CSS au HTML
Le HTML décrit le contenu et la structure, le CSS (Cascading Style Sheets = feuilles de style en cascade) est un langage de mise en forme.
Le code CSS peut être situé dans le <head>, mais HTML et CSS sont de préférence situés dans des fichiers séparés. On les relie avec une balise <link> dans le <head>. À partir de là, tout ce qu'on écrit dans le fichier CSS s'applique aux pages HTML qui lui sont liées.
- Crée un fichier
style.cssdans le même dossier que tonindex.html - Dans le
<head>, ajoute :<link rel="stylesheet" href="style.css"> - Dans le fichier
style.css, écrish1 { color: red; }et enregistre - Dans le navigateur, recharge la page HTML. Si ton titre est en rouge c'est que 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;puis recharge la pag HTML et observe. - Ajoute
padding: 16px;(la marge intérieure s'agrandit) - Ajoute
margin: 20px 0;(la marge 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.
Couleurs et fonds
color pour le texte, background-color pour le fond. Noms (red), codes hex (#CE1126) ou RGB.
- Sur l'Internet, cherche le code couleur de ta marque de voiture préféré (avec un peu de chance, tu trouveras le code hex précis).
- 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 (lien ci‑dessus).
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; puis 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
:rootpour que tout se mette à jour d'un seul 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.
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;et 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, et 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 de caractères). - 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 l'instruction
absolute. Par rapport au parent :relative - Essaie
position: fixed;Ça reste en place quand tu scrolles.
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 et 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 et de publier les pages que tu veux partager. Pas de contrainte ; seulement ce que tu veux montrer, comme tu veux le montrer.
Ci-dessous, pour réviser et/ou approfondir, un cours complet en vidéo pour apprendre à faire un site internet en html + css.
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 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.
- 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
Applique le CSS en couches successives : variables d'abord, puis couleurs, polices, espacements, mise en page, responsive. Travaille de façon bien organisée.
- Toutes tes couleurs et polices en variables dans
:root - 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 disposera d'une adresse URL, elle sera consultable sur le Web.
- 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.