Exercice : mon premier CV

Un entraînement, pas une note

Ce CV ne compte pas dans ta moyenne. Il sert à pratiquer sur ton contenu ce que tu vois sur Nuxy, et à te rendre à l'aise avec le cycle modifier → commit → push avant de démarrer le projet personnel.

Tu construis une page qui te présente, publiée en ligne, et que tu enrichis de séance en séance. À la fin, elle contiendra du HTML structuré, sémantique, et un peu de CSS.

Trois paliers, deux échéances : tout le HTML pour le 9 septembre (paliers 1 et 2, tu commences en classe le 2), les couleurs pour le 16 septembre (palier 3). Ton CV doit être terminé le 16 : c'est ce jour-là que démarre le projet personnel — celui qui compte, lui, pour la note.

L'adresse de ton site est celle de ton dépôt : https://ton-compte.github.io/c113-cv-nomprenom/. Elle ne changera plus.

Le dépôt et la publication se mettent en place une seule fois — la marche à suivre est dans Premier dépôt et mise en ligne.

Un exemple pour viser juste : le CV d'Homer

Chaque palier montre le CV d'un candidat fictif, Homer J. Simpson, inspecteur de sécurité au secteur 7-G. Il te dit où tu dois arriver, pas comment y arriver.

Le code, c'est à toi de l'écrire : tu as tout ce qu'il faut dans les modules Nuxy que tu viens de faire. Regarde le résultat, repère les éléments — un titre, des listes, un tableau — et reconstruis-les avec ton propre contenu.

Palier 1 — structurer

Commencé en classe le 2 septembre, à terminer pour le 9.

Ce que tu as travaillé dans le module 1 de Nuxy.

• Ton nom en titre principal (h1) — un seul par page
• Un paragraphe de présentation : qui tu es, ce que tu étudies
• Deux sections annoncées par un sous-titre (h2) — par exemple « Formation » et « Centres d'intérêt »
• Au moins une liste (ul ou ol, avec un li par ligne)
• Le tout en ligne avant de quitter la salle : commit, push, et tu ouvres ton adresse

Le CV d'Homer, palier 1

Rien que du texte structuré, sans aucune mise en forme — c'est normal, le CSS viendra au palier 3. En regardant l'aperçu, repère : un seul grand titre, un paragraphe de présentation, deux sous-titres qui annoncent chaque partie, et deux listes — l'une à puces, l'autre numérotée.

À toi de retrouver quelles balises produisent ce résultat.

Ouvrir cet exemple dans un onglet

Le contenu t'appartient

Deux sections suffisent, mais rien ne t'empêche d'en ajouter : langues, sport, musique, expériences. C'est ta page.

Palier 2 — enrichir

Pour le 9 septembre.

Les modules 2 et 3 de Nuxy, appliqués à ta page. À la fin de ce palier, tout le HTML de ton CV est écrit.

• Une image avec un texte alternatif (alt) qui la décrit vraiment
• Range-la dans un dossier img/ et appelle-la par un chemin relatif : img/photo.jpg
• Nomme le fichier en minuscules, sans espace ni accent : photo-profil.jpg, pas Photo Profil.JPG. Sur ton PC les deux marchent ; en ligne, seul le premier s'affiche
• Un lien externe vers un site qui te correspond — pense à ce qu'il s'ouvre dans un nouvel onglet si tu ne veux pas que le visiteur quitte ta page
• Si ton parcours s'y prête, un tableau (table, tr, th, td) : années de formation, écoles, diplômes
• Les balises sémantiques : header pour l'en-tête, main pour le contenu principal, footer pour le bas de page, section pour chaque partie. Il ne devrait plus rester beaucoup de div dans ta page

Le CV d'Homer, palier 2

Même contenu qu'au palier 1, mais rangé : chaque zone de la page est annoncée par la balise qui décrit son rôle. Deux nouveautés visibles dans l'aperçu : un tableau qui présente des années et des postes — des données, pas une mise en page — et une image accompagnée d'un texte alternatif.

En bas de page, un lien mène vers l'extérieur.

Ouvrir cet exemple dans un onglet

Mal nommée ? Renomme sans casser le lien

Clic droit sur le fichier dans WebStorm → Refactor → Rename. WebStorm cherche toutes les balises qui utilisent ce fichier et corrige le src à ta place. Renommer depuis l'explorateur Windows, à l'inverse, casse le lien sans prévenir.

Le poids de l'image compte

Une photo sortie d'un téléphone pèse facilement 4 Mo, et ta page mettra dix secondes à s'afficher. Redimensionne-la avant de la publier — on verra les outils en séance 12, mais le réflexe se prend maintenant.

Palier 3 — mettre en couleurs

Commencé en classe le 9 septembre, terminé pour le 16.

Le CSS vu en classe le 9, consolidé par les modules 4 et 5 de Nuxy en devoir pour le 16. Ta page va enfin ressembler à quelque chose.

Le CSS ne signale pas ses erreurs

Un point-virgule oublié, une propriété mal orthographiée, et le navigateur ne dit rien : il ignore la ligne — et souvent celles qui suivent — puis continue comme si de rien n'était. Quand un style ne s'applique pas, la première chose à vérifier est la ligne d'avant. WebStorm souligne ces erreurs en jaune : lis ses avertissements.

Les 4 objectifs minimum — ton CV doit les remplir pour valider le palier :

1. Lier ta feuille de style : crée un fichier style.css (clic droit sur le projet → New → Stylesheet) et relie-le à ta page avec la balise link dans le head. (C'est le geste que Nuxy ne te montre pas — sur Nuxy le CSS est déjà branché ; ici, c'est à toi de le brancher.) La ligne à placer dans le head, identique dans tous les projets :

   <link rel="stylesheet" href="style.css">

   rel dit la nature du lien (une feuille de style), href où se trouve le fichier — ici dans le même dossier qu'index.html.

   Astuce WebStorm : le glisser-déposer

   Glisse style.css depuis l'arborescence dans ton index.html : cette ligne s'écrit toute seule, au bon endroit.

   Vidéo (24 s, sans son) — le glisser-déposer dans WebStorm : style.css lâché sur index.html, la balise link est écrite dans le head et l'aperçu intégré change aussitôt de couleur.

2. Colorer par balise : donne une couleur de fond à la page et une couleur au texte (body { background-color: … ; color: … }).

3. Une palette de 2-3 couleurs qui vont ensemble — pas douze — réutilisées avec cohérence sur les titres, les fonds, les liens.

4. Au moins une classe pour mettre en valeur un élément précis (ton nom, un titre de section…) : .maclasse { … } en CSS, class="maclasse" en HTML. Une classe, pas un id — même pour un seul élément.

Classe ou id ?

Les deux existent, mais ils n'ont pas le même rôle. Un id est unique dans la page ; il sert à poser une ancre (<a href="#formation"> amène directement à la section qui porte id="formation") et, plus tard, aux formulaires en JavaScript. Pour le style, les développeurs utilisent des classes, systématiquement : une classe se réutilise, se combine, et coûte moins cher au navigateur.

Pour aller plus loin (facultatif)

Tu as fini et tu veux pousser ? Choisis une police (font-family), ajuste une taille de texte (font-size), aligne un titre (text-align), ou fais réagir tes liens au survol (:hover). Ce sont les modules 7 et suivants de Nuxy — tu prends de l'avance, c'est permis.

Le code de la démo du 9 septembre

En classe, on est parti du HTML d'Homer (palier 2) et on a écrit ensemble une première feuille de style. Les couleurs étaient volontairement criardes — l'objectif était de voir chaque règle agir, pas de faire joli. Le dépôt complet est public : github.com/fallinov/c113-cv, et son résultat est en ligne sur fallinov.github.io/c113-cv.

Le style.css tel qu'on l'a écrit, commenté après coup :

/* Ceci est un commentaire : le navigateur l'ignore */

/* Le body, c'est toute la page : ce qu'on lui donne, ses enfants en héritent */
body {
    background-color: whitesmoke;
    border: 5px dotted red;
    color: blue;
}

/* La virgule = « et » : la règle s'applique aux h1 ET aux h2 */
h1, h2 {
    color: green;
}

/* Une classe (le point) se réutilise sur autant d'éléments qu'on veut */
.tutu {
    color: deeppink;
}

/* Un id (le dièse) ne vise qu'un seul élément — montré ici pour la comparaison */
#intro {
    background-color: yellow;
}

Et côté HTML, trois ajouts : la liaison dans le head, la classe sur les éléments à mettre en valeur — un li et un td — et l'id sur le paragraphe d'introduction :

<p id="intro">Inspecteur de sécurité au secteur 7-G…</p>
…
<li class="tutu">Cours du soir en physique nucléaire — abandonné</li>
…
<td class="tutu">Employé polyvalent</td>

#intro était là pour la démo, pas pour ton CV

Il servait à montrer la différence entre .classe et #id. Dans ton CV, tout le style passe par des classes ; garde l'id pour l'ancre (<a href="#intro">), comme vu en fin de séance. Et trouve un meilleur nom que tutu : une classe se nomme d'après son rôle (.mise-en-avant, .important), pas d'après l'humeur du moment.

Ce que cette démo illustre, et que tu dois retenir :

• L'anatomie d'une règle : sélecteur { propriété: valeur; }. Le sélecteur dit à qui, la déclaration dit quoi. Deux-points entre propriété et valeur, point-virgule à la fin.
• L'héritage : color posé sur body colore tout le texte de la page, sauf là où une règle plus précise (h1, .important) dit autre chose.
• La cascade : si deux règles se contredisent, la dernière écrite gagne. L'ordre compte donc — par convention, on écrit les règles dans l'ordre où les éléments apparaissent dans le HTML (body, puis h1, puis le reste), pour s'y retrouver.
• La casse : tout en minuscules, les mots séparés par des tirets (background-color). Les développeurs appellent ça le kebab-case — la broche qui traverse les mots. HTML et CSS l'utilisent partout.
• Le contraste : blue sur whitesmoke se lit ; du gris clair sur blanc, non. Un site se lit aussi sur un téléphone en plein soleil.

Les couleurs précises viennent avec le module 5

La démo n'utilise que des couleurs nommées (green, deeppink…), une trentaine de mots anglais. Les codes du type #1F2937 que tu vois dans l'exemple d'Homer ci-dessous sont l'objet du module 5 de Nuxy, en devoir pour le 16 : tu pourras les utiliser dès que tu l'auras fait.

Le CV d'Homer, palier 3

Le HTML n'a presque pas bougé : deux ajouts seulement, la liaison de la feuille de style et une classe sur l'image. Tout le reste se passe dans style.css.

La ligne qui relie les deux fichiers se place dans le head — celle-là, tu peux la recopier, elle est identique dans tous les projets :

<link rel="stylesheet" href="style.css">

Le reste — les couleurs, la police, la taille de l'image — c'est à toi de le composer.

Ouvrir cet exemple dans un onglet

Trois couleurs, pas douze

Un fond crème, un texte bleu foncé, un orange pour les titres. C'est tout — et ça suffit à donner une identité à la page.

Lisible avant d'être joli

Du texte gris clair sur fond blanc, c'est illisible pour beaucoup de monde. Si tu hésites, garde un texte foncé sur un fond clair : c'est le choix le plus sûr.

Checklist

Avant de considérer ton CV terminé :

• Un seul h1, et les sous-titres descendent dans l'ordre (h2, puis h3)
• Toutes les images ont un alt qui les décrit
• Tous les liens fonctionnent
• Le fichier s'appelle bien index.html et se trouve à la racine
• La feuille de style est liée et s'applique vraiment
• Le style passe par des classes, aucun id n'est utilisé pour ça
• Tous les noms de fichiers et de dossiers sont en minuscules, sans espace ni accent
• Ton dernier travail est pushé : ce que tu vois en ligne correspond à ton fichier
• Tu peux expliquer chaque ligne de ton code

Ce que tu publies est public

Ton dépôt est visible par n'importe qui, et une page publiée se retrouve dans les moteurs de recherche. La section Avant de publier ton CV donne le réflexe à prendre.