Module 4Valider ta formation
Chapitre 15 sur 15
Examen blanc et fiche mémo
Un examen blanc corrigé en conditions réelles et la fiche mémo de toutes les propriétés.
- ≈ 90 min
- 2 leçons
- 3 exercices
- TP
Module 4Valider ta formation
Chapitre 15 sur 15
Un examen blanc corrigé en conditions réelles et la fiche mémo de toutes les propriétés.
Objectifs
Avec ce chapitre, tu sauras…
Fais cet examen en une seule fois, en deux heures, sans le cours, sans vidéo et sans Internet. Seuls VS Code et un navigateur sont autorisés pour la partie D. Note-toi avec le barème du corrigé, puis retravaille les chapitres où tu as perdu le plus de points.
Leçon 1
Tableau: Le barème
| Partie | Contenu | Points | Chapitres |
|---|---|---|---|
| A | questions à choix multiples | 10 | 1 à 13 |
| B | questions de cours | 6 | 3, 6, 9, 11 |
| C | analyse de code | 6 | 3, 6, 9, 10 |
| D | intégration d'une page | 18 | tous |
| Total | 40 |
Leçon 2
| Écriture | Rôle | Chapitre |
|---|---|---|
p · .classe · #id · * · a, b | type · classe · identifiant · tous · groupement | 2 |
A B · A > B · A + B · A ~ B | descendant · enfant · frère adjacent · frères | 2 |
[attr] · [a="v"] · ^= · $= · *= | attributs | 2 |
:hover · :focus-visible · :nth-child() · :not() |
1Quelle est la spécificité de .menu a:hover ?
2Laquelle de ces propriétés est héritée ?
3En box-sizing: border-box, width: 300px; padding: 20px; donne une largeur visible de…
4margin: 5px 10px 15px; donne à gauche…
5Un élément absolute se place par rapport…
6En flex-direction: column, justify-content agit…
7grid-column: 1 / -1 signifie…
8En mobile first, on écrit surtout des media queries en…
9Pour une animation fluide, on anime de préférence…
10Une variable CSS se lit avec…
L'essentiel du chapitre
| pseudo-classes |
| 2 |
::before · ::after (avec content) · ::first-letter | pseudo-éléments | 2 |
spécificité (id, classes, balises) · ordre · !important | cascade | 3 |
inherit · initial · unset · revert | mots-clés universels | 3 |
| Propriété ou valeur | Rôle | Chapitre |
|---|---|---|
#rrggbb · rgb() · hsl() · / 50% | couleurs et transparence | 4 |
px · rem · em · % · vw · vh · ch · fr | unités | 4, 10 |
calc() · min() · max() · clamp() | calculs | 4, 13 |
font-family · font-size · font-weight · line-height | police | 5 |
text-align · text-decoration · text-transform · letter-spacing | texte | 5 |
list-style · ::marker | listes | 5 |
| Propriété | Rôle | Chapitre |
|---|---|---|
width · max-width · min-height · aspect-ratio | dimensions | 6 |
padding · border · margin (haut droite bas gauche) | zones de la boîte | 6 |
box-sizing: border-box | taille prévisible | 6 |
border-radius · box-shadow · background · linear-gradient() | décoration | 6 |
overflow · object-fit | débordement · recadrage | 6, 11 |
display : block · inline · inline-block · none | type de boîte | 7 |
position · top/right/bottom/left · inset · z-index | positionnement | 8 |
| Propriété | Rôle | Chapitre |
|---|---|---|
display: flex · flex-direction · flex-wrap · gap | conteneur flex | 9 |
justify-content (axe principal) · align-items (axe secondaire) | alignement flex | 9 |
flex: 1 · flex: 0 0 260px · align-self · order | éléments flex | 9 |
display: grid · grid-template-columns · repeat() · minmax() | grille | 10 |
repeat(auto-fit, minmax(250px, 1fr)) | grille responsive | 10 |
grid-column: 1 / 3 · span 2 · grid-template-areas · grid-area | placement | 10 |
place-items: center | centrage | 10 |
| Écriture | Rôle | Chapitre |
|---|---|---|
@media (min-width: 768px) { } | media query | 11 |
prefers-color-scheme · prefers-reduced-motion · print | préférences · impression | 11 |
transition: propriété durée courbe | transition | 12 |
transform: translate() scale() rotate() | transformation | 12 |
@keyframes · animation | animation | 12 |
:root { --nom: v; } · var(--nom, secours) | variables | 13 |
.bloc__element--modificateur | nommage BEM | 13 |
Pour chaque cas, explique ce qui ne fonctionne pas comme prévu et corrige-le.
/* 1. Le bouton reste bleu au survol (2 pts) */
#formulaire .bouton { background: blue; }
.bouton:hover { background: navy; }
/* 2. Le badge apparaît dans le coin de la page, pas de la carte (2 pts) */
.carte { padding: 1rem; }
.badge { position: absolute; top: 0; right: 0; }
/* 3. Les trois colonnes ne tiennent pas sur une ligne (2 pts) */
.colonne { float: left; width: 33.33%; padding: 20px; border: 1px solid #ccc; }Tableau: Sélecteurs et cascade
Écris le HTML et le CSS d'une page de présentation pour une agence de voyages fictive, « Atlas Évasion » :
min-height: 80vh) avec une image de fond, un dégradé sombre par-dessus, un titre fluide avec clamp() et un bouton (3 pts) ;auto-fit de cartes (image, titre, prix, bouton collé en bas), qui se soulèvent au survol (4 pts) ;prefers-reduced-motion (3 pts).Tableau: Couleurs, unités, texte
Tableau: Boîtes et affichage
Tableau: Flexbox et Grid
Tableau: Responsive, mouvement, organisation