Module 3Personnaliser et valider
Chapitre 9 sur 9
Projet final, examen blanc et fiche mémo
Réaliser son CV avec Bootstrap, passer l'examen blanc et garder la fiche mémo.
- ≈ 80 min
- 2 leçons
- 2 vidéos
- 2 exercices
Module 3Personnaliser et valider
Chapitre 9 sur 9
Réaliser son CV avec Bootstrap, passer l'examen blanc et garder la fiche mémo.
Objectifs
Avec ce chapitre, tu sauras…
Dernière étape : tout assembler. Tu vas reconstruire ton CV avec Bootstrap, comparer le temps passé avec la version CSS « à la main », puis passer l'examen blanc.
Leçon 1
La méthode
style.css après.container > row > colonnes, mobile first.--bs-*, police, quelques classes à toi.Vidéo · À regarder
FRApprendre BOOTSTRAP 5 & HTML en créant son CV Web [TUTO COMPLET]
H2Prog · YouTube
Vidéo · À regarder
FRApprendre BOOTSTRAP 5 & HTML en créant son CV Web [TUTO COMPLET]
H2Prog · YouTube
Leçon 2
| Domaine | Classes essentielles |
|---|---|
| installation | bootstrap.min.css (head, avant ton CSS) · bootstrap.bundle.min.js (fin du body) |
| conteneurs | container · container-fluid · points sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400 |
| grille | row · col · col-md-6 · col-auto · row-cols-* · offset-* · order-* · g-* |
| espacements | m-* · p-* · mt-3 · px-md-4 · mx-auto · gap-* (0 à 5) |
1Dans la grille, une ligne contient…
2col-lg-4 vaut…
3py-3 signifie…
4Pour masquer un élément sur mobile seulement :
5La classe obligatoire d'un champ texte est…
6Le bouton hamburger utilise…
7Quel fichier contient Popper ?
8Des cartes de même hauteur dans une ligne :
9Pour personnaliser la couleur principale en CSS :
10Le mode sombre s'active avec…
L'essentiel du chapitre
text-* · bg-* · text-bg-* · primary · secondary · success · danger · warning · info · light · dark |
| affichage | d-none · d-md-block · d-flex · justify-content-* · align-items-* · ms-auto · vstack · hstack |
| texte | display-* · lead · fs-* · fw-bold · text-center · text-uppercase · list-unstyled |
| images | img-fluid · rounded · rounded-circle · img-thumbnail |
| tableaux | table · table-striped · table-hover · table-dark · table-responsive |
| boutons | btn · btn-primary · btn-outline-* · btn-lg · btn-sm · d-grid |
| composants | alert · badge · card · card-body · card-title · h-100 |
| formulaires | form-label · form-control · form-select · form-check · form-switch · input-group · form-floating · is-invalid · invalid-feedback |
| JavaScript | navbar · navbar-expand-* · modal · collapse · accordion · data-bs-toggle · data-bs-target · data-bs-dismiss |
| personnalisation | --bs-primary · --bs-primary-rgb · --bs-body-font-family · data-bs-theme="dark" · Sass $primary |
La finalisation de la colonne de gauche du CV Bootstrap de H2Prog. Code en même temps que lui.
La colonne de droite et la fin du projet. Compare sa structure avec la tienne.
<nav class="navbar navbar-expand-md bg-body-tertiary sticky-top border-bottom">…</nav>
<header class="container py-5">
<div class="row align-items-center g-4">
<div class="col-md-4 text-center">
<img src="images/anas.jpg" class="rounded-circle img-fluid shadow" width="220" height="220" alt="Portrait d'Anas">
</div>
<div class="col-md-8 text-center text-md-start">
<h1 class="display-5 fw-bold">Anas El Amrani</h1>
<p class="lead">Développeur web front-end junior</p>
<div class="d-flex gap-2 justify-content-center justify-content-md-start">
<a href="#contact" class="btn btn-primary">Me contacter</a>
<a href="docs/cv.pdf" class="btn btn-outline-secondary" download>Télécharger le CV</a>
</div>
</div>
</div>
</header>
<main class="container">
<section id="competences" class="py-4">
<h2>Compétences</h2>
<span class="badge rounded-pill text-bg-primary">HTML5</span>
<span class="badge rounded-pill text-bg-primary">CSS3</span>
<span class="badge rounded-pill text-bg-primary">Bootstrap 5</span>
</section>
<section id="projets" class="py-4">
<h2>Projets</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<article class="card h-100">
<img src="images/projet-recettes.webp" class="card-img-top" alt="Site de recettes marocaines">
<div class="card-body d-flex flex-column">
<h3 class="card-title h5">Site de recettes</h3>
<p class="card-text">HTML et CSS, 100 en accessibilité.</p>
<a href="#" class="btn btn-primary mt-auto">Voir le projet</a>
</div>
</article>
</div>
<!-- autres projets -->
</div>
</section>
<section id="contact" class="py-4">…formulaire du chapitre 6…</section>
</main>
<footer class="bg-dark text-white py-4 mt-5">
<div class="container d-flex flex-column flex-md-row justify-content-between gap-2">
<p class="mb-0">© 2026 Anas El Amrani</p>
<ul class="list-inline mb-0">
<li class="list-inline-item"><a class="link-light" href="https://github.com/anas"><i class="bi bi-github" aria-hidden="true"></i> GitHub</a></li>
<li class="list-inline-item"><a class="link-light" href="https://www.linkedin.com/in/anas"><i class="bi bi-linkedin" aria-hidden="true"></i> LinkedIn</a></li>
</ul>
</div>
</footer>Avant de rendre ton projet
style.css relié après Bootstrap.row ne contient que des colonnesalt, img-fluid et dimensionsaria-hidden="true"--bs-*Avec Bootstrap uniquement (pas de CSS personnel), crée la page d'une agence de voyages : navbar sombre responsive (2 pts) ; section d'accroche centrée avec titre display, texte lead et deux boutons (2 pts) ; trois cartes de destinations de même hauteur, 1 / 2 / 3 par ligne selon l'écran (4 pts) ; un accordéon de trois questions (2 pts) ; un formulaire de newsletter en groupe de saisie (2 pts).
<div class="row">
<div class="col-md-8">Contenu</div>
<div class="col-md-6">Barre latérale</div>
</div>
<button class="btn-primary">Envoyer</button>
<input type="email" class="form-control" placeholder="E-mail">
<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="menu">☰</button>Ce code contient quatre erreurs (2 points chacune). Explique-les et corrige-les.