Module 4Valider ta formation
Chapitre 14 sur 15
Projet final : mettre en forme ton CV
Mettre en forme le CV de la formation HTML en respectant une maquette responsive.
- ≈ 95 min
- 3 leçons
- 2 vidéos
- 2 exercices
Module 4Valider ta formation
Chapitre 14 sur 15
Mettre en forme le CV de la formation HTML en respectant une maquette responsive.
Objectifs
Avec ce chapitre, tu sauras…
Dans la formation HTML, tu as construit ton CV en ligne : un HTML valide, sémantique et accessible, mais sans aucun style. Ce projet le transforme en une page professionnelle, que tu pourras envoyer à un recruteur. Tu n'as pas le droit de modifier le HTML, sauf pour ajouter des classes et des <div> de regroupement si nécessaire : c'est la meilleure démonstration de la séparation entre structure et présentation.
Leçon 1
Tableau: Les composants à styliser
| Composant | Techniques | Chapitres |
|---|---|---|
| variables et base | :root, reset, Google Font | 4, 5, 13 |
| en-tête collant et menu | position: sticky, Flexbox, :hover, :focus-visible | 2, 8, 9 |
| « À propos » | Grid, border-radius: 50%, object-fit | 6, 10 |
| compétences | Grid à deux colonnes, étiquettes | 7, 10 |
| expériences | bordure gauche colorée, time en gris | 5, 6 |
| tableau de formation | tableau zébré | 2 |
| projets | Grid auto-fit, cartes Flexbox, transitions | 9, 10, 12 |
| formulaire | champs pleine largeur, focus visible, bouton | 2, 6, 12 |
| pied de page | Flexbox, liens | 9 |
| responsive, sombre, impression | media queries | 11, 13 |
prefers-reduced-motion.Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Leçon 2
Leçon 3
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
L'essentiel du chapitre
La méthode du projet
Le chapitre « Card Project » de Dave Gray (anglais) : la réalisation d'un composant carte complet. Regarde-le avant de styliser tes cartes de projets.
Comme dans la formation HTML, ne lis ce code qu'après avoir écrit ta propre version.
/* ==========================================================
1. VARIABLES
========================================================== */
:root {
--principale: hsl(222 61% 45%);
--principale-fonce: hsl(222 61% 28%);
--principale-clair: hsl(222 61% 95%);
--texte: hsl(222 30% 15%);
--texte-doux: hsl(222 12% 42%);
--fond: hsl(222 40% 98%);
--surface: #ffffff;
--bordure: hsl(222 25% 88%);
--rayon: 12px;
--espace: 1.5rem;
--ombre: 0 6px 20px hsl(222 61% 20% / 10%);
--police: "Poppins", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--principale: hsl(222 90% 72%);
--principale-fonce: hsl(222 90% 82%);
--principale-clair: hsl(222 35% 20%);
--texte: hsl(222 25% 90%);
--texte-doux: hsl(222 15% 70%);
--fond: hsl(222 40% 9%);
--surface: hsl(222 35% 14%);
--bordure: hsl(222 25% 25%);
}
}
/* ==========================================================
2. BASE
========================================================== */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure { margin: 0; }
body {
font-family: var(--police);
line-height: 1.6;
color: var(--texte);
background-color: var(--fond);
}
h1, h2, h3 { line-height: 1.2; }
h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: var(--espace);
color: var(--principale-fonce);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--principale); text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
outline: 3px solid #f5b400;
outline-offset: 2px;
}
input, textarea, button { font: inherit; }
ul { padding-left: 1.2rem; }/* ==========================================================
3. MISE EN PAGE
========================================================== */
main {
width: min(100% - 2rem, 1100px);
margin-inline: auto;
}
section {
padding-block: 3rem;
border-bottom: 1px solid var(--bordure);
scroll-margin-top: 90px;
}
header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
text-align: center;
background-color: var(--surface);
border-bottom: 1px solid var(--bordure);
}
header h1 { font-size: 1.5rem; }
header > p { color: var(--texte-doux); }
header nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem 1rem;
list-style: none;
padding: 0;
margin: 0;
}
header nav a {
text-decoration: none;
font-weight: 600;
color: var(--texte);
transition: color 0.2s ease-out;
}
header nav a:hover { color: var(--principale); }/* ==========================================================
4. COMPOSANTS
========================================================== */
/* À propos */
#a-propos {
display: grid;
gap: var(--espace);
justify-items: center;
text-align: center;
}
#a-propos h2 { grid-column: 1 / -1; }
#a-propos img {
width: 200px;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
border: 4px solid var(--principale-clair);
}
/* Compétences : chaque h3 + ul est regroupé dans une div */
#competences {
display: grid;
gap: var(--espace);
}
#competences h2 { grid-column: 1 / -1; }
/* Expériences */
#experiences article {
padding-left: 1rem;
border-left: 4px solid var(--principale);
margin-bottom: var(--espace);
}
#experiences time { color: var(--texte-doux); }
/* Tableau de formation */
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-weight: 700; margin-bottom: 0.5rem; }
th, td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--bordure); }
thead th { background-color: var(--principale); color: white; }
tbody tr:nth-child(even) { background-color: var(--principale-clair); }
/* Projets */
#projets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--espace);
}
#projets h2 { grid-column: 1 / -1; margin-bottom: 0; }
#projets article {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.25rem;
background-color: var(--surface);
border: 1px solid var(--bordure);
border-radius: var(--rayon);
box-shadow: var(--ombre);
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
#projets article:hover {
transform: translateY(-6px);
box-shadow: 0 14px 28px hsl(222 61% 20% / 18%);
}
#projets img { border-radius: calc(var(--rayon) - 4px); }
#projets figcaption { font-size: 0.9rem; color: var(--texte-doux); }
#projets article p:last-child { margin-top: auto; }
/* Formulaire */
form { display: grid; gap: 0.5rem; max-width: 600px; }
input, textarea {
width: 100%;
padding: 0.7rem;
color: var(--texte);
background-color: var(--surface);
border: 1px solid var(--bordure);
border-radius: 8px;
}
button {
justify-self: start;
margin-top: 0.5rem;
padding: 0.75em 1.75em;
border: none;
border-radius: 999px;
color: white;
background-color: var(--principale-fonce);
cursor: pointer;
transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}
button:hover { transform: translateY(-2px); background-color: var(--principale); }
/* Pied de page */
footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem 2rem;
padding: 2rem 1rem;
text-align: center;
}
footer ul { display: flex; gap: 1rem; list-style: none; padding: 0; margin: 0; }/* ==========================================================
5. RESPONSIVE (mobile first)
========================================================== */
@media (min-width: 768px) {
header {
flex-direction: row;
justify-content: space-between;
text-align: left;
padding-inline: 2rem;
}
#competences { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
#a-propos {
grid-template-columns: 220px 1fr;
align-items: center;
justify-items: start;
text-align: left;
}
}
/* ==========================================================
6. PRÉFÉRENCES ET IMPRESSION
========================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
header nav, form, .retour-haut { display: none; }
header { position: static; border: none; }
body { color: black; background: white; font-size: 11pt; }
#projets article { box-shadow: none; break-inside: avoid; }
footer a[href^="https"]::after { content: " (" attr(href) ")"; }
}Pour que la grille des compétences fonctionne, chaque titre <h3> et sa liste <ul> doivent être regroupés : <div><h3>Techniques</h3><ul>…</ul></div>. C'est le seul type de modification du HTML autorisé dans ce projet : une <div> sans sens, ajoutée uniquement pour la mise en page, exactement l'usage prévu au chapitre 7 de la formation HTML.
Avant de rendre ton projet
:rootbox-sizing: border-box sur tous les élémentsid utilisé comme sélecteur… sauf les sections du CV!important hors de prefers-reduced-motionCtrl + P) est propreLe chapitre 3 recommande de ne pas utiliser d'id en CSS. Ici, le HTML du CV n'a pas de classes sur ses sections, et la consigne interdit de le modifier : utiliser #projets est donc un compromis acceptable. Dans un vrai projet, tu ajouterais des classes BEM (class="section projets") dès l'écriture du HTML.
Le chapitre « Final Project » de Dave Gray (anglais) : la construction d'un projet complet qui réunit tout le cours. Regarde-le une fois ton CV terminé, pour comparer ta démarche.
Sans toucher à autre chose que les variables, crée une variante « vert émeraude » de ton CV. Combien de lignes as-tu modifiées ? Qu'est-ce que cela montre sur la qualité de ta feuille de style ?
Réalise la mise en forme complète de ton CV en respectant la maquette et la check-list. Fais une capture d'écran de la version mobile, tablette et ordinateur, et une capture des scores Lighthouse.
Publie la nouvelle version sur GitHub Pages (exercice 12.2 de la formation HTML). Vérifie sur ton téléphone que la version en ligne est bien la nouvelle.