11 KiB
Créer un site web de CV avec vscode.dev
Quelle classe d'envoyer une URL à un recruteur qui demande votre CV ? 😎
Objectifs
Après cette tâche, vous apprendrez à :
- Créer un site web pour présenter votre CV
Prérequis
- Un compte GitHub. Rendez-vous sur GitHub et créez un compte si ce n'est pas déjà fait.
Étapes
Étape 1 : Créez un nouveau dépôt GitHub et donnez-lui le nom my-resume.
Étape 2 : Créez un fichier index.html dans votre dépôt. Nous ajouterons au moins un fichier directement sur github.com car vous ne pouvez pas ouvrir un dépôt vide sur vscode.dev.
Cliquez sur le lien creating a new file, tapez le nom index.html et sélectionnez le bouton Commit new file.
Étape 3 : Ouvrez VSCode.dev et sélectionnez le bouton Open Remote Repository.
Copiez l'URL du dépôt que vous venez de créer pour votre site de CV et collez-la dans la boîte de saisie :
Remplacez your-username par votre nom d'utilisateur GitHub.
https://github.com/your-username/my-resume
✅ Si tout fonctionne, vous verrez votre projet et le fichier index.html ouverts dans l'éditeur de texte sur le navigateur.
Étape 4 : Ouvrez le fichier index.html, collez le code ci-dessous dans votre zone de code et enregistrez.
Code HTML responsable du contenu de votre site web de CV.
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Votre nom ici !</title>
</head>
<body>
<header id="header">
<!-- En-tête du CV avec votre nom et titre -->
<h1>Votre nom ici !</h1>
<hr>
Votre rôle !
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>CONTACT</h2>
<!-- Informations de contact, y compris les réseaux sociaux -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">Écrivez votre email ici</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Écrivez votre nom d'utilisateur ici !</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Écrivez votre nom d'utilisateur ici !</a>
</p>
</section>
<section>
<h2>COMPÉTENCES</h2>
<!-- Vos compétences -->
<ul>
<li>Compétence 1 !</li>
<li>Compétence 2 !</li>
<li>Compétence 3 !</li>
<li>Compétence 4 !</li>
</ul>
</section>
<section>
<h2>FORMATION</h2>
<!-- Votre formation -->
<h3>Écrivez votre cursus ici !</h3>
<p>
Écrivez votre établissement ici !
</p>
<p>
Date de début - Date de fin
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>À PROPOS</h2>
<!-- À propos de vous -->
<p>Écrivez un résumé sur vous-même !</p>
</section>
<section>
<h2>EXPÉRIENCE PROFESSIONNELLE</h2>
<!-- Votre expérience professionnelle -->
<h3>Titre du poste</h3>
<p>
Nom de l'organisation ici | Mois de début – Mois de fin
</p>
<ul>
<li>Tâche 1 - Écrivez ce que vous avez fait !</li>
<li>Tâche 2 - Écrivez ce que vous avez fait !</li>
<li>Écrivez les résultats/impacts de votre contribution</li>
</ul>
<h3>Titre du poste 2</h3>
<p>
Nom de l'organisation ici | Mois de début – Mois de fin
</p>
<ul>
<li>Tâche 1 - Écrivez ce que vous avez fait !</li>
<li>Tâche 2 - Écrivez ce que vous avez fait !</li>
<li>Écrivez les résultats/impacts de votre contribution</li>
</ul>
</section>
</article>
</main>
</body>
</html>
Ajoutez les détails de votre CV pour remplacer le texte de remplacement dans le code HTML.
Étape 5 : Survolez le dossier My-Resume, cliquez sur l'icône New File ... et créez 2 nouveaux fichiers dans votre projet : style.css et codeswing.json.
Étape 6 : Ouvrez le fichier style.css, collez le code ci-dessous et enregistrez.
Code CSS pour formater la mise en page du site.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
max-width: 960px;
margin: auto;
}
h1 {
font-size: 3em;
letter-spacing: .6em;
padding-top: 1em;
padding-bottom: 1em;
}
h2 {
font-size: 1.5em;
padding-bottom: 1em;
}
h3 {
font-size: 1em;
padding-bottom: 1em;
}
main {
display: grid;
grid-template-columns: 40% 60%;
margin-top: 3em;
}
header {
text-align: center;
margin: auto 2em;
}
section {
margin: auto 1em 4em 2em;
}
i {
margin-right: .5em;
}
p {
margin: .2em auto
}
hr {
border: none;
background-color: lightgray;
height: 1px;
}
h1, h2, h3 {
font-weight: 100;
margin-bottom: 0;
}
#mainLeft {
border-right: 1px solid lightgray;
}
Étape 6 : Ouvrez le fichier codeswing.json, collez le code ci-dessous et enregistrez.
{
"scripts": [],
"styles": []
}
Étape 7 : Installez l'extension Codeswing pour visualiser le site web du CV dans la zone de code.
Cliquez sur l'icône Extensions dans la barre d'activité et tapez Codeswing. Cliquez soit sur le bouton bleu d'installation dans la barre d'activité étendue pour installer, soit sur le bouton d'installation qui apparaît dans la zone de code une fois que vous avez sélectionné l'extension pour charger des informations supplémentaires. Immédiatement après l'installation de l'extension, observez votre zone de code pour voir les changements dans votre projet 😃.
Voici ce que vous verrez sur votre écran après avoir installé l'extension.
Si vous êtes satisfait des modifications apportées, survolez le dossier Changes et cliquez sur le bouton + pour mettre en scène les modifications.
Tapez un message de commit (Une description des modifications apportées au projet) et validez vos modifications en cliquant sur le check. Une fois que vous avez terminé de travailler sur votre projet, sélectionnez l'icône du menu hamburger en haut à gauche pour revenir au dépôt sur GitHub.
Félicitations 🎉 Vous venez de créer votre site web de CV avec vscode.dev en quelques étapes.
🚀 Défi
Ouvrez un dépôt distant sur lequel vous avez les permissions pour apporter des modifications et mettez à jour certains fichiers. Ensuite, essayez de créer une nouvelle branche avec vos modifications et faites une Pull Request.
Révision & Auto-apprentissage
Lisez-en davantage sur VSCode.dev et certaines de ses autres fonctionnalités.
Avertissement :
Ce document a été traduit à l'aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction.