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
• 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

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 module 4 de Nuxy, fait en devoir pour le 9. Ta page va enfin ressembler à quelque chose.

• Crée un fichier style.css et lie-le à ta page avec link dans le head
• Choisis deux ou trois couleurs qui vont ensemble — pas douze
• Applique-les au texte et aux fonds (color, background-color)
• Utilise au moins une classe pour styler quelque chose de précis

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
• 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.