← H02 Cours CSS
🎨

Mini-projet — CV Stylisé dans VS Code

Reprenez votre CV HTML du module H01 et appliquez-lui un vrai design CSS : couleurs, typographie, Flexbox et responsive.

Consignes — à réaliser dans VS Code
Tâche 1 / 3
📁 Préparer le projet et créer style.css
Ouvrez votre dossier mon-cv-html/ du module H01 dans VS Code et ajoutez une feuille de style externe.
  1. Ouvrez VS Code → File → Open Folder et sélectionnez votre dossier mon-cv-html/
  2. Créez un nouveau fichier style.css à la racine du dossier
  3. Dans cv.html et formulaire.html, ajoutez dans le <head> : <link rel="stylesheet" href="style.css">
  4. Lancez Live Server sur cv.html pour voir les changements en temps réel
  5. Vérifiez que la page s'ouvre dans le navigateur — pour l'instant elle n'a pas de style, c'est normal
💡 Reset CSS : commencez toujours votre style.css par ce bloc pour éliminer les marges par défaut des navigateurs : *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
Tâche 2 / 3
🎨 Styliser le CV : couleurs, typographie et mise en forme
Appliquez un design cohérent à toutes les sections du CV en utilisant les propriétés CSS fondamentales.
  1. Corps de page : font-family (Georgia ou system-ui), max-width: 820px, margin: 0 auto, padding: 2rem 1.5rem, color, line-height: 1.7
  2. Titres : h1 — grande taille, couleur sombre ; h2 — couleur bleue (#3b82f6), border-bottom ; h3 — gras, taille normale
  3. Header et contact : margin-bottom sur le header, couleur grise pour .contact, liens sans soulignement (text-decoration: none)
  4. Navigation : liens bleus, espacés avec gap, séparés par des border haut et bas
  5. Expériences et formation : margin-bottom entre les article, dates en gris, listes avec padding-left
  6. Langues : utilisez display: grid; grid-template-columns: 120px 1fr; sur le <dl> pour aligner terme et définition
  7. Footer : border-top, petite taille, couleur discrète, font-style: normal sur address
💡 Astuce couleurs : utilisez cette palette harmonieuse — texte principal : #1e293b | bleu accent : #3b82f6 | gris secondaire : #64748b | fond : #ffffff
Tâche 3 / 3
📱 Mise en page Flexbox et responsive
Rendez votre CV parfaitement lisible sur tous les écrans grâce à Flexbox et aux media queries.
  1. Navigation Flexbox : display: flex; gap: 1.5rem; flex-wrap: wrap; sur le <nav> — les liens s'alignent horizontalement et passent à la ligne si besoin
  2. Formulaire : max-width: 520px sur le <form>, display: block sur les <label>, width: 100% sur les champs, border-radius et border sur les inputs
  3. Focus des champs : input:focus, textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
  4. Boutons : background, color, border: none, border-radius, padding, cursor: pointer
  5. Media query mobile : @media (max-width: 600px) { réduisez h1 à 1.7rem, dl en colonne simple }
💡 Transitions : ajoutez transition: border-color 0.15s, box-shadow 0.15s; sur les inputs pour un effet focus fluide. Pour les boutons : button:hover { opacity: 0.85; }

📂 Projet de départ

Téléchargez les fichiers HTML prêts à l'emploi + un style.css vide guidé.
Ouvrez le dossier dans VS Code et suivez les commentaires /* TODO */ !

cv.html formulaire.html style.css — guidé

📌 Le style.css inclus est vide mais entièrement commenté — chaque section vous dit quelles propriétés utiliser et pourquoi. À vous de remplir les blocs /* TODO */ !

📦 Solution complète

Téléchargez la solution avec le style.css intégralement rédigé et commenté.
Comparez avec votre travail après avoir essayé par vous-même !

cv.html formulaire.html style.css — solution

📌 Le style.css de la solution est entièrement commenté — chaque propriété explique ce qu'elle fait et pourquoi. C'est un excellent moyen de comprendre le CSS en lisant du code réel et annoté.