Projet CV en ligne

Les captures d'écran des projets s'appelaient projet (1).png, projet (2).png… Cela fonctionne en local, mais une URL n'accepte ni espace ni parenthèse : le navigateur doit les encoder en projet%20(1).png, et certains serveurs refusent purement et simplement ces caractères. Le jour où le CV est mis en ligne, les images disparaissent.

projet (1).png → projet-1.png. C'est la même règle de nommage que pour les dossiers de ce site, et elle vaut pour tout fichier destiné au web.

Dans la version rendue, la balise fermante </main> arrivait après le footer :

<main>
  <section id="a-propos">…</section>
  …
  <footer id="contact">…</footer>   <!-- ✘ enfermé dans main -->
</main>

<main> désigne le contenu principal et unique de la page — ce qui reste quand on retire l'en-tête, le menu et le pied de page. Un pied de page à l'intérieur du contenu principal est une contradiction : un lecteur d'écran qui propose « aller au contenu principal » y embarque le formulaire de contact, et la commande « aller au pied de page » ne trouve plus rien au bon niveau.

La correction tient en un déplacement de la balise fermante : </main> avant <footer>. Aucun pixel ne bouge à l'écran — et c'est justement pour cela que l'erreur passe inaperçue jusqu'à la correction.

L'accroche contenait :

<button><a href="#experiences">Expériences</a></button>   <!-- ✘ -->

<button> et <a> sont tous deux du contenu interactif, et la spécification HTML interdit d'imbriquer l'un dans l'autre. Ce n'est pas une chicane de puriste : le navigateur doit décider qui reçoit le clic, le comportement diffère d'un navigateur à l'autre, et au clavier on obtient deux arrêts de tabulation pour une seule action.

La question à se poser : est-ce que ça navigue, ou est-ce que ça agit ? Ici cela envoie vers une section — c'est donc un lien, qu'on habille en bouton :

<a class="bouton" href="#experiences">Voir mes projets</a>

.bouton {
  display: inline-block;      /* un lien accepte alors padding et taille */
  padding: 12px 26px;
  background: #2D5A27;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
}

Dans la version rendue, <nav> contenait le menu et le bloc .presentation (le nom, l'accroche, le bouton). Or <nav> annonce : « ce qui suit est de la navigation ». Un lecteur d'écran propose de sauter les zones de navigation — il sauterait donc aussi le nom du candidat, c'est-à-dire l'information la plus importante de la page.

<header>
  <nav><ul class="menu">…</ul></nav>   <!-- uniquement les liens -->

  <div class="presentation">              <!-- hors du nav -->
    <h1>l'élève</h1>
    <p>Étudiant en BTS CIEL — développement web et réseaux</p>
    <a class="bouton" href="#experiences">Voir mes projets</a>
  </div>
</header>

Au passage : l'accroche rendue disait « Je suis moi ». C'est un texte de remplissage laissé en place. Sur un CV, c'est la deuxième ligne que lit un recruteur — elle doit annoncer la formation et le domaine.

li {                      /* ✘ TOUS les <li> du document */
  margin-right: 15px;
  margin-left: 15px;
  list-style: none;
}

La règle visait le menu, mais elle s'applique à chaque liste de la page — présentes et futures. Le jour où l'on ajoute une liste à puces dans « À propos », les puces disparaissent sans qu'on comprenne pourquoi, et la règle coupable est à cent lignes de là.

.menu li { margin: 0; list-style: none; }   /* ✔ borné au menu */

Principe : un sélecteur de balise nue (li, p, img) n'a sa place que dans la section « base » d'une feuille de style, pour un réglage volontairement global. Partout ailleurs, on préfixe par une classe.

header { background-image: url("asset/background.jpg"); height: 700px; }
.menu   { … margin-bottom: 350px; }   /* ✘ pour pousser l'accroche vers le bas */

Le résultat est correct sur l'écran où il a été réglé, et faux partout ailleurs. Deux défauts se combinent :

• height: 700px — une hauteur fixe. Si le contenu devient plus grand (texte plus long, écran étroit où l'accroche passe sur trois lignes), il déborde du header et se superpose à la section suivante.
• margin-bottom: 350px — une marge choisie à l'œil pour compenser les 700 px. Changez la hauteur, tout est à refaire.

Flexbox fait le calcul lui-même, à n'importe quelle taille :

header {
  min-height: 70vh;               /* 70 % de la hauteur de fenêtre, jamais moins */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* menu en haut, accroche en bas */

  background-image: url("asset/background.jpg");
  background-size: cover;         /* l'image couvre tout le bloc */
  background-position: center;    /* sans déformation, recadrée au centre */
}

min-height plutôt que height : la bannière ne sera jamais plus petite que 70 % de l'écran, mais elle peut grandir si le contenu l'exige. C'est la différence entre une contrainte et un carcan.

.content-a-propos > div > img { height: 100%; width: 150px; }   /* ✘ */

Donner à la fois une largeur et une hauteur à une image l'étire ou l'écrase, sauf coïncidence : la photo rendue, en 4:3, était comprimée dans un carré de 150 px. Et height: 100% ne s'évalue que si le parent a une hauteur définie — ce qui n'était pas le cas : la règle était donc à la fois nuisible et imprévisible.

object-fit: cover agit sur une <img> comme background-size: cover sur un fond : l'image remplit le cadre imposé, le surplus est rogné, les proportions sont conservées.

.competences { display: grid; grid-template-columns: repeat(4, 1fr); }   /* ✘ */

« Quatre colonnes » est une instruction que le navigateur applique à toutes les tailles d'écran. Sur un iPhone de 375 px de large, quatre cartes se partagent l'espace : environ 80 px chacune, marges déduites. Les titres se brisent lettre par lettre, les images débordent, la page défile horizontalement.

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

Cette ligne se lit ainsi : « fais autant de colonnes que tu peux, chacune d'au moins 220 px, et distribue l'espace restant à parts égales ». Le navigateur calcule le nombre de colonnes à partir de la place disponible :

Une ligne de CSS, aucune media query, et la grille est responsive. C'est le motif le plus rentable de tout le CSS moderne : retenez-le tel quel.

.competences > .card {
  display: grid;
  grid-template-rows: 150px 150px 150px;   /* ✘ titre / image / texte */
}

L'intention était bonne : que les trois cartes s'alignent, titre sous titre, image sous image. Mais imposer 150 px à une rangée de texte suppose que le texte fera toujours cette hauteur. Le paragraphe de la première carte est trois fois plus long que celui de la troisième : il déborde de sa rangée et chevauche le bord de la carte.

Le second défaut est structurel : la carte « Testeur logiciel » enveloppait son paragraphe dans un <div> supplémentaire, contrairement aux trois autres. Or grid-template-rows distribue les enfants directs : la structure devait être identique d'une carte à l'autre pour que l'alignement fonctionne.

.competences { align-items: stretch; }   /* les cartes prennent la hauteur de la plus haute */

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

auto laisse chaque rangée prendre la hauteur de son contenu ; 1fr donne tout l'espace restant à la dernière. Les cartes restent alignées, et aucun texte n'est coupé.

Les cartes de compétences affichaient des illustrations pointant vers fiverr-res.cloudinary.com, imgs.search.brave.com, static-cse.canva.com et i.ytimg.com. Quatre problèmes superposés :

1. Le CV ne fonctionne pas hors connexion. Ouvert sans réseau — en salle d'examen, dans le train — il montre quatre cadres vides.
2. Les liens meurent. Ces URL sont des adresses internes de services tiers (une annonce Fiverr, un cache de moteur de recherche). Elles changent sans préavis. Un CV qui affiche des images cassées six mois plus tard est pire qu'un CV sans images.
3. Ce sont les images de quelqu'un d'autre. Les afficher depuis son site, sans licence, est une contrefaçon — et charger l'image depuis le serveur d'autrui lui fait payer la bande passante. Le terme consacré est hotlinking.
4. Ça sort du livrable. L'énoncé demande cv.html et style.css : le projet doit être autonome.

La correction : télécharger des visuels libres de droits (Unsplash, Pexels, icônes Feather ou Bootstrap Icons), les placer dans asset/, et pointer dessus en relatif.

<img src="asset/icone-web.svg" alt="" width="72" height="72">

Un SVG est ici idéal : quelques kilo-octets, net à toutes les tailles et sur les écrans Retina. Et l'alt vide est correct dans ce cas précis : l'image est décorative, le titre de la carte porte déjà l'information — la répéter encombrerait le lecteur d'écran. Voir la section 9.

.card-image-projets > img { height: 405px; width: 650px; }   /* ✘ */

650 px imposés à une image placée dans une carte de 375 px : elle déborde, et la page entière défile horizontalement — le défaut le plus visible d'un site non responsive. Par ailleurs, les six captures n'ont pas toutes le même format : les forcer en 650 × 405 en déforme certaines.

.card-image-projets img {
  width: 100%;              /* jamais plus large que sa carte */
  aspect-ratio: 16 / 10;    /* toutes les vignettes au même format */
  object-fit: cover;        /* recadrées, pas déformées */
  border-radius: 10px;
  display: block;           /* supprime l'espace fantôme sous l'image */
}

C'est l'erreur la plus fréquente du chapitre formulaires, et elle mérite qu'on s'y arrête : les deux attributs répondent à deux questions différentes.

Écrire action="POST" revient à donner le mot « POST » comme adresse de destination. Le navigateur cherche un fichier nommé POST à côté de cv.html, ne le trouve pas — et comme method est absent, il applique la valeur par défaut, get : les champs partent dans la barre d'adresse. Rien ne signale l'erreur, sinon une page 404 après le clic.

Le rappel complet sur GET et POST est au chapitre PHP — sessions.

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

<label for="first-name">Téléphone :</label>
<input type="number" id="number" name="number" required>

Le for d'un label doit reprendre exactement l'id du champ. Ici for="first-name" — vestige d'un copier-coller — ne correspond à aucun id de la page, et il est répété deux fois. Les deux labels sont donc orphelins :

• cliquer sur le mot « Email » ne place plus le curseur dans le champ ;
• un lecteur d'écran annonce « zone de saisie, sans intitulé » — l'utilisateur ne sait pas quoi taper ;
• la zone cliquable, précieuse au doigt sur un téléphone, se réduit au champ lui-même.

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

Le test en trois secondes, sans aucun outil : cliquer sur chaque intitulé. Si le curseur ne saute pas dans le champ, la liaison est cassée.

Un numéro de téléphone n'est pas un nombre : c'est une suite de chiffres. La différence est loin d'être théorique.

<input type="tel" id="telephone" name="telephone"
       placeholder="06 12 34 56 78"
       pattern="[0-9 +().-]{6,20}">

type="number" est réservé aux valeurs sur lesquelles une addition a du sens : une quantité, un âge, un prix. Jamais un téléphone, un code postal, un numéro de sécurité sociale ni un numéro de carte.