Module 3Valider ta formation
Chapitre 12 sur 13
Projet final : ton CV en ligne
Construire, valider et publier son CV en ligne.
- ≈ 125 min
- 5 leçons
- 2 vidéos
- 2 exercices
Module 3Valider ta formation
Chapitre 12 sur 13
Construire, valider et publier son CV en ligne.
Objectifs
Avec ce chapitre, tu sauras…
Ce projet est le plus important de la formation : à la fin, tu auras ta propre page CV en ligne, que tu pourras envoyer à un recruteur et que tu mettras en forme pendant la formation CSS. Prends ton temps, et n'ouvre pas le code complet de la section 4 avant d'avoir essayé seul.
Leçon 1
Tableau: Le contenu demandé
| Zone | Contenu | Notions |
|---|---|---|
| en-tête | ton nom, ton titre (« Développeur web junior »), un menu à ancres | header, nav, ul, ancres (ch. 5, 8) |
| à propos | ta photo, un paragraphe de présentation | section, img, alt (ch. 6) |
| compétences | deux listes : techniques et humaines | ul, h3 (ch. 4) |
| expériences | au moins deux expériences avec dates | article, time (ch. 8) |
| formation | tes diplômes dans un tableau | table, caption, scope (ch. 9) |
| projets | trois projets avec image légendée et lien | figure, figcaption, liens externes (ch. 5, 6) |
| contact | formulaire : nom, e-mail, message | form, label, validation (ch. 10) |
| pied de page | e-mail, téléphone, liens LinkedIn et GitHub, CV en PDF | footer, address, mailto, tel, download |
Leçon 2
header, nav, main avec ses section, footer, sans contenu.Leçon 3
Leçon 4
Leçon 5
Vidéo · À regarder
FR[TUTO] Les BASES du HTML
Bertrand . Tech · YouTube
L'essentiel du chapitre
Vidéo · À regarder
ENHTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours
Dave Gray · YouTube
mon-cv/
├── index.html
├── images/
│ ├── photo-profil.jpg
│ ├── projet-recettes.webp
│ ├── projet-meteo.webp
│ └── projet-portfolio.webp
├── docs/
│ └── cv-anas-el-amrani.pdf
└── css/
└── style.css ← vide pour l'instant (formation CSS)La méthode du projet
Étape 1 · Le squelette
<body>
<header>
<!-- nom, titre, menu -->
</header>
<main>
<section id="a-propos"></section>
<section id="competences"></section>
<section id="experiences"></section>
<section id="formation"></section>
<section id="projets"></section>
<section id="contact"></section>
</main>
<footer>
<!-- coordonnées -->
</footer>
</body>Étape 2 · L'en-tête et le menu à ancres
Chaque lien du menu pointe vers l'id d'une section : href="#competences" fait défiler la page jusqu'à <section id="competences">.
Étape 3 · Une expérience
<article>
<h3>Stagiaire développeur front-end — Agence Atlas, Rabat</h3>
<p><time datetime="2026-03">Mars 2026</time> – <time datetime="2026-06">juin 2026</time></p>
<ul>
<li>Intégration de 12 pages à partir de maquettes Figma.</li>
<li>Amélioration du score d'accessibilité Lighthouse de 68 à 96.</li>
</ul>
</article>Dans un CV, un chiffre vaut mieux qu'un adjectif : « amélioration du score d'accessibilité de 68 à 96 » est plus convaincant que « travail sur l'accessibilité ». Tu peux justement citer les scores Lighthouse de ce projet.
Ne lis cette section qu'après avoir écrit ta propre version. Elle sert à comparer.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anas El Amrani — Développeur web junior à Casablanca</title>
<meta name="description" content="CV en ligne d'Anas El Amrani, développeur web front-end junior : HTML, CSS, JavaScript. Disponible pour un stage ou un premier emploi à Casablanca.">
<link rel="icon" href="images/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css">
<meta property="og:title" content="Anas El Amrani — Développeur web junior">
<meta property="og:description" content="Mon CV en ligne et mes projets.">
<meta property="og:image" content="https://anas.github.io/mon-cv/images/photo-profil.jpg">
</head>
<body>
<header>
<h1>Anas El Amrani</h1>
<p>Développeur web front-end junior</p>
<nav>
<ul>
<li><a href="#a-propos">À propos</a></li>
<li><a href="#competences">Compétences</a></li>
<li><a href="#experiences">Expériences</a></li>
<li><a href="#formation">Formation</a></li>
<li><a href="#projets">Projets</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="a-propos">
<h2>À propos</h2>
<img src="images/photo-profil.jpg" alt="Portrait d'Anas El Amrani" width="240" height="240">
<p>Étudiant en Master Génie logiciel et IA, je crée des sites <strong>accessibles</strong>
et <strong>rapides</strong>. Je cherche un stage de fin d'études en développement front-end.</p>
</section>
<section id="competences">
<h2>Compétences</h2>
<h3>Techniques</h3>
<ul>
<li>HTML5 sémantique et accessible</li>
<li>CSS3 : Flexbox, Grid, responsive design</li>
<li>JavaScript (bases), Git et GitHub</li>
</ul>
<h3>Humaines</h3>
<ul>
<li>Travail en équipe (méthode agile Scrum)</li>
<li>Curiosité et autonomie</li>
<li>Langues : arabe, français, anglais (B2)</li>
</ul>
</section>
<section id="experiences">
<h2>Expériences</h2>
<article>
<h3>Stagiaire développeur front-end — Agence Atlas, Rabat</h3>
<p><time datetime="2026-03">Mars 2026</time> – <time datetime="2026-06">juin 2026</time></p>
<ul>
<li>Intégration de 12 pages à partir de maquettes Figma.</li>
<li>Amélioration du score d'accessibilité Lighthouse de 68 à 96.</li>
</ul>
</article>
<article>
<h3>Développeur bénévole — Association Jeunesse Numérique</h3>
<p><time datetime="2025-09">Septembre 2025</time> – aujourd'hui</p>
<p>Création et maintenance du site de l'association.</p>
</article>
</section>
<section id="formation">
<h2>Formation</h2>
<table>
<caption>Mes diplômes</caption>
<thead>
<tr>
<th scope="col">Années</th>
<th scope="col">Diplôme</th>
<th scope="col">Établissement</th>
</tr>
</thead>
<tbody>
<tr>
<td>2026 – 2028</td>
<th scope="row">Master Génie logiciel et IA</th>
<td>Université Hassan II, Casablanca</td>
</tr>
<tr>
<td>2023 – 2026</td>
<th scope="row">Licence en informatique</th>
<td>Université Hassan II, Casablanca</td>
</tr>
</tbody>
</table>
</section>
<section id="projets">
<h2>Projets</h2>
<article>
<h3>Site de recettes marocaines</h3>
<figure>
<img src="images/projet-recettes.webp" alt="Page d'accueil du site de recettes, avec une photo de tajine"
width="600" height="400" loading="lazy">
<figcaption>Site multipage en HTML et CSS, 100 en accessibilité.</figcaption>
</figure>
<p><a href="https://github.com/anas/recettes" target="_blank" rel="noopener noreferrer">Voir le code sur GitHub</a></p>
</article>
<!-- deux autres articles sur le même modèle : météo et portfolio -->
</section>
<section id="contact">
<h2>Me contacter</h2>
<form action="https://formspree.io/f/votre-identifiant" method="post">
<label for="nom">Nom</label>
<input type="text" id="nom" name="nom" required autocomplete="name">
<label for="email">E-mail</label>
<input type="email" id="email" name="email" required autocomplete="email">
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required minlength="20"></textarea>
<button type="submit">Envoyer</button>
</form>
</section>
</main>
<footer>
<address>
<a href="mailto:anas@exemple.ma">anas@exemple.ma</a> ·
<a href="tel:+212612345678">+212 6 12 34 56 78</a>
</address>
<ul>
<li><a href="https://www.linkedin.com/in/anas" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
<li><a href="https://github.com/anas" target="_blank" rel="noopener noreferrer">GitHub</a></li>
<li><a href="docs/cv-anas-el-amrani.pdf" download>Télécharger mon CV (PDF, 150 Ko)</a></li>
</ul>
<p><small>© 2026 Anas El Amrani</small></p>
</footer>
</body>
</html>Une page HTML seule ne peut pas recevoir de messages : il faut un serveur. Pour un CV, des services gratuits comme Formspree te donnent une adresse à mettre dans l'attribut action : ils reçoivent le formulaire et t'envoient le message par e-mail.
Avant de rendre ton projet
<!DOCTYPE html> et <html lang="fr"><title> précis et une meta description<h1>, aucun niveau de titre sautéheader, nav, main, section, footer utilisésalt et des dimensionslabel relié et un namerel="noopener noreferrer"« Et après ? » : un segment sur la suite de l'apprentissage une fois les bases du HTML acquises. À regarder une fois ton projet terminé.
Ajoute une page projets.html qui détaille un de tes projets (contexte, technologies en liste, captures dans des figure, difficultés rencontrées), reliée depuis l'index.html et qui reprend le même en-tête et le même pied de page.
Réalise ton CV en ligne en respectant tout le cahier des charges et la check-list. Remplace les données d'exemple par les tiennes.
Publie ton CV gratuitement avec GitHub Pages et note l'adresse obtenue.
Le chapitre « HTML Project » de Dave Gray (anglais) : la construction d'un projet HTML complet. Regarde-le après avoir écrit ton propre squelette, pour comparer ta méthode à celle d'un professionnel.