← H01 Cours HTML
📄

Mini-projet — CV HTML dans VS Code

Créez votre CV professionnel en HTML5 directement dans VS Code : structure sémantique, formulaire de contact, accessibilité.

Consignes — à réaliser dans VS Code
Tâche 1 / 3
📁 Créer la structure du projet
Mettez en place le dossier de travail et les fichiers de base.
  1. Créez un dossier mon-cv-html/ sur votre bureau ou dans vos documents
  2. Ouvrez VS Code, puis File → Open Folder et sélectionnez ce dossier
  3. Dans l'explorateur VS Code, créez trois fichiers : index.html, cv.html, formulaire.html
  4. Dans chaque fichier, tapez ! puis appuyez sur Tab (Emmet) pour générer la structure HTML5 de base
  5. Vérifiez que chaque fichier a bien : <!DOCTYPE html>, lang="fr", meta charset, meta viewport et un <title>
💡 Live Server : installez l'extension Live Server dans VS Code. Faites clic droit sur votre fichier → Open with Live Server — votre page se rafraîchit automatiquement à chaque sauvegarde (Ctrl+S).
Tâche 2 / 3
👤 Votre CV HTML — cv.html
Rédigez votre CV complet en utilisant les balises sémantiques HTML5.
  1. Header : <header> avec <h1> (votre nom) et <p> (titre + email + téléphone)
  2. Navigation interne : <nav> avec des liens-ancres vers chaque section (<a href="#formation">…)
  3. Profil : <section id="profil"> avec un paragraphe de présentation
  4. Compétences : <section id="competences"> avec une <ul> de compétences
  5. Expériences : <section id="experiences"> — une <article> par poste avec <h3>, <time datetime="YYYY-MM"> et <ul>
  6. Formation : <section id="formation"> — une <article> par diplôme
  7. Langues : <dl> avec <dt> (langue) et <dd> (niveau)
  8. Footer : <footer> avec votre email dans <address><a href="mailto:…">
Tâche 3 / 3
✉ Formulaire de contact — formulaire.html
Créez un formulaire HTML complet avec validation native du navigateur.
  1. Créez un <form action="#" method="POST">
  2. Nom : <label for="nom"> + <input type="text" id="nom" name="nom" required>
  3. Email : <label for="email"> + <input type="email" id="email" required>
  4. Téléphone : <input type="tel"> (optionnel)
  5. Sujet : <label for="sujet"> + <select id="sujet" required> avec 4 <option>
  6. Message : <label for="message"> + <textarea id="message" rows="6" maxlength="500" required>
  7. Boutons : <button type="submit">Envoyer</button> et <button type="reset">Effacer</button>
💡 Accessibilité : chaque champ doit avoir un <label> lié via l'attribut for qui correspond à l'id du champ. Exemple : <label for="nom"> lie au <input id="nom">.

📦 Solution complète

Téléchargez le projet complet avec les 4 fichiers de solution annotés.
Comparez avec votre travail après avoir essayé par vous-même !

cv.html formulaire.html index.html style.css

📌 Si la solution vous paraît plus jolie que votre version, c'est grâce au fichier style.css inclus dans le ZIP — vous maîtriserez tout cela dans le module suivant H02 CSS Fondamentaux. Pour l'instant, concentrez-vous uniquement sur la structure HTML : c'est l'essentiel.