Accueil » Programmation » Créer un CV personnalisé et interactif en HTML et en CSS

Créer un CV personnalisé et interactif en HTML et en CSS

Bonjour à tous !

Aujourd’hui, nous allons apprendre à créer un CV totalement personnalisé en HTML et en CSS et à le mettre en ligne. Cela pourrait être un bon moyen de vous différencier de vos concurrents et donc de vous faire embaucher plus facilement.

Pour suivre ce tutoriel, vous devez posséder des bases solides en HTML et en CSS. Si ce n’est pas le cas, je vous invite d’abord à regarder mon cours traitant de ces deux langages et à revenir ici une fois le cours assimilé.

Comme d’habitude, nous allons procéder par étape. On va d’abord réfléchir et réunir les différents éléments qui seront sur notre CV sur papier, ensuite on s’attaquera au HTML, puis au CSS, et nous finirons en rajoutant quelques éléments d’interaction et en mettant notre CV en ligne.

1. La réflexion – Les normes du CV

La rédaction d’un CV est un exercice plus ou moins normalisé en France.

En effet, si vous regardez les CV de personnes sortant d’écoles de commerce, il y a peu de chance que vous trouviez une quelconque fantaisie à l’intérieur de ceux-ci : tout est carré, propre, et tout se ressemble.

En revanche, si vous jetez un œil à des CV de développeurs par exemple, c’est totalement différent : il n’y a pas deux de pareil, et il y a souvent une forte place laissée à la créativité et des couleurs.

Nous allons donc essayer de faire quelque chose à mi-chemin entre ces deux extrêmes. Après, libre à vous d’adapter le vôtre selon votre profil et vos préférences !

Voici mon CV, modèle sur lequel je vais m’appuyer :

CV de Pierre Giraud

Comme vous pouvez le voir, il n’y a rien de bien folichon, mais ça nous fera une bonne base pour commencer.

On voit différentes sections dans ce CV qui seront très certainement représentées par des div en HTML. On voit également que, si l’on veut reproduire exactement ce CV, il nous faudra faire une mise en page particulière des textes, créer des traits et ajouter une photo.

Vous êtes prêt ? Alors c’est parti !

2. Créer son CV en HTML

Nous allons commencer par rédiger notre CV en HTML en gardant à l’esprit que l’on va devoir le styliser avec le CSS par la suite.

N’oubliez pas que, normalement, vous devez toujours créer une maquette avant de vous lancer et savoir où vous allez et notamment comment et à quels éléments vous allez appliquer des styles en CSS.

Si vous ne faites pas ce travail préalable, vous risquez de perdre énormément de temps à faire des allers retours entre vos feuilles HTML et CSS et à ajuster sans cesse votre code HTML.

Me concernant, j’envisage de grouper les informations de base en haut à gauche du CV et la photo dans un même div afin de pouvoir gérer facilement leur alignement par rapport aux informations du dessous.

J’appliquerai ensuite un float left aux informations en CSS et un float right à la photo.

Ensuite, chaque section (formation, expériences professionnelles, etc.) aura son div. Comme les sections ont une mise en page équivalente, on pourra peut être se contenter de n’appliquer certains styles qu’une seule fois en attribuant la même class à différents div.

Enfin, je vais grouper tout mon CV dans un gros div pour lui donner une taille fixe et pour pouvoir éventuellement ajouter une couleur ou une image de fond à ma page web.

Voici donc le schéma envisagé pour mon CV :

Avant de coder en HTML et en CSS, toujours faire un travail préliminaire de maquette

Notez bien qu’il y a toujours plusieurs façons de faire en Informatique, je ne vous présente que la plus logique selon moi, mais ce n’est pas forcément toujours la meilleure, donc n’hésitez pas si vous avez d’autres solutions.

De façon générale, je vous conseille de toujours travailler du plus large vers le plus précis. Ainsi, nous allons commencer par poser tous nos div (d’où l’intérêt d’une réflexion préliminaire avancée !) puis nous écrirons notre contenu ensuite.

Cela nous donne donc un premier squelette qui ressemble à ça :

On commence par créer le squelette en HTML de notre CV

Ensuite, si le travail de réflexion préliminaire a été bien fait, nous n’avons plus qu’à remplir les différentes parties.

Commençons avec le premier gros div. J’ai pris soin au préalable d’enregistrer ma photo dans le même dossier que ma page HTML sous le nom « photo-cv.png ».

On commence par remplir les premiers div HTML de notre CV

J’aurais pu également ajouter un élément de type h plutôt que strong, après, c’est une question de choix et de goûts.

Rappelez vous que pour le moment on ne s’occupe que du contenu ; le design ne viendra qu’à la fin.

Poursuivons donc en remplissant nos différentes sections. Attention, vous avez vu que j’ai séparé chaque section en deux div : un pour le contenu de gauche, un pour le contenu de droite. Cela nous permettra ensuite de mettre en forme plus simplement notre CV.

J’ai donné le même attribut class à toutes nos sections sachant que la mise en page sera la même pour chaque section.

Pour l’écartement entre les dates, nous allons approximer pour le moment (cela dépendra du nombre de lignes pris par nos textes à droite). Nous pourrons toujours y revenir ensuite afin de peaufiner l’affaire.

Commençons déjà par remplir les titres et tous nos div « sec-gauche ». Vous devriez avoir ceci :

On remplit le contenu de notre CV dans le squelette HTML

Premier résultat pour notre CV en HTML sans CSS

Ensuite, nous n’avons plus qu’à remplir le contenu de nos div « sec-droite » et on pourra passer à la mise en page en CSS !

Vous devriez normalement avoir ceci (désolé, je suis obligé de découper en plusieurs images pour que ça reste lisible pour vous) :

Le contenu HTML de la première section de notre CV

Le contenu HTML de la deuxième section de notre CV

Le contenu HTML de la troisième section de notre CV

Le contenu HTML de la quatrième section de notre CV

On affiche le contenu en HTML de notre CV

Deuxième partie du contenu HTML de notre CV

3. Mettre en page son CV grâce au CSS

Maintenant que nous avons tout notre contenu, nous pouvons passer à la mise en forme de notre CV.

Pour cela, nous allons créer un nouveau fichier « cv.css » et allons lier notre fichier HTML et notre fichier CSS comme on sait le faire, avec l’élément link :

On lie une page HTML avec une page CSS grace a notre element link

On va commencer par écrire les styles généraux de notre CV. Pour cela, on va cibler la class « page ».

Nous allons commencer par donner une largeur à notre CV (nous ne voulons pas que les éléments flottants se baladent de gauche à droite selon que les visiteurs agrandissent ou rétrécissent leur fenêtre) ave la propriété width.

Ensuite, nous allons centrer notre contenu. Pour centrer le contenu à l’intérieur d’un width qui possède une largeur, c’est très simple, il suffit de donner la valeur auto à la propriété margin.

Enfin, nous allons spécifier les polices souhaitées pour notre CV (je vous conseille de ne pas utiliser de polices trop originales ou qui pourraient être peu lisibles pour un CV) ainsi que la taille par défaut de nos textes.

On commence par définir les styles généraux de notre CV en CSS

Première chose de faite ! Maintenant, nous allons très grossièrement mettre en forme notre premier gros div en lui donnant une hauteur et avec la propriété float.

Utilisation de la propriété float en CSS

Affichage du début de notre CV avec le CSS

Ensuite, nous allons nous attaquer à la mise en forme des div section et des div sec-droite et sec-gauche.

Encore une fois, pour le moment, nous n’allons pas dans le détail mais posons les gros jalons de notre mise en page. N’oubliez pas qu’il faut souvent tâtonner en CSS pour obtenir un bon rendu.

ON définit les styles en CSS des sections de notre CV

Affichage des sections de notre CV avec le CSS

On s’aperçoit, comme on pouvait le prévoir, qu’il y a des décalages ponctuels entre la colonne de gauche et celle de droite.

Pour l’espacement entre chaque titre et le premier paragraphe de nos div gauche, c’est normal : nos div sec-gauche font directement suite à nos titres h2 en HTML. Or, l’espace entre un titre h2 et un paragraphe est plus important que l’espace entre deux paragraphes par défaut.

Nous nous occuperons de ces décalages à la fin étant donné qu’ils dépendent de la taille de nos textes.

Pour l’heure, nous allons continuer à mettre en forme nos sections et notamment le texte à l’intérieur de nos sections.

Nous allons déjà justifier le texte afin que notre CV paraisse plus professionnel, puis changer la taille et la couleur des titres et les mettre en majuscule. Nous allons également changer le poids de nos sous-titres et de nos dates.

On définit les styles de nos sous-sections et titres en CSS

On avance en CSS avec notre CV

Ca commence à être plutôt sympathique tout ça ! Nous n’avons plus qu’à aligner les colonnes entre elles, ajouter un cadre et éventuellement une image de fond et on pourra passer à l’étape suivante.

Pour aligner nos dates avec nos textes à droite, nous avons plusieurs solutions :

  • Créer des retours à la ligne ou des paragraphes en cachant le texte (efficace mais pas très élégant) ;
  • Donner un nom à chacun de nos paragraphes de date afin de gérer précisément leur disposition dans la page (précis mais long) ;
  • Appliquer une marge basse à nos dates et bricoler ensuite pour avoir un rendu proche (plus rapide mais moins précis).

Personnellement, je vais me permettre de coupler plusieurs méthodes afin d’arriver assez rapidement à un bon résultat (ce qui est, au final, notre but).

Je vais commencer par rajouter un id à mon premier div sec-gauche pour pouvoir ne cibler que lui et lui appliquer une marge adéquate.

On va également appliquer une marge haute sur la partie droite de chacune de nos sections afin d’aligner la première ligne de texte avec la première date.

ON applique un id à notre CV pour ne cibler qu'un bout en CSS

On applique des styles plus précis à notre CV en CSS

On continue à affiner les styles CSS à notre CV

Affichage de la première section de notre CV en HTML et CSS

On réitère ensuite plus ou moins la même opération pour les autres sections, avec quelques petits tricks lorsque cela est nécessaire :

On définit les styles de notre deuxième section du CV en HTML et CSS

On règle la marge pour les sections de notre CV en CSS

Affichage deuxieme section CV  en HTML et CSS

Au final, vous devriez obtenir quelque chose comme cela :

On affiche notre CV quasiment fini

Finalement, on enjolive un peu le tout en rajoutant une bordure arrondie à notre CV, une ombre et en ajoutant une couleur de fond.

On ajoute une couleur de fond et une bordure à notre CV

C’est fini pour la mise en page ! Il n’y a plus qu’à ajouter deux-trois éléments afin de donner un côté interactif à notre CV et on pourra le mettre en ligne !

4. Créer des éléments d’interaction

Nous créons un CV en ligne, profitons donc des avantages du web par rapport au papier et profitons pour lui ajouter un côté interactif !

Nous pouvons faire cela de différentes façons : en créant des transitions en CSS, en utilisant des pseudo formats en CSS ou encore en créant des liens ramenant vers d’autres pages.

Je vais vous donner quelques exemples de ce qu’il est possible de faire dans cette partie, en commençant avec les pseudo formats.

On peut par exemple colorer le texte de toute une section lorsque l’utilisateur passe sa souris dessus grâce au pseudo format :hover.

ON ajoute des pseudo styles CSS pour ajouter de l'interaction à notre CV

Résultat suite à la pseudo classe :hover sur notre CV

On peut également mettre des liens sur les titres de notre CV par exemple, liens qui ramèneraient vers d’autres pages avec davantage d’informations sur l’élément en question.

5. Mettre notre CV en ligne

Ca y est, notre page de CV est prête ! Il ne nous reste plus qu’à la mettre en ligne !

Pour cela, il va vous falloir choisir un nom de domaine et un hébergeur avec une formule d’hébergement.

Pour le nom de domaine, on va faire simple, je vous conseille vivement de choisir votre propre nom, tout simplement. Pour l’extension, prenez un « .com » si disponible ou un « .votrepays ».

Ensuite, pour l’hébergement, si vous ne comptez héberger que votre CV les offres d’entrée de gamme feront parfaitement l’affaire.

A ce titre, je vous conseille encore et toujours Siteground qui possède les meilleures offres selon moi : cliquez ici

A bientôt !

4 commentaires

  1. Bonjour ! Je tiens à dire que malgré un excellent travail, je trouve que cela ne respecte pas du tout la sémantique ! Vous auriez pu gagner du temps et faire gagner du temps au navigateurs en utilisant des balises sémantique ! Utiliser un div qui a class= »section » ne devrait pas être utilisé quand nous connaissons la balise section.

    Bonne journée !

    • Bonjour,

      En effet, ce code peut être amélioré et je suis très content de voir que certains gardent un oeil vigilant là dessus. Le fait est que je n’ai pas abordé les balises structurantes dans mon cours HTML et CSS et ne voulais pas faire un cours pour le CV mais plutôt un TP, donc sans nouvelle notion. De plus, pour une site de type « page cv », la perte de performance est très minime. Mais votre remarque est tout à fait justifiée.

      Amicalement,
      Pierre

  2. Bonjour,

    Je n’arrive pas à reproduire exactement la mise en forme de ton CV, je rencontre des problèmes de structure et de caractère spéciaux. Pouvez-vous m’aider svp.
    Merci pour votre réponse

    Cordialement

    • Bonjour,

      Concernant les caractères spéciaux, vérifiez que votre fichier est bel et bien configuré en utf-8 (et non pas en mac-rom comme c’est le cas par défaut par exemple avec Mac). Concernant les problèmes de structure, je ne peux pas vous aider (il me faudrait vos fichiers sous les yeux, et dans tous les cas je pense qu’il est mieux que vous vous entrainiez à les résoudre tout seul).

      Amicalement,
      Pierre

Répondre

Votre adresse email ne sera pas publiée. Les champs obligatoires sont marqués d'une étoile *

*