COURS COMPLET
HTML5 & CSS3
Du débutant absolu à la création de vrais sites web
Niveau Débutant → Intermédiaire
Contenu 7 chapitres · 4 sites web
complets
Chapitre 1 – Introduction au Web et à HTML5
1.1 Comment fonctionne un site web ?
Quand vous tapez une adresse web dans votre navigateur, voici ce qui se passe exactement :
LE FONCTIONNEMENT D'UNE PAGE WEB
1. Vous tapez une URL dans le navigateur (ex: [Link])
2. Votre ordinateur envoie une demande (requête HTTP) à un serveur distant
3. Le serveur répond en envoyant des fichiers : HTML, CSS, JavaScript
4. Votre navigateur lit ces fichiers et affiche la page à l'écran
• HTML → La STRUCTURE : les titres, paragraphes, images, liens...
• CSS → Le STYLE : couleurs, polices, espacements, animations...
• JS → Le COMPORTEMENT : menus déroulants, formulaires dynamiques...
1.2 Les outils nécessaires
Pour créer des sites web, vous avez besoin de deux choses seulement :
• Un éditeur de texte : Visual Studio Code (gratuit, recommandé), Notepad++, Sublime
Text.
• Un navigateur web : Google Chrome ou Firefox pour tester vos pages.
💡 À retenir
Installez Visual Studio Code gratuitement sur [Link]
Installez l'extension 'Live Server' pour voir vos modifications en temps réel
Créez un dossier 'MonSite' sur votre bureau pour tous vos fichiers
1.3 Votre première page HTML – Hello World !
Créez un fichier '[Link]' et écrivez ce code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page web</title>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p>Ma toute première page web.</p>
</body>
</html>
EXPLICATION LIGNE PAR LIGNE
<!DOCTYPE html> → Déclare que ce fichier est en HTML5 (TOUJOURS mettre en 1ère
ligne)
<html lang="fr"> → Commence la page, indique que la langue est le français
<head> → Section invisible : infos pour le navigateur
<meta charset> → Permet d'utiliser les accents (é, è, à, ç...)
<meta viewport> → Rend la page adaptée aux téléphones mobiles
<title> → Le texte qui apparaît dans l'onglet du navigateur
<body> → Tout ce qui est visible sur la page va ici
<h1> → Titre principal (il ne doit y en avoir qu'un par page)
<p> → Un paragraphe de texte
💡 EXERCICE 1 – Structure de base HTML
1. Créez un fichier '[Link]' avec la structure HTML de base complète.
1. Changez le titre (balise title) pour afficher votre nom dans l'onglet.
1. Ajoutez un titre h1 avec votre nom, et un paragraphe qui décrit qui vous êtes.
1. Ouvrez le fichier dans votre navigateur et vérifiez que tout s'affiche correctement.
Chapitre 2 – Les Balises HTML5 Essentielles
2.1 Structure générale d'une balise HTML
ANATOMIE D'UNE BALISE HTML
Une balise s'écrit toujours avec < et >.
Balise paire (ouvrante + fermante) :
<p>Mon texte ici</p>
<h1>Mon titre</h1>
<div>Contenu...</div>
Balise auto-fermante (pas de contenu) :
<img src="[Link]" alt="Description">
<br> ← saut de ligne
<hr> ← ligne horizontale
<input type="text">
Les attributs s'ajoutent DANS la balise ouvrante :
<a href="[Link]" target="_blank">Lien</a>
└── attribut ──┘ └── valeur ───┘
2.2 Les balises de titre
HTML propose 6 niveaux de titres, h1 étant le plus important, h6 le moins important.
<h1>Titre principal (un seul par page !)</h1>
<h2>Titre de section</h2>
<h3>Sous-titre</h3>
<h4>Sous-sous-titre</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6 (le moins important)</h6>
💡 À retenir
Utilisez les titres dans l'ordre : ne passez pas de h1 à h3 sans h2 entre les deux.
Les moteurs de recherche (Google) lisent les balises h1 à h6 pour comprendre votre page.
Il ne doit y avoir qu'UN SEUL h1 par page.
2.3 Les balises de texte
Balise Rôle Exemple de rendu
<p> Paragraphe Bloc de texte avec espacement
Balise Rôle Exemple de rendu
<strong> Texte en gras (important) Texte en gras
<em> Texte en italique (emphase) Texte en italique
<br> Saut de ligne Passe à la ligne
<hr> Ligne de séparation ─────────────
<span> Partie de texte inline Permet de styler un mot
<mark> Texte surligné Texte surligné en jaune
<small> Texte plus petit Petit texte
<del> Texte barré ~~Texte supprimé~~
<p>Je suis un <strong>développeur web</strong> passionné.</p>
<p>J'aime le <em>design</em> et le <mark>code propre</mark>.</p>
<p>Première ligne.<br>Deuxième ligne après un saut.</p>
<hr>
<p><small>© 2025 Mon Site</small></p>
2.4 Les liens hypertextes – balise <a>
La balise <a> (anchor = ancre) crée des liens vers d'autres pages ou sites.
<!-- Lien vers une autre page du même site -->
<a href="[Link]">Me contacter</a>
<!-- Lien vers un site externe (ouvre dans un nouvel onglet) -->
<a href="[Link] target="_blank">Aller sur Google</a>
<!-- Lien vers une ancre (section de la même page) -->
<a href="#section-contact">Aller à la section contact</a>
<!-- Lien email -->
<a href="[Link] un email</a>
<!-- Lien téléphone -->
<a href="[Link]
2.5 Les images – balise <img>
<!-- Image simple -->
<img src="[Link]" alt="Description de la photo">
<!-- Image avec taille définie -->
<img src="[Link]" alt="Logo du site" width="200" height="100">
<!-- Image qui est aussi un lien -->
<a href="[Link]">
<img src="[Link]" alt="Retour à l'accueil">
</a>
💡 À retenir
L'attribut alt est OBLIGATOIRE : il décrit l'image pour les aveugles et les moteurs de
recherche.
Préférez les formats WebP ou PNG pour les logos, JPEG pour les photos.
N'utilisez pas width et height en HTML, faites-le en CSS à la place.
2.6 Les listes
<!-- Liste NON ordonnée (puces) -->
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<!-- Liste ORDONNÉE (numérotée) -->
<ol>
<li>Installer VS Code</li>
<li>Créer un fichier .html</li>
<li>Ouvrir dans le navigateur</li>
</ol>
<!-- Liste de définitions -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
2.7 Les tableaux HTML
<table>
<thead>
<tr>
<th>Nom</th>
<th>Prénom</th>
<th>Âge</th>
</tr>
</thead>
<tbody>
<tr>
<td>MBEKI</td>
<td>Jean</td>
<td>20</td>
</tr>
<tr>
<td>ONDAMBA</td>
<td>Marie</td>
<td>19</td>
</tr>
</tbody>
</table>
VOCABULAIRE DES TABLEAUX
<table> → Le tableau entier
<thead> → En-tête du tableau (ligne de titres des colonnes)
<tbody> → Corps du tableau (les données)
<tfoot> → Pied du tableau (totaux, résumés)
<tr> → Table Row = une ligne
<th> → Table Header = cellule d'en-tête (gras par défaut)
<td> → Table Data = cellule de données normale
Attributs utiles :
colspan="2" → La cellule occupe 2 colonnes
rowspan="3" → La cellule occupe 3 lignes
2.8 Les formulaires HTML
Les formulaires permettent à l'utilisateur de saisir des données (inscription, contact,
commande...).
<form action="[Link]" method="POST">
<!-- Champ texte simple -->
<label for="nom">Votre nom :</label>
<input type="text" id="nom" name="nom" placeholder="Jean MBEKI" required>
<!-- Email -->
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<!-- Mot de passe -->
<input type="password" name="mdp" placeholder="Mot de passe">
<!-- Case à cocher -->
<input type="checkbox" id="cgu" name="cgu">
<label for="cgu">J'accepte les conditions</label>
<!-- Bouton radio -->
<input type="radio" name="genre" value="M" id="m"> <label
for="m">Homme</label>
<input type="radio" name="genre" value="F" id="f"> <label
for="f">Femme</label>
<!-- Liste déroulante -->
<select name="filiere">
<option value="info">Informatique</option>
<option value="math">Mathématiques</option>
</select>
<!-- Zone de texte large -->
<textarea name="message" rows="5" placeholder="Votre
message..."></textarea>
<!-- Bouton de soumission -->
<button type="submit">Envoyer</button>
</form>
2.9 Les balises sémantiques HTML5
HTML5 a introduit des balises qui donnent du SENS à la structure de la page. Elles remplacent
les <div> sans signification.
Balise Signification Utilisation
<header> En-tête de page ou section Logo, navigation principale
<nav> Zone de navigation Menus, liens de navigation
<main> Contenu principal Le contenu central unique
<section> Section thématique Groupe de contenu lié
<article> Article autonome Article de blog, actualité
<aside> Contenu secondaire Sidebar, publicités, liens
<footer> Pied de page Copyright, liens légaux
<figure> Élément illustratif Image avec légende
<figcaption> Légende d'une figure Texte sous une image
<body>
<header>
<nav>
<a href="#">Accueil</a>
<a href="#">À propos</a>
</nav>
</header>
<main>
<section id="hero">
<h1>Bienvenue sur mon site</h1>
</section>
<article>
<h2>Mon premier article</h2>
<p>Contenu de l'article...</p>
</article>
</main>
<aside>
<h3>Articles récents</h3>
</aside>
<footer>
<p>© 2025 Mon Site</p>
</footer>
</body>
💡 EXERCICE 2 – Balises HTML5 – Page complète
2. Créez une page '[Link]' avec : un header contenant une nav, un main avec
votre biographie en sections (section présentation, section formation, section hobbies),
et un footer.
2. Ajoutez une liste non ordonnée de vos 5 langages de programmation favoris.
2. Créez un tableau HTML avec 3 colonnes : Matière, Note, Appréciation. Mettez 5 lignes
de données.
2. Créez un formulaire de contact avec nom, email, sujet (select), message (textarea) et
bouton Envoyer.
1. Utilisez uniquement des balises sémantiques HTML5 (pas de <div> sauf si nécessaire).
Chapitre 3 – Introduction au CSS3
3.1 Qu'est-ce que le CSS ?
CSS (Cascading Style Sheets = Feuilles de Style en Cascade) permet de définir l'apparence
visuelle d'une page HTML. Sans CSS, toutes les pages web seraient du texte noir sur fond blanc.
3.2 Les 3 façons d'écrire du CSS
Méthode 1 – CSS inline (dans la balise) ❌Déconseillé
<!-- A EVITER car difficile à maintenir -->
<p style="color: red; font-size: 18px;">Texte rouge</p>
Méthode 2 – CSS interne (dans <style>) 💡 Pour les tests
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
Méthode 3 – CSS externe (fichier séparé) ✅Recommandé
<!-- Dans le fichier HTML (dans <head>) -->
<link rel="stylesheet" href="[Link]">
/* Dans le fichier [Link] */
p {
color: #333333;
font-size: 16px;
}
💡 À retenir
TOUJOURS utiliser un fichier CSS externe en production. Un seul fichier [Link] peut styliser
TOUTES vos pages HTML.
Les commentaires CSS s'écrivent entre /* et */
3.3 Syntaxe CSS – La règle CSS
ANATOMIE D'UNE RÈGLE CSS
sélecteur {
propriété: valeur;
propriété: valeur;
}
Exemple concret :
h1 {
color: #2563eb; /* couleur du texte */
font-size: 48px; /* taille de la police */
font-weight: bold; /* gras */
text-align: center; /* centré */
}
• h1 → le sélecteur : QUOI on cible
• color → la propriété : QUOI on modifie
• #2563eb → la valeur : COMMENT on le modifie
3.4 Les sélecteurs CSS – Comment cibler les éléments
Sélecteur Ce qu'il cible Exemple
p Tous les <p> de la page p { color: black; }
.ma-classe Tous les éléments avec .titre { font-size: 24px; }
class="ma-classe"
#mon-id L'élément unique avec #hero { min-height: 100vh; }
id="mon-id"
* TOUS les éléments * { box-sizing: border-box; }
nav a Les <a> à l'intérieur d'un <nav> nav a { color: white; }
p, h1 Les <p> ET les <h1> p, h1 { font-family: Arial; }
h2:hover Le <h2> quand la souris est h2:hover { color: blue; }
dessus
input:focus L'input quand il est sélectionné input:focus { border: 2px solid
blue; }
p:first-child Le premier <p> enfant p:first-child { font-weight: bold; }
3.5 Le modèle de boîte – Box Model
Chaque élément HTML est une boîte rectangulaire composée de 4 couches. C'est le concept le
plus important du CSS !
LE BOX MODEL – De l'intérieur vers l'extérieur
┌────────────────────────────────────────────────────┐
│ MARGIN (marge externe) │
│ ┌────────────────────────────────────────────┐ │
│ │ BORDER (bordure) │ │
│ │ ┌────────────────────────────────────┐ │ │
│ │ │ PADDING (marge interne) │ │ │
│ │ │ ┌────────────────────────────┐ │ │ │
│ │ │ │ CONTENT (contenu) │ │ │ │
│ │ │ │ width × height │ │ │ │
│ │ │ └────────────────────────────┘ │ │ │
│ │ └────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────┘
margin : espace ENTRE les éléments (espace externe)
border : la bordure de l'élément
padding : espace ENTRE le contenu et la bordure (espace interne)
content : le contenu réel (texte, image...)
.ma-carte {
width: 300px; /* largeur du contenu */
height: 200px; /* hauteur du contenu */
padding: 20px; /* espace interne de 20px tout autour */
border: 2px solid blue; /* bordure bleue de 2px */
margin: 30px; /* espace externe de 30px */
/* Astuce : include padding et border dans la taille totale */
box-sizing: border-box;
}
💡 À retenir
Ajoutez TOUJOURS * { box-sizing: border-box; } en premier dans votre CSS.
Sans cela : width=300px + padding=20px × 2 = 340px au total. Avec : ça reste 300px.
3.6 Couleurs en CSS
Notation Exemple Description
Nom anglais color: red 147 noms : red, blue, green, black,
white...
Hexadécimal color: #FF0000 # + 6 chiffres hex (0-9, A-F). Le plus
utilisé.
RGB color: rgb(255,0,0) Rouge, Vert, Bleu de 0 à 255
RGBA color: rgba(255,0,0,0.5) Comme RGB + transparence
(0=invisible, 1=opaque)
HSL color: hsl(0,100%,50%) Teinte, Saturation, Luminosité
/* Toutes ces couleurs donnent le même rouge */
color: red;
color: #FF0000;
color: #ff0000; /* majuscules ou minuscules, c'est pareil */
color: #f00; /* raccourci possible si les 2 chiffres sont identiques */
color: rgb(255, 0, 0);
/* Fond semi-transparent */
background-color: rgba(0, 0, 0, 0.5); /* noir à 50% de transparence */
3.7 Typographie – Les polices de caractères
body {
/* Définir une police (avec fallbacks) */
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 16px; /* taille (aussi : 1rem, 1em, %) */
font-weight: 400; /* épaisseur : 100 à 900, bold = 700 */
font-style: italic; /* normal, italic, oblique */
line-height: 1.6; /* interligne (1.5 à 1.8 recommandé) */
letter-spacing: 1px; /* espace entre les lettres */
text-align: center; /* left, center, right, justify */
text-transform: uppercase; /* uppercase, lowercase, capitalize */
text-decoration: none; /* none, underline, line-through */
color: #1e293b; /* couleur du texte */
}
/* Utiliser une police Google Fonts */
/* Dans le HTML (dans <head>) : */
/* <link href="[Link]
*/
body { font-family: 'Roboto', sans-serif; }
3.8 Arrière-plans et bordures
.element {
/* Couleur de fond */
background-color: #f8fafc;
/* Image de fond */
background-image: url('[Link]');
background-size: cover; /* couvre tout l'élément */
background-position: center; /* centrée */
background-repeat: no-repeat; /* pas de répétition */
/* Dégradé */
background: linear-gradient(135deg, #2563eb, #7c3aed);
/* ou radial */
background: radial-gradient(circle, #2563eb 0%, #0f172a 100%);
/* Bordures */
border: 2px solid #2563eb; /* taille style couleur */
border-top: 4px dashed red; /* seulement en haut */
border-radius: 12px; /* coins arrondis */
border-radius: 50%; /* cercle parfait */
/* Ombre portée */
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
/* x y flou couleur */
}
💡 EXERCICE 3 – CSS – Styliser une page
3. Créez un fichier '[Link]' et liez-le à votre page [Link].
3. Stylisez le body : police Arial, taille 16px, couleur #333, fond #f8fafc.
3. Stylisez le h1 : couleur bleue, centré, taille 2.5rem.
3. Créez une classe .carte avec fond blanc, padding 20px, border-radius 12px, box-
shadow.
2. Ajoutez un effet :hover sur tous les liens : couleur qui change, text-decoration none.
1. Stylisez le tableau avec des couleurs alternées sur les lignes (nth-child).
Chapitre 4 – Mise en Page avec Flexbox et Grid
4.1 Display – Comment les éléments s'affichent
LES TYPES D'AFFICHAGE
display: block; → Élément bloc : prend toute la largeur, commence sur une nouvelle ligne
Exemples : <div>, <p>, <h1> à <h6>, <section>
display: inline; → Élément en ligne : s'insère dans le texte, taille selon son contenu
Exemples : <span>, <a>, <strong>, <em>
display: inline-block; → Mélange des deux : s'insère en ligne mais accepte width/height
display: none; → Cache l'élément (il n'occupe plus d'espace)
display: flex; → Active Flexbox (mise en page en 1 dimension)
display: grid; → Active Grid (mise en page en 2 dimensions)
4.2 Flexbox – Disposition en une dimension
Flexbox organise les éléments en ligne OU en colonne. C'est parfait pour les navigations, les
cartes et les centrage.
.conteneur {
display: flex;
/* Direction */
flex-direction: row; /* →→→ horizontal (défaut) */
flex-direction: column; /* ↓↓↓ vertical */
flex-direction: row-reverse; /* ←←← horizontal inversé */
/* Alignement horizontal (axe principal) */
justify-content: flex-start; /* éléments au début (défaut) */
justify-content: center; /* éléments au centre */
justify-content: flex-end; /* éléments à la fin */
justify-content: space-between; /* espace entre les éléments */
justify-content: space-around; /* espace autour des éléments */
/* Alignement vertical (axe secondaire) */
align-items: stretch; /* étire (défaut) */
align-items: center; /* centre verticalement */
align-items: flex-start; /* en haut */
align-items: flex-end; /* en bas */
/* Espace entre les éléments */
gap: 20px;
/* Retour à la ligne automatique */
flex-wrap: wrap;
}
/* Sur un enfant Flex */
.enfant {
flex: 1; /* prend tout l'espace disponible */
}
CAS PRATIQUES FLEXBOX
/* Centrer un élément horizontalement ET verticalement */
.conteneur {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Navigation horizontale */
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Cartes qui s'adaptent à la taille d'écran */
.cartes-conteneur {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.carte {
flex: 1;
min-width: 280px; /* taille minimale avant retour à la ligne */
}
4.3 CSS Grid – Disposition en deux dimensions
Grid organise les éléments dans un tableau (lignes ET colonnes). Idéal pour les layouts de page
complets.
.grille {
display: grid;
/* Définir les colonnes */
grid-template-columns: 200px 1fr 200px; /* 3 colonnes : fixe, flexible,
fixe */
grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* responsive
! */
/* Définir les lignes */
grid-template-rows: auto 1fr auto;
/* Espaces */
gap: 20px;
column-gap: 30px;
row-gap: 15px;
}
/* Faire occuper plusieurs colonnes à un élément */
.element {
grid-column: 1 / 3; /* de la colonne 1 à la 3 */
grid-column: span 2; /* occupe 2 colonnes */
grid-row: span 2; /* occupe 2 lignes */
}
💡 À retenir
repeat(auto-fit, minmax(250px, 1fr)) est LA propriété magique : elle crée autant de colonnes
que possible, chacune faisant au minimum 250px, et elles s'adaptent automatiquement à
l'écran !
Pour les navigations et les centrage simples → Flexbox
Pour les layouts de page entiers → Grid
4.4 Position – Positionnement des éléments
.element {
position: static; /* défaut : suit le flux normal */
position: relative; /* décalé PAR RAPPORT À SA POSITION NORMALE */
position: absolute; /* décalé par rapport au parent 'positioned' */
position: fixed; /* fixé par rapport à la fenêtre (reste visible au
scroll) */
position: sticky; /* reste visible quand on scrolle jusqu'à lui */
/* Utilisés avec position non-static */
top: 20px;
right: 0;
bottom: 10px;
left: 50%;
z-index: 100; /* ordre d'empilement : plus élevé = par dessus */
}
/* Exemple : navigation fixe en haut */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
💡 EXERCICE 4 – Mise en page Flexbox & Grid
4. Créez une navigation horizontale avec logo à gauche et liens à droite en utilisant
Flexbox.
4. Créez une section 'cartes' avec 3 cartes côte à côte qui passent en colonne sur mobile
(flex-wrap).
4. Créez un layout de page avec Grid : header, sidebar gauche, contenu principal, footer.
4. Centrez parfaitement (horizontalement et verticalement) un titre dans une section de
hauteur 100vh.
3. Positionnez un badge 'Nouveau !' en position absolute sur le coin supérieur gauche
d'une carte.
Chapitre 5 – Design Responsive (Adaptation aux
Mobiles)
Plus de 60% des visites de sites web se font sur smartphone. Un site responsive s'adapte
automatiquement à toutes les tailles d'écran.
5.1 La balise viewport – INDISPENSABLE
<!-- OBLIGATOIRE dans <head> pour les mobiles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sans cette balise, votre page apparaîtra en version miniature sur mobile !
5.2 Les Media Queries – Conditions CSS
Les media queries permettent d'appliquer du CSS SEULEMENT si l'écran a une certaine taille.
/* CSS de base : pour TOUS les écrans */
.conteneur {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colonnes sur desktop */
gap: 2rem;
}
/* Tablette : écrans jusqu'à 768px */
@media (max-width: 768px) {
.conteneur {
grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
}
}
/* Mobile : écrans jusqu'à 480px */
@media (max-width: 480px) {
.conteneur {
grid-template-columns: 1fr; /* 1 colonne sur mobile */
}
.nav-links {
display: none; /* cache le menu de navigation sur mobile */
}
}
/* Orientation paysage */
@media (orientation: landscape) {
/* ... */
}
POINTS DE RUPTURE CLASSIQUES (BREAKPOINTS)
< 480px → Petits mobiles (iPhone SE...)
480px–768px → Grands mobiles et tablettes portrait
768px–1024px → Tablettes paysage, petits laptops
1024px–1280px → Ordinateurs portables
> 1280px → Grands écrans et moniteurs
APPROCHE MOBILE FIRST (recommandée) :
→ Écrivez d'abord le CSS pour mobile
→ Utilisez min-width pour agrandir sur grand écran
@media (min-width: 768px) { /* tablette et + */ }
@media (min-width: 1024px) { /* desktop et + */ }
5.3 Unités relatives – S'adapter automatiquement
Unité Référence Utilisation
% Parent direct width: 80% → 80% de la largeur du parent
rem Taille de base du html font-size: 1.5rem = 1.5 × 16px = 24px
em Taille de la police parente padding: 1em → 1× la taille du texte
vw Largeur de la fenêtre width: 100vw = 100% de la largeur écran
vh Hauteur de la fenêtre height: 100vh = 100% de la hauteur écran
clamp() Min, préféré, max font-size: clamp(1rem, 3vw, 2rem)
/* Taille de police responsive avec clamp */
h1 {
font-size: clamp(1.8rem, 5vw, 4rem);
/* minimum: 1.8rem, préféré: 5% largeur écran, maximum: 4rem */
/* La taille s'adapte automatiquement sans media query ! */
}
/* Conteneur centré et responsive */
.container {
max-width: 1200px; /* ne dépasse pas 1200px */
width: 100%; /* prend toute la largeur disponible */
margin: 0 auto; /* centré horizontalement */
padding: 0 1.5rem; /* espace sur les côtés */
}
💡 EXERCICE 5 – Design Responsive
5. Rendez votre page [Link] responsive : 3 colonnes sur desktop, 1 sur mobile.
5. Cachez le menu de navigation sur les écrans < 768px.
5. Utilisez clamp() pour rendre la taille du h1 adaptive.
5. Testez avec les outils développeur de Chrome (F12 → icône mobile).
4. Ajoutez un menu hamburger (simplement visible sur mobile, caché sur desktop).
Chapitre 6 – Transitions, Animations et Effets
6.1 Les transitions CSS
Les transitions permettent d'animer doucement les changements de propriétés CSS (hover,
focus...).
.bouton {
background: #2563eb;
color: white;
padding: 0.8rem 2rem;
border-radius: 8px;
border: none;
cursor: pointer;
/* Transition : propriété, durée, timing */
transition: background 0.3s ease, transform 0.2s ease;
/* ou simplement : */
transition: all 0.3s ease;
}
.bouton:hover {
background: #1d4ed8; /* → transition douce vers cette couleur */
transform: translateY(-3px); /* → monte légèrement */
}
.bouton:active {
transform: translateY(0); /* → revient à sa place au clic */
}
LES FONCTIONS DE TIMING
ease → Commence lentement, accélère, termine lentement (défaut)
linear → Vitesse constante
ease-in → Commence lentement, termine rapidement
ease-out → Commence rapidement, termine lentement
ease-in-out → Lent au début et à la fin
cubic-bezier(x1,y1,x2,y2) → Courbe personnalisée
6.2 Les animations @keyframes
Les animations @keyframes permettent de créer des animations complexes et automatiques
(sans action de l'utilisateur).
/* Définir l'animation */
@keyframes apparaitre {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Appliquer l'animation */
.hero-titre {
animation-name: apparaitre;
animation-duration: 0.8s;
animation-timing-function: ease;
animation-delay: 0.2s; /* attendre 0.2s avant de démarrer */
animation-iteration-count: 1; /* 1 fois (ou infinite) */
animation-fill-mode: both; /* garde l'état final */
/* Raccourci : */
animation: apparaitre 0.8s ease 0.2s both;
}
/* Animation avec plusieurs étapes */
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.badge { animation: pulse 2s ease infinite; } /* répète en boucle */
6.3 Transform – Transformer les éléments
.element {
/* Translation (déplacement) */
transform: translateX(50px); /* déplace de 50px vers la droite */
transform: translateY(-20px); /* déplace de 20px vers le haut */
transform: translate(50px, -20px); /* X et Y en même temps */
/* Rotation */
transform: rotate(45deg); /* tourne de 45 degrés */
transform: rotateX(180deg); /* retournement 3D */
/* Mise à l'échelle */
transform: scale(1.2); /* agrandit de 20% */
transform: scale(0.8); /* réduit de 20% */
transform: scaleX(1.5); /* agrandit seulement en largeur */
/* Déformation */
transform: skew(10deg, 5deg);
/* Combiner plusieurs transformations */
transform: translateY(-5px) scale(1.02) rotate(2deg);
}
💡 À retenir
Utilisez toujours transform et opacity pour les animations fluides (60fps).
Évitez d'animer width, height, margin ou padding car c'est moins performant.
opacity + transform = combo parfait pour les animations légères et rapides.
💡 EXERCICE 6 – Animations et effets
6. Ajoutez une transition sur tous les liens de votre site : couleur change en 0.3s.
6. Créez une animation d'apparition pour le titre h1 de votre page (fade-in + translateY).
6. Ajoutez un effet hover sur les cartes : légère élévation avec transform et box-shadow.
6. Créez une animation 'pulse' infinie sur un badge ou bouton d'appel à l'action.
5. Faites une barre de progression animée qui se remplit de gauche à droite.
Chapitre 7 – Bonnes Pratiques et Récapitulatif
7.1 Structure de fichiers d'un projet web
mon-projet/
│
├── [Link] ← Page principale (TOUJOURS nommer ainsi)
├── [Link] ← Page 'À propos'
├── [Link] ← Page contact
│
├── css/
│ ├── [Link] ← Styles principaux
│ └── [Link] ← Media queries (optionnel)
│
├── images/
│ ├── [Link]
│ └── [Link]
│
└── js/
└── [Link] ← JavaScript (pour plus tard)
7.2 Les 10 règles d'or du développeur web
1. Toujours avoir DOCTYPE et charset – <!DOCTYPE html> et <meta charset='UTF-8'>
en premier.
2. Une seule balise h1 par page – C'est le titre principal, il ne peut y en avoir qu'un.
3. Alt sur toutes les images – <img alt='description'> pour l'accessibilité et le SEO.
4. CSS dans un fichier séparé – Jamais de style="" dans le HTML sauf cas exceptionnel.
5. * { box-sizing: border-box } – Toujours mettre ça en premier dans votre CSS.
6. Mobile First – Concevez d'abord pour mobile, agrandissez pour desktop.
7. Noms de fichiers en minuscules – Pas d'espaces, pas d'accents : '[Link]' pas
'Mon [Link]'.
8. Commentez votre code – /* Section navigation */ pour retrouver facilement.
9. Validez votre code – Utilisez [Link] pour vérifier votre HTML.
10. Testez sur plusieurs navigateurs – Chrome, Firefox, et testez en mode mobile (F12).
7.3 Propriétés CSS les plus utilisées – Aide-mémoire
Propriété Valeurs courantes Usage
color #hex, rgb(), nom Couleur du texte
background color, url(), gradient Fond d'un élément
font-family Arial, 'Google Font'... Police de caractère
font-size px, rem, em, % Taille du texte
font-weight 100–900, bold, normal Épaisseur du texte
margin px, rem, auto Espace externe
Propriété Valeurs courantes Usage
padding px, rem, % Espace interne
width / height px, %, vw, vh, auto Dimensions
display flex, grid, block, none Type d'affichage
justify-content center, space-between... Alignement Flex/Grid
align-items center, flex-start... Alignement axe transversal
border 2px solid #333 Bordure
border-radius 8px, 50% Coins arrondis
box-shadow 0 4px 20px rgba(...) Ombre portée
transition all 0.3s ease Animation de changement
transform scale, translate, rotate Transformation géométrique
opacity 0à1 Transparence (0=invisible)
cursor pointer, default, text Curseur souris
overflow hidden, scroll, auto Gestion du dépassement
z-index nombre entier Ordre d'empilement
7.4 Les 4 sites web créés dans ce cours
À la fin de ce cours, vous avez 4 fichiers HTML/CSS complets prêts à l'emploi :
Fichier Type de site Ce que vous apprenez
site1_portfolio.html Portfolio personnel Navigation fixe, hero, grille
compétences, formulaire contact
site2_restaurant.html Restaurant africain Design élégant, menu de plats,
réservation, typographie premium
site3_blog.html Blog / Magazine tech Layout avec sidebar, grille d'articles,
widget newsletter
site4_ecommerce.html Boutique e-commerce Header complexe, filtres, grille produits,
panier
COMMENT UTILISER LES SITES
1. Ouvrez chaque fichier .html dans VS Code et dans votre navigateur
2. Lisez le code CSS en entier : identifiez les sections (navigation, hero, cartes...)
3. Modifiez les couleurs (cherchez les variables :root { --couleur: ... })
4. Changez les textes pour les adapter à votre projet personnel
5. Copiez des sections de code dans vos propres projets
6. Essayez de recréer la même page de zéro sans regarder le code !
7.5 Checklist avant de rendre un exercice ou un devoir
• Le fichier est nommé correctement ([Link], [Link]...)
• <!DOCTYPE html> est bien présent en première ligne
• <meta charset='UTF-8'> est dans le <head>
• <meta name='viewport'...> est dans le <head> pour le responsive
• Le CSS est dans un fichier séparé (pas de style= dans le HTML)
• * { box-sizing: border-box; } est bien présent dans le CSS
• Il n'y a qu'un seul <h1> par page
• Toutes les images ont un attribut alt
• La page s'affiche correctement sur mobile (testé avec F12)
• Le code est indenté proprement (onglet = 2 ou 4 espaces)
• Aucune erreur dans la console du navigateur (F12 → Console)
• La page a été validée sur [Link]
Félicitations ! Vous maîtrisez maintenant les fondamentaux de HTML5 et CSS3.
La pratique régulière est votre meilleur allié. Codez chaque jour !