\documentclass[12pt,a4paper]{article}
% ========== PACKAGES ==========
\usepackage[french]{babel}
\usepackage[T1]{fontenc}
\usepackage[utf8]{inputenc}
\usepackage{geometry}
\geometry{margin=2.5cm}
\usepackage{enumitem}
\usepackage{graphicx}
\usepackage{xcolor}
\usepackage{fancyhdr}
\usepackage{titlesec}
\usepackage{listings}
\usepackage{hyperref}
\usepackage{fontawesome5}
\usepackage{multicol}
\usepackage{array}
\usepackage{longtable}
\usepackage{booktabs}
\usepackage{mdframed}
% ========== COULEURS ==========
\definecolor{codebg}{RGB}{248, 248, 248}
\definecolor{commentcolor}{RGB}{106, 153, 85}
\definecolor{stringcolor}{RGB}{206, 145, 120}
\definecolor{keywordcolor}{RGB}{86, 156, 214}
\definecolor{htmlcolor}{RGB}{255, 107, 107}
\definecolor{csscolor}{RGB}{86, 156, 214}
\definecolor{titleblue}{RGB}{44, 62, 80}
\definecolor{accentblue}{RGB}{52, 152, 219}
% ========== STYLE DES LISTINGS ==========
\lstdefinestyle{htmlstyle}{
backgroundcolor=\color{codebg},
basicstyle=\ttfamily\small,
commentstyle=\color{commentcolor},
keywordstyle=\color{keywordcolor}\bfseries,
stringstyle=\color{stringcolor},
showstringspaces=false,
tabsize=2,
breaklines=true,
frame=single,
frameround=tttt,
rulecolor=\color{gray!30},
language=HTML,
morekeywords={html,head,body,title,h1,h2,h3,h4,h5,h6,p,div,span,a,img,ul,ol,li,table,tr,td,form,input,textarea,button,label,header,nav,main,section,article,aside,footer,meta,link,style,script},
emph={href,src,alt,class,id,type,name,value,placeholder,required,action,method,rel,charset,viewport,itemscope,itemtype,itemprop,role,aria-label},
emphstyle=\color{accentblue}
}
\lstdefinestyle{cssstyle}{
backgroundcolor=\color{codebg},
basicstyle=\ttfamily\small,
commentstyle=\color{commentcolor},
keywordstyle=\color{keywordcolor}\bfseries,
stringstyle=\color{stringcolor},
showstringspaces=false,
tabsize=2,
breaklines=true,
frame=single,
frameround=tttt,
rulecolor=\color{gray!30},
language=CSS,
morekeywords={color,background,font-size,font-weight,text-align,padding,margin,border,width,height,display,flex,grid,justify-content,align-items,flex-direction,flex-wrap,gap,transition,transform,animation,box-shadow,border-radius,box-sizing,position,top,left,right,bottom,z-index,opacity,text-decoration,list-style,resize,cursor,outline,overflow,min-width,max-width,min-height,max-height,line-height,letter-spacing,font-family}
}
\lstdefinestyle{shellstyle}{
backgroundcolor=\color{codebg},
basicstyle=\ttfamily\small,
showstringspaces=false,
tabsize=2,
breaklines=true,
frame=single,
frameround=tttt,
rulecolor=\color{gray!30},
language=bash
}
% ========== EN-TÊTES ==========
\pagestyle{fancy}
\fancyhead[L]{\textcolor{titleblue}{\textbf{Cours HTML \& CSS}}}
\fancyhead[R]{\textcolor{titleblue}{\thepage}}
\fancyfoot[C]{}
% ========== TITRE ==========
\title{\Huge \textcolor{titleblue}{HTML \& CSS}\\
\Large \textcolor{accentblue}{Les Fondamentaux et la Maîtrise de la Mise en Page}}
\author{Formation OpenClassrooms}
\date{\today}
\begin{document}
\maketitle
\thispagestyle{empty}
\newpage
\tableofcontents
\newpage
% ========================================================================
% ==================== COURS N°1 ========================================
% ========================================================================
\part{Les Fondamentaux du HTML et CSS}
\section*{Objectif du cours}
\addcontentsline{toc}{section}{Objectif du cours}
À la fin de ce cours, vous serez capable de :
\begin{itemize}
\item Comprendre la différence entre HTML et CSS.
\item Structurer une page web avec des balises HTML sémantiques.
\item Appliquer du style à vos pages avec CSS.
\end{itemize}
\newpage
% ========== ÉTAPE 1 ==========
\section{Distinguer HTML et CSS et identifier leurs usages respectifs}
\subsection{Qu'est-ce que le HTML ?}
\textbf{HTML} (HyperText Markup Language) est le \textbf{langage de structure} d'une page web. Il sert à définir le contenu et sa hiérarchie.
\begin{mdframed}[backgroundcolor=codebg, linecolor=accentblue, linewidth=1pt]
\textbf{Analogies :}
\begin{itemize}
\item HTML = Les fondations, les murs, l'ossature d'une maison.
\item HTML = Le squelette d'un corps humain.
\end{itemize}
\end{mdframed}
\textbf{Ce que fait le HTML :}
\begin{itemize}
\item Il crée des titres, des paragraphes, des listes, des liens, des images.
\item Il dit : \og Ceci est un titre \fg, \og Ceci est un paragraphe \fg, \og Ceci est un lien \fg.
\end{itemize}
\subsection{Qu'est-ce que le CSS ?}
\textbf{CSS} (Cascading Style Sheets) est le \textbf{langage de présentation} d'une page web. Il sert à définir l'apparence visuelle du contenu.
\begin{mdframed}[backgroundcolor=codebg, linecolor=accentblue, linewidth=1pt]
\textbf{Analogies :}
\begin{itemize}
\item CSS = La peinture, la déco, l'aménagement intérieur de la maison.
\item CSS = La peau, les vêtements, la coiffure du corps humain.
\end{itemize}
\end{mdframed}
\textbf{Ce que fait le CSS :}
\begin{itemize}
\item Il change les couleurs, les polices, les tailles, les marges, les positions.
\item Il dit : \og Ce titre doit être en bleu \fg, \og Ce paragraphe doit être en gras \fg, \og Cette image doit être centrée \fg.
\end{itemize}
\subsection{Résumé de la distinction}
\begin{table}[h]
\centering
\begin{tabular}{|p{4cm}|p{5cm}|p{5cm}|}
\hline
\textbf{Critère} & \textbf{HTML} & \textbf{CSS} \\
\hline
Rôle & Structure / Contenu & Style / Apparence \\
Question & \og Qu'est-ce que c'est ? \fg & \og À quoi ça ressemble ? \fg \\
Fichier & \texttt{.html} & \texttt{.css} \\
\hline
\end{tabular}
\end{table}
\newpage
% ========== ÉTAPE 2 ==========
\section{Reconnaître les éléments HTML courants et leurs attributs}
\subsection{La structure de base d'une page HTML}
Tout document HTML commence par une structure minimale :
\begin{lstlisting}[style=htmlstyle]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon premier site</title>
</head>
<body>
<!-- Le contenu visible de la page va ici -->
</body>
</html>
\end{lstlisting}
\begin{itemize}
\item \texttt{<!DOCTYPE html>} : Indique au navigateur qu'il s'agit de HTML5.
\item \texttt{<html>} : La racine du document.
\item \texttt{<head>} : Contient des informations sur la page (titre, encodage) – \emph{non visible dans la page}.
\item \texttt{<body>} : Contient tout ce qui est visible par l'utilisateur.
\end{itemize}
\subsection{Les éléments HTML courants}
\begin{longtable}{|p{3cm}|p{6cm}|p{5cm}|}
\hline
\textbf{Balise} & \textbf{Utilité} & \textbf{Exemple} \\
\hline
\endhead
\hline
\endfoot
\texttt{<h1>} à \texttt{<h6>} & Titres (du plus important au moins important) & \texttt{<h1>Bienvenue</h1>} \\
\hline
\texttt{<p>} & Paragraphe de texte & \texttt{<p>Ceci est un texte.</p>} \\
\hline
\texttt{<a>} & Lien hypertexte & \texttt{<a href="https://exemple.com">Cliquez ici</a>} \\
\hline
\texttt{<img>} & Image & \texttt{<img src="photo.jpg" alt="Description">} \\
\hline
\texttt{<ul>} & Liste non ordonnée (à puces) & \texttt{<ul><li>Item 1</li></ul>} \\
\hline
\texttt{<ol>} & Liste ordonnée (numérotée) & \texttt{<ol><li>Item 1</li></ol>} \\
\hline
\texttt{<div>} & Conteneur générique (bloc) & \texttt{<div>...</div>} \\
\hline
\texttt{<span>} & Conteneur générique (en ligne) & \texttt{<span>...</span>} \\
\hline
\end{longtable}
\subsection{Les attributs HTML}
Les attributs donnent des \textbf{informations supplémentaires} aux balises. Ils s'écrivent toujours sous la forme \texttt{nom="valeur"}.
\begin{longtable}{|p{3cm}|p{3.5cm}|p{8cm}|}
\hline
\textbf{Attribut} & \textbf{Utilisé sur} & \textbf{Utilité} \\
\hline
\endhead
\hline
\endfoot
\texttt{href} & \texttt{<a>} & Définit la destination du lien \\
\hline
\texttt{src} & \texttt{<img>} & Définit la source (le chemin) de l'image \\
\hline
\texttt{alt} & \texttt{<img>} & Texte alternatif (pour les malvoyants ou si l'image ne charge pas) \\
\hline
\texttt{class} & Toutes & Permet de cibler un groupe d'éléments en CSS \\
\hline
\texttt{id} & Toutes & Permet de cibler un élément \textbf{unique} en CSS \\
\hline
\end{longtable}
\textbf{Exemple complet :}
\begin{lstlisting}[style=htmlstyle]
<a href="https://openclassrooms.com" target="_blank">Visitez OpenClassrooms</a>
<img src="logo.png" alt="Logo de l'entreprise" width="100">
\end{lstlisting}
\newpage
% ========== ÉTAPE 3 ==========
\section{Expliquer comment les balises sémantiques structurent une page web}
\subsection{Qu'est-ce que la sémantique ?}
Avant HTML5, on utilisait des \texttt{<div>} pour tout, ce qui ne donnait aucune indication sur le sens du contenu. Les \textbf{balises sémantiques} donnent du \textbf{sens} à la structure.
\subsection{Les principales balises sémantiques HTML5}
\begin{longtable}{|p{3cm}|p{4cm}|p{7.5cm}|}
\hline
\textbf{Balise} & \textbf{Signification} & \textbf{Utilisation} \\
\hline
\endhead
\hline
\endfoot
\texttt{<header>} & En-tête & Contient le logo, le titre principal, la navigation. \\
\hline
\texttt{<nav>} & Navigation & Contient le menu de navigation principal. \\
\hline
\texttt{<main>} & Contenu principal & Encapsule le contenu central de la page (unique). \\
\hline
\texttt{<section>} & Section & Regroupe un thème (ex : \og Nos produits \fg). \\
\hline
\texttt{<article>} & Article & Contenu indépendant (ex : un article de blog). \\
\hline
\texttt{<aside>} & À côté & Contenu secondaire (ex : barre latérale, publicités). \\
\hline
\texttt{<footer>} & Pied de page & Mentions légales, contact, copyright. \\
\hline
\end{longtable}
\subsection{Structure type d'une page web sémantique}
\begin{lstlisting}[style=htmlstyle]
<body>
<header>
<h1>Mon Site</h1>
<nav>
<a href="#">Accueil</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section>
<h2>Nos articles</h2>
<article>
<h3>Article 1</h3>
<p>Contenu de l'article...</p>
</article>
<article>
<h3>Article 2</h3>
<p>Contenu de l'article...</p>
</article>
</section>
<aside>
<h3>Publicité</h3>
<p>Espace publicitaire</p>
</aside>
</main>
<footer>
<p>© 2026 Mon Site - Tous droits reserves.</p>
</footer>
</body>
\end{lstlisting}
\textbf{Pourquoi c'est important ?}
\begin{itemize}
\item \textbf{Accessibilité} : Les lecteurs d'écran pour malvoyants comprennent mieux la page.
\item \textbf{SEO} : Google comprend mieux le contenu et le référence mieux.
\item \textbf{Maintenance} : Le code est plus lisible pour les autres développeurs.
\end{itemize}
\newpage
% ========== ÉTAPE 4 ==========
\section{Distinguer les éléments en bloc des éléments en ligne}
\subsection{Les éléments en bloc (\emph{block elements})}
\textbf{Caractéristiques :}
\begin{itemize}
\item Ils prennent \textbf{toute la largeur disponible}.
\item Ils provoquent un \textbf{retour à la ligne} avant et après eux.
\item On peut leur donner une largeur (\texttt{width}) et une hauteur (\texttt{height}).
\end{itemize}
\textbf{Exemples :} \texttt{<div>}, \texttt{<p>}, \texttt{<h1>} à \texttt{<h6>}, \texttt{<ul>}, \texttt{<ol>}, \texttt{<header>}, \texttt{<section>}, \texttt{<footer>}, \texttt{<article>}.
\textbf{Démonstration visuelle :}
\begin{lstlisting}[style=htmlstyle]
<p style="background-color: lightblue;">Bloc 1</p>
<p style="background-color: lightgreen;">Bloc 2</p>
\end{lstlisting}
→ Les deux paragraphes seront l'un en dessous de l'autre.
\subsection{Les éléments en ligne (\emph{inline elements})}
\textbf{Caractéristiques :}
\begin{itemize}
\item Ils prennent \textbf{uniquement la largeur de leur contenu}.
\item Ils ne provoquent \textbf{pas} de retour à la ligne ; ils s'enchaînent sur la même ligne.
\item On \textbf{ne peut pas} leur donner de largeur ou de hauteur (en CSS pur, sauf exception avec \texttt{display: inline-block}).
\end{itemize}
\textbf{Exemples :} \texttt{<a>}, \texttt{<span>}, \texttt{<img>}, \texttt{<strong>}, \texttt{<em>}.
\textbf{Démonstration visuelle :}
\begin{lstlisting}[style=htmlstyle]
<span style="background-color: lightcoral;">En ligne 1</span>
<span style="background-color: lightgoldenrodyellow;">En ligne 2</span>
\end{lstlisting}
→ Les deux éléments seront côte à côte sur la même ligne.
\subsection{Résumé comparatif}
\begin{table}[h]
\centering
\begin{tabular}{|p{6cm}|p{7.5cm}|}
\hline
\textbf{Élément bloc} & \textbf{Élément en ligne} \\
\hline
Occupe toute la largeur & Occupe seulement sa largeur \\
Retour à la ligne & Pas de retour à la ligne \\
Peut avoir \texttt{width} / \texttt{height} & Ne peut pas avoir \texttt{width} / \texttt{height} \\
Ex: \texttt{<div>}, \texttt{<p>}, \texttt{<h1>} & Ex: \texttt{<span>}, \texttt{<a>}, \texttt{<img>} \\
\hline
\end{tabular}
\end{table}
\newpage
% ========== ÉTAPE 5 ==========
\section{Utiliser des balises et attributs pour identifier les informations clés}
Cette étape consiste à \textbf{enrichir} le contenu pour qu'il soit plus accessible et mieux structuré.
\subsection{Utiliser les attributs \texttt{class} et \texttt{id}}
\begin{itemize}
\item \texttt{class} : Sert à identifier un \textbf{groupe} d'éléments. On peut appliquer la même classe à plusieurs éléments.
\item \texttt{id} : Sert à identifier un élément \textbf{unique} sur la page. Un \texttt{id} ne doit être utilisé qu'une seule fois.
\end{itemize}
\textbf{Exemple :}
\begin{lstlisting}[style=htmlstyle]
<h1 id="titre-principal">Bienvenue</h1>
<p class="intro">Ceci est une introduction.</p>
<p class="intro">Ceci est une autre introduction.</p>
<div class="article">...</div>
\end{lstlisting}
\subsection{Les attributs ARIA (pour l'accessibilité)}
Pour les personnes utilisant des lecteurs d'écran, on peut ajouter des attributs ARIA :
\begin{lstlisting}[style=htmlstyle]
<nav role="navigation" aria-label="Menu principal">
<!-- contenu -->
</nav>
<button aria-label="Fermer la fenetre">X</button>
\end{lstlisting}
\subsection{Structurer avec les micro-données (Schema.org)}
C'est un langage que les moteurs de recherche comprennent pour afficher des résultats enrichis (étoiles, prix, etc.).
\begin{lstlisting}[style=htmlstyle]
<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Casque audio sans fil</h2>
<p itemprop="description">Un casque de qualite superieure.</p>
<span itemprop="price" content="99.99">99.99 €</span>
</div>
\end{lstlisting}
\newpage
% ========== ÉTAPE 6 ==========
\section{Identifier et utiliser la syntaxe CSS correcte}
\subsection{La syntaxe de base du CSS}
Une règle CSS se compose de 3 parties :
\begin{lstlisting}[style=cssstyle]
selecteur {
propriete: valeur;
}
\end{lstlisting}
\begin{itemize}
\item \textbf{Sélecteur} : L'élément HTML que vous voulez styliser.
\item \textbf{Propriété} : L'aspect que vous voulez modifier (couleur, taille, etc.).
\item \textbf{Valeur} : La valeur que vous attribuez à la propriété.
\end{itemize}
\textbf{Exemple :}
\begin{lstlisting}[style=cssstyle]
p {
color: blue;
font-size: 16px;
}
\end{lstlisting}
→ Tous les paragraphes seront écrits en bleu avec une taille de 16 pixels.
\subsection{Les commentaires en CSS}
\begin{lstlisting}[style=cssstyle]
/* Ceci est un commentaire CSS */
\end{lstlisting}
\subsection{Les différents sélecteurs CSS}
\begin{table}[h]
\centering
\begin{tabular}{|p{3cm}|p{4cm}|p{6.5cm}|}
\hline
\textbf{Sélecteur} & \textbf{Syntaxe} & \textbf{Exemple} \\
\hline
Élément (balise) & \texttt{balise} & \texttt{p \{ color: red; \}} \\
Classe & \texttt{.nomClasse} & \texttt{.intro \{ font-weight: bold; \}} \\
ID & \texttt{\#nomId} & \texttt{\#titre-principal \{ font-size: 40px; \}} \\
Universel & \texttt{*} & \texttt{* \{ margin: 0; \}} \\
Descendant (espace) & \texttt{parent enfant} & \texttt{article p \{ color: gray; \}} \\
\hline
\end{tabular}
\end{table}
\subsection{Où écrire le CSS ?}
Il y a 3 façons d'appliquer du CSS :
\begin{enumerate}
\item \textbf{Feuille de style externe} (Recommandée) : Fichier \texttt{.css} séparé.
\begin{lstlisting}[style=htmlstyle]
<link rel="stylesheet" href="style.css">
\end{lstlisting}
\item \textbf{Style interne} (dans le \texttt{<head>}) :
\begin{lstlisting}[style=htmlstyle]
<style>
p { color: blue; }
</style>
\end{lstlisting}
\item \textbf{Style en ligne} (directement sur l'élément) - À éviter sauf exceptions :
\begin{lstlisting}[style=htmlstyle]
<p style="color: blue;">Texte</p>
\end{lstlisting}
\end{enumerate}
\newpage
% ========== ÉTAPE 7 ==========
\section{Appliquer le CSS aux éléments HTML}
\subsection{Premier exemple complet : Styliser une carte de visite}
\textbf{HTML :}
\begin{lstlisting}[style=htmlstyle]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma carte de visite</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="carte">
<h1 id="nom">Jean Dupont</h1>
<p class="titre">Developpeur Web</p>
<p class="description">Passionne par le HTML, le CSS et le JavaScript.</p>
<a class="bouton" href="mailto:jean@exemple.com">Me contacter</a>
</div>
</body>
</html>
\end{lstlisting}
\textbf{CSS (fichier \texttt{style.css}) :}
\begin{lstlisting}[style=cssstyle]
/* Appliquer une police et un fond a toute la page */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Hauteur = 100% de l'ecran */
margin: 0;
}
/* Styliser la carte (conteneur en bloc) */
.carte {
background-color: white;
border-radius: 10px; /* Coins arrondis */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Ombre legere */
padding: 30px;
text-align: center;
width: 300px;
}
/* Styliser l'ID #nom */
#nom {
color: #2c3e50;
font-size: 24px;
margin-bottom: 5px;
}
/* Styliser la classe .titre */
.titre {
color: #3498db;
font-size: 18px;
font-weight: bold;
margin-top: 0;
}
/* Styliser la classe .description */
.description {
color: #7f8c8d;
font-size: 14px;
line-height: 1.5;
}
/* Styliser le lien (element en ligne) */
.bouton {
display: inline-block;
background-color: #3498db;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
margin-top: 15px;
transition: background-color 0.3s;
}
/* Effet au survol de la souris (pseudo-classe) */
.bouton:hover {
background-color: #2980b9;
}
\end{lstlisting}
\newpage
\subsection{Propriétés CSS essentielles à connaître}
\begin{longtable}{|p{4cm}|p{10.5cm}|}
\hline
\textbf{Propriété} & \textbf{Utilisation} \\
\hline
\endhead
\hline
\endfoot
\texttt{color} & Couleur du texte \\
\texttt{background-color} & Couleur de fond \\
\texttt{font-size} & Taille de la police \\
\texttt{font-weight} & Gras (\texttt{bold}, \texttt{normal}) \\
\texttt{text-align} & Alignement (\texttt{left}, \texttt{center}, \texttt{right}, \texttt{justify}) \\
\texttt{padding} & Espace intérieur (entre le contenu et la bordure) \\
\texttt{margin} & Espace extérieur (entre l'élément et les autres) \\
\texttt{border} & Bordure \\
\texttt{width} / \texttt{height} & Largeur / Hauteur \\
\texttt{display} & Mode d'affichage (\texttt{block}, \texttt{inline}, \texttt{flex}, \texttt{grid}) \\
\hline
\end{longtable}
\newpage
% ========================================================================
% ==================== COURS N°2 ========================================
% ========================================================================
\part{Maîtrisez la mise en page avec CSS et créez des interactions}
\section*{Objectif du cours}
\addcontentsline{toc}{section}{Objectif du cours}
À la fin de ce cours, vous serez capable de :
\begin{itemize}
\item Comprendre et utiliser le modèle de boîte CSS.
\item Créer des mises en page complexes avec Flexbox et Grid.
\item Styliser les liens, les listes et les formulaires.
\item Comprendre les bases du responsive design.
\item Ajouter des animations et transitions.
\end{itemize}
\newpage
% ========== ÉTAPE 1 (Cours 2) ==========
\section{Comprendre le modèle de boîte (\emph{Box Model})}
\subsection{Qu'est-ce que le Box Model ?}
Tout élément HTML est une \textbf{boîte rectangulaire}. Le Box Model définit comment l'espace est calculé autour de chaque élément.
Il se compose de 4 couches (de l'intérieur vers l'extérieur) :
\begin{mdframed}[backgroundcolor=codebg, linecolor=accentblue, linewidth=1pt]
\begin{verbatim}
┌─────────────────────────────────┐
│ MARGIN (externe) │
│ ┌───────────────────────────┐ │
│ │ BORDER (bordure) │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ PADDING (interne) │ │ │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ │ (contenu) │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ └─────────────────────┘ │ │
│ └───────────────────────────┘ │
└─────────────────────────────────┘
\end{verbatim}
\end{mdframed}
\subsection{Les propriétés du Box Model}
\begin{table}[h]
\centering
\begin{tabular}{|p{3.5cm}|p{4cm}|p{7cm}|}
\hline
\textbf{Propriété} & \textbf{Description} & \textbf{Exemple} \\
\hline
\texttt{content} & Le contenu (texte, image, etc.) & Largeur/hauteur définie par \texttt{width}/\texttt{height} \\
\texttt{padding} & Espace \textbf{intérieur} entre le contenu et la bordure & \texttt{padding: 20px;} \\
\texttt{border} & La bordure autour du padding & \texttt{border: 2px solid black;} \\
\texttt{margin} & Espace \textbf{extérieur} entre la boîte et les autres éléments & \texttt{margin: 10px;} \\
\hline
\end{tabular}
\end{table}
\subsection{La propriété \texttt{box-sizing}}
Par défaut (\texttt{box-sizing: content-box}), la largeur totale = \texttt{width} + \texttt{padding} + \texttt{border}.
Avec \texttt{box-sizing: border-box} (recommandé), la largeur totale = \texttt{width} (le padding et la bordure sont inclus).
\begin{lstlisting}[style=cssstyle]
/* Regle universelle a mettre en debut de fichier */
* {
box-sizing: border-box;
}
\end{lstlisting}
\newpage
% ========== ÉTAPE 2 (Cours 2) ==========
\section{Utiliser Flexbox pour des mises en page flexibles}
\subsection{Qu'est-ce que Flexbox ?}
Flexbox est un module CSS qui permet de répartir l'espace et d'aligner les éléments dans un conteneur, \textbf{sur un seul axe} (horizontal ou vertical).
\subsection{Les bases de Flexbox}
Pour utiliser Flexbox, on déclare un \textbf{conteneur flexible} :
\begin{lstlisting}[style=cssstyle]
.conteneur {
display: flex;
}
\end{lstlisting}
\subsection{Les propriétés du conteneur Flex}
\begin{longtable}{|p{3.5cm}|p{5cm}|p{6cm}|}
\hline
\textbf{Propriété} & \textbf{Valeurs courantes} & \textbf{Effet} \\
\hline
\endhead
\hline
\endfoot
\texttt{flex-direction} & \texttt{row} (défaut), \texttt{column}, \texttt{row-reverse}, \texttt{column-reverse} & Définit l'axe principal \\
\hline
\texttt{justify-content} & \texttt{flex-start}, \texttt{flex-end}, \texttt{center}, \texttt{space-between}, \texttt{space-around}, \texttt{space-evenly} & Aligne sur l'axe principal \\
\hline
\texttt{align-items} & \texttt{stretch} (défaut), \texttt{flex-start}, \texttt{flex-end}, \texttt{center}, \texttt{baseline} & Aligne sur l'axe secondaire \\
\hline
\texttt{flex-wrap} & \texttt{nowrap} (défaut), \texttt{wrap}, \texttt{wrap-reverse} & Gère le retour à la ligne \\
\hline
\end{longtable}
\subsection{Les propriétés des éléments Flex}
\begin{table}[h]
\centering
\begin{tabular}{|p{3.5cm}|p{4cm}|p{7cm}|}
\hline
\textbf{Propriété} & \textbf{Valeurs courantes} & \textbf{Effet} \\
\hline
\texttt{flex-grow} & Nombre (0 par défaut) & Capacité à grandir \\
\texttt{flex-shrink} & Nombre (1 par défaut) & Capacité à rétrécir \\
\texttt{flex-basis} & Taille (auto par défaut) & Taille de base \\
\texttt{flex} & \texttt{1} (équivaut à \texttt{1 1 0}) & Raccourci pour les 3 propriétés \\
\hline
\end{tabular}
\end{table}
\newpage
\subsection{Exemple complet : Une barre de navigation avec Flexbox}
\textbf{HTML :}
\begin{lstlisting}[style=htmlstyle]
<nav class="navbar">
<div class="logo">MonSite</div>
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="auth">
<a href="#">Connexion</a>
</div>
</nav>
\end{lstlisting}
\textbf{CSS :}
\begin{lstlisting}[style=cssstyle]
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #2c3e50;
padding: 15px 30px;
color: white;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.menu {
display: flex;
list-style: none;
gap: 20px;
}
.menu a {
color: white;
text-decoration: none;
}
.menu a:hover {
color: #3498db;
}
.auth a {
color: #3498db;
text-decoration: none;
border: 1px solid #3498db;
padding: 8px 15px;
border-radius: 5px;
}
.auth a:hover {
background-color: #3498db;
color: white;
}
\end{lstlisting}
\newpage
% ========== ÉTAPE 3 (Cours 2) ==========
\section{Utiliser CSS Grid pour des mises en page en 2 dimensions}
\subsection{Qu'est-ce que CSS Grid ?}
CSS Grid est un système de mise en page qui permet de créer des grilles en \textbf{2 dimensions} (lignes ET colonnes). C'est parfait pour les mises en page complexes.
\subsection{Les bases de CSS Grid}
\begin{lstlisting}[style=cssstyle]
.grille {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 colonnes de 200px */
grid-template-rows: 100px 100px; /* 2 lignes de 100px */
gap: 10px; /* Espace entre les cellules */
}
\end{lstlisting}
\subsection{Les unités spécifiques à Grid}
\begin{table}[h]
\centering
\begin{tabular}{|p{3.5cm}|p{4.5cm}|p{6.5cm}|}
\hline
\textbf{Unité} & \textbf{Description} & \textbf{Exemple} \\
\hline
\texttt{fr} & Fraction de l'espace restant & \texttt{grid-template-columns: 1fr 2fr;} \\
\texttt{repeat()} & Répète un motif & \texttt{grid-template-columns: repeat(3, 1fr);} \\
\texttt{minmax()} & Taille minimale et maximale & \texttt{grid-template-columns: minmax(100px, 1fr);} \\
\hline
\end{tabular}
\end{table}
\newpage
\subsection{Exemple complet : Une galerie d'images avec Grid}
\textbf{HTML :}
\begin{lstlisting}[style=htmlstyle]
<div class="galerie">
<div class="item item1">Image 1</div>
<div class="item item2">Image 2</div>
<div class="item item3">Image 3</div>
<div class="item item4">Image 4</div>
<div class="item item5">Image 5</div>
<div class="item item6">Image 6</div>
</div>
\end{lstlisting}
\textbf{CSS :}
\begin{lstlisting}[style=cssstyle]
.galerie {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 15px;
padding: 20px;
max-width: 900px;
margin: 0 auto;
}
.item {
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 20px;
transition: transform 0.3s;
}
.item:hover {
transform: scale(1.02);
}
/* Faire une grande image */
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
background-color: #e74c3c;
}
.item4 {
grid-column: 2 / 4;
background-color: #2ecc71;
}
\end{lstlisting}
\subsection{Flexbox vs Grid : Quand utiliser quoi ?}
\begin{table}[h]
\centering
\begin{tabular}{|p{6cm}|p{7.5cm}|}
\hline
\textbf{Flexbox (1D)} & \textbf{Grid (2D)} \\
\hline
Pour des alignements sur un axe (ligne ou colonne) & Pour des mises en page complètes \\
Idéal pour la navigation, les cartes, les boutons & Idéal pour la structure globale, les galeries, les dashboards \\
Distribue l'espace le long d'un axe & Définit des zones précises \\
\hline
\end{tabular}
\end{table}
\newpage
% ========== ÉTAPE 4 (Cours 2) ==========
\section{Styliser les liens, les listes et les formulaires}
\subsection{Styliser les liens (\texttt{<a>})}
Les liens ont 4 états (pseudo-classes) :
\begin{lstlisting}[style=cssstyle]
/* Etat normal */
a {
color: #3498db;
text-decoration: none;
}
/* Lien deja visite */
a:visited {
color: #8e44ad;
}
/* Au survol de la souris */
a:hover {
color: #e74c3c;
text-decoration: underline;
}
/* Au moment du clic */
a:active {
color: #2c3e50;
}
\end{lstlisting}
\begin{mdframed}[backgroundcolor=codebg, linecolor=accentblue, linewidth=1pt]
\textbf{Astuce :} L'ordre est important : \texttt{:link} → \texttt{:visited} → \texttt{:hover} → \texttt{:active} (LOVE HATE).
\end{mdframed}
\subsection{Styliser les listes (\texttt{<ul>}, \texttt{<ol>})}
\begin{lstlisting}[style=cssstyle]
/* Enlever les puces */
ul {
list-style: none;
padding: 0;
}
/* Changer le style des puces */
ul {
list-style-type: square; /* ou circle, disc, decimal, etc. */
}
/* Liste horizontale (menu) */
ul.horizontal {
display: flex;
gap: 20px;
}
ul.horizontal li {
background-color: #ecf0f1;
padding: 10px 20px;
border-radius: 5px;
}
\end{lstlisting}
\newpage
\subsection{Styliser les formulaires}
\textbf{HTML d'un formulaire :}
\begin{lstlisting}[style=htmlstyle]
<form class="contact-form">
<div class="form-group">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" placeholder="Votre nom" required>
</div>
<div class="form-group">
<label for="email">Email :</label>
<input type="email" id="email" name="email" placeholder="votre@email.com" required>
</div>
<div class="form-group">
<label for="message">Message :</label>
<textarea id="message" name="message" rows="5" placeholder="Votre message..."></textarea>
</div>
<button type="submit" class="btn-submit">Envoyer</button>
</form>
\end{lstlisting}
\textbf{CSS associé :}
\begin{lstlisting}[style=cssstyle]
.contact-form {
max-width: 500px;
margin: 0 auto;
padding: 30px;
background-color: #f8f9fa;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
color: #2c3e50;
}
input, textarea {
width: 100%;
padding: 10px 15px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}
input:focus, textarea:focus {
border-color: #3498db;
outline: none;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.3);
}
textarea {
resize: vertical;
}
.btn-submit {
background-color: #3498db;
color: white;
padding: 12px 30px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-submit:hover {
background-color: #2980b9;
}
.btn-submit:active {
transform: scale(0.98);
}
\end{lstlisting}
\newpage
% ========== ÉTAPE 5 (Cours 2) ==========
\section{Comprendre les bases du responsive design}
\subsection{Qu'est-ce que le responsive design ?}
C'est la capacité d'une page web à s'adapter à toutes les tailles d'écran (ordinateur, tablette, smartphone).
\subsection{La balise viewport (indispensable)}
\begin{lstlisting}[style=htmlstyle]
<meta name="viewport" content="width=device-width, initial-scale=1.0">
\end{lstlisting}
→ Cette balise dans le \texttt{<head>} dit au navigateur d'adapter la largeur à celle de l'écran.
\subsection{Les unités relatives}
\begin{table}[h]
\centering
\begin{tabular}{|p{3cm}|p{4cm}|p{7.5cm}|}
\hline
\textbf{Unité} & \textbf{Description} & \textbf{Exemple} \\
\hline
\texttt{\%} & Pourcentage du parent & \texttt{width: 50\%;} \\
\texttt{em} & Relatif à la taille de police du parent & \texttt{font-size: 2em;} \\
\texttt{rem} & Relatif à la taille de police de la racine (\texttt{<html>}) & \texttt{font-size: 1.5rem;} \\
\texttt{vw} & 1\% de la largeur de la fenêtre & \texttt{width: 50vw;} \\
\texttt{vh} & 1\% de la hauteur de la fenêtre & \texttt{height: 100vh;} \\
\hline
\end{tabular}
\end{table}
\subsection{Les media queries}
Les media queries permettent d'appliquer du CSS \textbf{uniquement lorsque certaines conditions sont remplies} (comme la taille de l'écran).
\begin{lstlisting}[style=cssstyle]
/* Styles par defaut (mobile first) */
body {
font-size: 16px;
}
/* Quand l'ecran fait au moins 768px (tablette) */
@media (min-width: 768px) {
body {
font-size: 18px;
}
.galerie {
grid-template-columns: repeat(2, 1fr);
}
}
/* Quand l'ecran fait au moins 1024px (ordinateur) */
@media (min-width: 1024px) {
body {
font-size: 20px;
}
.galerie {
grid-template-columns: repeat(4, 1fr);
}
}
\end{lstlisting}
\newpage
\subsection{Exemple pratique : Menu responsive}
\textbf{HTML :}
\begin{lstlisting}[style=htmlstyle]
<nav class="menu-responsive">
<div class="logo">MonSite</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="menu-hamburger">☰</label>
<ul class="menu-links">
<li><a href="#">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
\end{lstlisting}
\textbf{CSS :}
\begin{lstlisting}[style=cssstyle]
.menu-responsive {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #2c3e50;
color: white;
}
.menu-links {
display: flex;
list-style: none;
gap: 20px;
}
.menu-links a {
color: white;
text-decoration: none;
}
/* Cacher le hamburger par defaut */
#menu-toggle, .menu-hamburger {
display: none;
}
/* Version mobile */
@media (max-width: 768px) {
.menu-hamburger {
display: block;
font-size: 30px;
cursor: pointer;
}
.menu-links {
display: none;
flex-direction: column;
position: absolute;
top: 70px;
left: 0;
width: 100%;
background-color: #2c3e50;
padding: 20px;
text-align: center;
}
/* Quand la checkbox est cochee, on affiche le menu */
#menu-toggle:checked + .menu-hamburger + .menu-links {
display: flex;
}
}
\end{lstlisting}
\newpage
% ========== ÉTAPE 6 (Cours 2) ==========
\section{Ajouter des animations et transitions}
\subsection{Les transitions (changements progressifs)}
Les transitions permettent de passer \textbf{en douceur} d'un état à un autre.
\begin{lstlisting}[style=cssstyle]
.bouton {
background-color: #3498db;
color: white;
padding: 10px 20px;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.bouton:hover {
background-color: #e74c3c;
transform: scale(1.1);
}
\end{lstlisting}
\textbf{Syntaxe :} \texttt{transition: propriete duree fonction delai;}
\subsection{Les animations (keyframes)}
Les animations permettent de créer des mouvements plus complexes avec des étapes.
\begin{lstlisting}[style=cssstyle]
/* Definir l'animation */
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
/* Appliquer l'animation */
.animation-bounce {
animation: bounce 1s infinite;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animation-fade {
animation: fadeIn 0.8s ease-out;
}
\end{lstlisting}
\newpage
\subsection{Exemple : Carte animée au survol}
\textbf{HTML :}
\begin{lstlisting}[style=htmlstyle]
<div class="carte-animee">
<img src="https://via.placeholder.com/300x200" alt="Image">
<h3>Titre de la carte</h3>
<p>Description de la carte.</p>
<a href="#" class="btn">En savoir plus</a>
</div>
\end{lstlisting}
\textbf{CSS :}
\begin{lstlisting}[style=cssstyle]
.carte-animee {
background-color: white;
border-radius: 10px;
padding: 20px;
max-width: 300px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.carte-animee:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
.carte-animee img {
width: 100%;
border-radius: 8px;
transition: transform 0.5s ease;
}
.carte-animee:hover img {
transform: scale(1.05);
}
.carte-animee .btn {
display: inline-block;
padding: 8px 20px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.2s;
}
.carte-animee .btn:hover {
background-color: #2980b9;
transform: scale(1.05);
}
\end{lstlisting}
\newpage
% ========== EXERCICE PRATIQUE COMPLET ==========
\section{Exercice pratique complet}
\subsection{Objectif}
Créer une \textbf{page de présentation de services} avec :
\begin{itemize}
\item Une navigation responsive (Flexbox + media query).
\item Une grille de services (Grid).
\item Des cartes animées au survol.
\item Un formulaire de contact stylisé.
\end{itemize}
\subsection{Structure souhaitée}
\begin{mdframed}[backgroundcolor=codebg, linecolor=accentblue, linewidth=1pt]
\begin{verbatim}
┌──────────────────────────────────────────┐
│ Logo Accueil Services Contact │ ← Navbar
├──────────────────────────────────────────┤
│ │
│ [Grand titre de bienvenue] │
│ [Sous-titre] │ ← Hero section
│ [Bouton CTA] │
│ │
├──────────────────────────────────────────┤
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │Service│ │Service│ │Service│ │ ← Grid 3 colonnes
│ │ 1 │ │ 2 │ │ 3 │ │
│ └──────┘ └──────┘ └──────┘ │
├──────────────────────────────────────────┤
│ Formulaire de contact │ ← Formulaire
│ [Nom] [Email] [Message] [Envoyer] │
├──────────────────────────────────────────┤
│ © 2026 - Mentions legales │ ← Footer
└──────────────────────────────────────────┘
\end{verbatim}
\end{mdframed}
\newpage
\subsection{Correction complète}
\textbf{HTML (\texttt{index.html}) :}
\begin{lstlisting}[style=htmlstyle]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes Services</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="logo">MonAgence</div>
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Hero Section -->
<header class="hero">
<h1>Des solutions sur mesure</h1>
<p>Nous vous accompagnons dans la creation de votre projet digital.</p>
<a href="#" class="btn-cta">Commencer</a>
</header>
<!-- Services -->
<section class="services">
<h2>Nos services</h2>
<div class="grille-services">
<div class="service-card">
<div class="icone">💻</div>
<h3>Developpement web</h3>
<p>Creation de sites vitrines et applications sur mesure.</p>
</div>
<div class="service-card">
<div class="icone">📱</div>
<h3>Mobile</h3>
<p>Applications mobiles natives et hybrides.</p>
</div>
<div class="service-card">
<div class="icone">🎨</div>
<h3>Design UX/UI</h3>
<p>Interfaces modernes et experiences utilisateur optimisees.</p>
</div>
</div>
</section>
<!-- Contact -->
<section class="contact">
<h2>Contactez-nous</h2>
<form>
<div class="form-group">
<label for="name">Nom</label>
<input type="text" id="name" placeholder="Votre nom" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="votre@email.com" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" rows="4" placeholder="Votre message..."></textarea>
</div>
<button type="submit" class="btn-submit">Envoyer</button>
</form>
</section>
<!-- Footer -->
<footer>
<p>© 2026 MonAgence - Tous droits reserves.</p>
</footer>
</body>
</html>
\end{lstlisting}
\newpage
\textbf{CSS (\texttt{style.css}) :}
\begin{lstlisting}[style=cssstyle]
/* Reset et base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333;
line-height: 1.6;
}
/* --- NAVBAR --- */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background-color: #2c3e50;
color: white;
}
.logo {
font-size: 24px;
font-weight: bold;
}
.menu {
display: flex;
list-style: none;
gap: 30px;
}
.menu a {
color: white;
text-decoration: none;
transition: color 0.3s;
}
.menu a:hover {
color: #3498db;
}
/* --- HERO --- */
.hero {
background: linear-gradient(135deg, #2c3e50, #3498db);
color: white;
text-align: center;
padding: 80px 20px;
}
.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero p {
font-size: 20px;
margin-bottom: 30px;
}
.btn-cta {
display: inline-block;
padding: 15px 40px;
background-color: white;
color: #2c3e50;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
}
.btn-cta:hover {
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
/* --- SERVICES --- */
.services {
padding: 60px 30px;
max-width: 1100px;
margin: 0 auto;
}
.services h2 {
text-align: center;
font-size: 36px;
margin-bottom: 40px;
color: #2c3e50;
}
.grille-services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.service-card {
background-color: #f8f9fa;
padding: 30px;
border-radius: 10px;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.icone {
font-size: 48px;
margin-bottom: 15px;
}
.service-card h3 {
margin-bottom: 10px;
color: #2c3e50;
}
/* --- CONTACT --- */
.contact {
background-color: #ecf0f1;
padding: 60px 30px;
}
.contact h2 {
text-align: center;
font-size: 36px;
margin-bottom: 40px;
color: #2c3e50;
}
.contact form {
max-width: 500px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px 15px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: #3498db;
outline: none;
}
.btn-submit {
width: 100%;
padding: 12px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.btn-submit:hover {
background-color: #2980b9;
}
.btn-submit:active {
transform: scale(0.98);
}
/* --- FOOTER --- */
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 20px;
}
/* --- RESPONSIVE --- */
@media (max-width: 768px) {
.navbar {
flex-direction: column;
gap: 15px;
}
.menu {
gap: 15px;
}
.hero h1 {
font-size: 32px;
}
.hero p {
font-size: 18px;
}
.grille-services {
grid-template-columns: 1fr;
}
}
\end{lstlisting}
\newpage
% ========== RÉSUMÉS ==========
\section*{Résumé final des acquis du Cours n°1}
\addcontentsline{toc}{section}{Résumé final des acquis du Cours n°1}
\begin{table}[h]
\centering
\begin{tabular}{|p{2cm}|p{12.5cm}|}
\hline
\textbf{Étape} & \textbf{Compétence acquise} \\
\hline
1 & Je sais que HTML = structure et CSS = style. \\
2 & Je connais les balises et attributs de base. \\
3 & Je sais structurer une page avec des balises sémantiques. \\
4 & Je fais la différence entre un bloc et un élément en ligne. \\
5 & Je peux utiliser \texttt{class} et \texttt{id} pour identifier du contenu. \\
6 & Je connais la syntaxe \texttt{selecteur \{ propriete: valeur; \}}. \\
7 & Je suis capable de styliser une page HTML avec du CSS. \\
\hline
\end{tabular}
\end{table}
\newpage
\section*{Résumé final des acquis du Cours n°2}
\addcontentsline{toc}{section}{Résumé final des acquis du Cours n°2}
\begin{table}[h]
\centering
\begin{tabular}{|p{2cm}|p{12.5cm}|}
\hline
\textbf{Étape} & \textbf{Compétence acquise} \\
\hline
1 & Je maîtrise le Box Model (content, padding, border, margin). \\
2 & Je sais créer des mises en page avec Flexbox. \\
3 & Je sais créer des grilles avec CSS Grid. \\
4 & Je sais styliser des liens, listes et formulaires. \\
5 & Je comprends les bases du responsive design. \\
6 & Je sais ajouter des transitions et animations. \\
\hline
\end{tabular}
\end{table}
\begin{mdframed}[backgroundcolor=codebg, linecolor=accentblue, linewidth=2pt]
\centering
\Large \textbf{Prochaine étape conseillée :}
\begin{itemize}
\item \textbf{JavaScript} pour rendre vos pages interactives (gérer les clics, les formulaires, le DOM).
\item \textbf{SASS/LESS} pour des CSS plus puissants et organisés.
\item \textbf{Bootstrap/Tailwind} pour des frameworks CSS rapides.
\end{itemize}
\end{mdframed}
\end{document}