Projet CV en ligne — exercices

• ☐ une section existe et porte id="a-propos" (le menu doit pouvoir y pointer) ;
• ☐ elle contient une balise <img> qui s'affiche réellement ;
• ☐ elle contient un texte de présentation de 2 à 3 lignes — ni une ligne, ni dix ;
• ☐ le CSS de cette section contient display: flex ;
• ☐ à l'écran, la photo et le texte sont bien côte à côte, pas l'un sous l'autre.

Le dernier point est le seul qui compte vraiment : on peut écrire display: flex et obtenir une colonne — il suffit d'un flex-direction: column oublié plus bas. La check-list se vérifie à l'écran, pas dans le code.

1. Le CSS n'est pas externe. L'énoncé l'écrit noir sur blanc : « Le fichier HTML doit inclure le CSS externe avec la balise <link rel="stylesheet" href="style.css"> ». Du CSS dans un <style> donne le même rendu et ne remplit pas la consigne.

2. Les fichiers ne sont pas nommés comme demandé. L'énoncé exige cv.html et style.css. Un index.html ou un styles.css — avec un « s » — oblige le correcteur à chercher, et casse le <link> si l'un des deux a été renommé sans l'autre.

Une troisième cause, très fréquente : les images ne sont pas jointes. Les deux fichiers demandés sont les livrables de code ; le dossier asset/ reste indispensable pour que la page s'affiche.

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;                    /* l'espacement demandé */
  height: 50px;
  margin: 0;                    /* <ul> a une marge par défaut */
  padding: 0;                   /* et un padding-left de 40px */
  background: rgba(0, 0, 0, .55);
}
.menu li { list-style: none; }  /* borné au menu, pas « li » tout seul */
.menu a {
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
}
.menu a:hover { background: rgba(255, 255, 255, .18); border-radius: 5px; }

Le padding se met sur le <a>, pas sur le <li> : c'est le lien qui doit être cliquable sur toute la surface survolée.

1. background-image sans background-size. L'image s'affiche à sa taille réelle et se répète en mosaïque si le bloc est plus grand qu'elle.

2. height: 700px et margin-bottom: 350px. Une hauteur figée plus une marge réglée à l'œil pour la compenser. Sur un écran étroit, l'accroche déborde du header.

3. justify-self sur un élément qui n'est pas dans une grille. La propriété est purement ignorée : du code mort.

header {
  min-height: 70vh;               /* une contrainte, pas un carcan */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* menu en haut, accroche en bas */

  background-image: url("asset/background.jpg");
  background-size: cover;
  background-position: center;
}
.menu { margin: 0; }
.presentation { margin-inline: auto; }   /* le vrai centrage d'un bloc */

Le test : réduisez la fenêtre à 375 px de large. Avec la version corrigée, la bannière s'adapte ; avec l'originale, l'accroche sort du cadre.

Et dans tous les cas : jamais l'un dans l'autre. Un <a> peut être habillé en bouton avec display: inline-block et du padding — l'apparence relève du CSS, la balise relève du sens.

.content-a-propos {
  display: flex;
  align-items: center;    /* centrage vertical mutuel */
  gap: 28px;
}
.content-a-propos img {
  width: 150px;
  height: 150px;
  object-fit: cover;      /* recadre au lieu de déformer */
  border-radius: 50%;
  flex-shrink: 0;         /* la photo ne se comprime jamais */
}

flex-shrink: 0 est la subtilité : par défaut, un élément flex accepte de rétrécir si la place manque. Sans cette ligne, la photo passe de 150 px à 90 px sur un écran étroit — et devient ovale.

Deux dimensions imposées à la fois. La photo est en 4:3 ; on lui impose 150 px de large et une hauteur calculée sur le parent. Sauf coïncidence arithmétique, le rapport ne tombe pas juste et l'image est étirée.

Et height: 100 % de quoi ? Un pourcentage de hauteur ne s'évalue que si le parent a lui-même une hauteur définie. Le <div> parent n'en avait pas : la déclaration retombe sur auto, et le résultat dépend du contexte — donc change d'un navigateur ou d'un écran à l'autre.

/* A. une seule dimension : l'autre suit, le rapport est conservé */
.content-a-propos img { width: 150px; height: auto; }

/* B. un cadre imposé : on recadre au lieu de déformer */
.content-a-propos img { width: 150px; height: 150px; object-fit: cover; }

A quand on veut voir l'image entière ; B quand on veut un cadre régulier — des vignettes alignées, un avatar rond. Jamais deux dimensions fixes sans object-fit.

.competences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

Se lit : « autant de colonnes que tu peux, d'au moins 220 px, et partage le reste équitablement ».

C'est le motif le plus utile du CSS moderne. Apprenez-le par cœur : il résout à lui seul 80 % des grilles responsives.

Combien de colonnes tiennent ? Avec n colonnes de 220 px et (n−1) espaces de 20 px : 4 colonnes demandent 4 × 220 + 3 × 20 = 940 px, ce qui tient dans 1000. Une 5^e demanderait 1180 px. Le navigateur crée donc 4 pistes.

Autrement dit : auto-fill réserve la place des cartes futures, auto-fit donne toute la place aux cartes présentes.

Pour un CV — un nombre de compétences fixe et connu — auto-fit. auto-fill a du sens sur une galerie qui se remplit au fil du temps, où l'on veut que l'alignement reste stable.

.competences { align-items: stretch; }   /* c'est déjà le défaut : on l'assume */

.competences .card {
  display: grid;
  grid-template-rows: auto auto 1fr;     /* titre / image : leur taille
                                            texte : tout le reste */
}

auto = la rangée prend la hauteur de son contenu, sans le couper. 1fr = la dernière rangée absorbe l'espace restant, ce qui aligne les cartes sur la plus haute.

<form method="post" action="contact.php">
  <fieldset>
    <legend>Me contacter</legend>

    <label for="nom">Nom</label>
    <input type="text" id="nom" name="nom" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="telephone">Téléphone</label>
    <input type="tel" id="telephone" name="telephone">

    <label for="message">Votre message</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Envoyer</button>
  </fieldset>
</form>

Le téléphone perd son required : sur un CV, l'email suffit à répondre. Un champ obligatoire qui ne l'est pas vraiment fait fuir des visiteurs.

Le contrôle en trois secondes, sans outil : cliquez sur chaque intitulé. Si le curseur ne saute pas dans le champ correspondant, le for est faux.

1. Les images de projets — la plus visible. 650 px imposés dans un écran de 375 px : 275 px de débordement à elles seules.

2. La grille à 4 colonnes. Elle ne déborde pas forcément, mais les mots longs (« Développement ») ne tiennent pas dans 80 px et sortent de leur carte.

3. Le padding: 60px du fieldset. 120 px consommés à gauche et à droite ; sans box-sizing: border-box, la boîte dépasse son parent.

*, *::before, *::after { box-sizing: border-box; }   /* en tête de fichier */

.competences { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card-image-projets img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  fieldset { padding: 20px; }
}

document.querySelectorAll('*').forEach(e => {
  if (e.getBoundingClientRect().right > document.documentElement.clientWidth)
    console.log(e);
});

@media (max-width: 768px) {
  .menu { flex-wrap: wrap; height: auto; padding: 10px 0; gap: 10px; }

  header { min-height: 55vh; }

  .content-a-propos { flex-direction: column; text-align: center; }

  fieldset { padding: 20px; }
}

Remarquez que .competences n'apparaît pas ici : avec auto-fit et minmax, la grille s'adapte seule. Une media query ne sert que pour ce que le contenu ne peut pas régler lui-même.

Six corrections, dont une seule est visible à l'écran (la faute d'orthographe). C'est tout l'objet d'une relecture de code : la plupart des défauts ne se voient pas, ils se lisent.

1. Copier le dossier ailleurs et l'ouvrir (1 min) — c'est le test qui attrape le plus de points perdus : images manquantes, chemins faux, casse.
2. Relire le cahier des charges (2 min) — les cinq blocs, le CSS externe, les noms de fichiers.
3. Passer la page au validateur W3C (2 min) — balises mal fermées, id dupliqués, imbrications interdites.
4. Ouvrir la console, F12 (1 min) — zéro erreur rouge, zéro 404.
5. Tester à 375 px (1 min) — aucune barre de défilement horizontale.
6. Cliquer chaque lien du menu et chaque intitulé du formulaire (1 min).
7. Relire l'orthographe (2 min) — titres compris, ce sont eux qu'on lit en premier.

Aucune de ces étapes n'écrit une ligne de code. Elles rapportent pourtant plus de points que dix minutes de CSS supplémentaires — parce qu'elles corrigent ce qui coûte des points, au lieu d'ajouter ce qui n'en rapporte plus.