11 KiB
Créer un site web CV avec vscode.dev
Quelle classe d'avoir un recruteur qui vous demande votre CV et vous lui envoyez une URL ? 😎
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 nommez-le 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 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 se passe bien, vous verrez votre projet et le fichier index.html s'ouvrir 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 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 - Décrivez ce que vous avez fait !</li>
<li>Tâche 2 - Décrivez ce que vous avez fait !</li>
<li>Dé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 - Décrivez ce que vous avez fait !</li>
<li>Tâche 2 - Décrivez ce que vous avez fait !</li>
<li>Dé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 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 Installer dans la barre d'activité étendue pour installer, soit sur le bouton d'installation qui apparaît dans la zone de code une fois l'extension sélectionnée pour charger des informations supplémentaires. Immédiatement après l'installation de l'extension, observez les changements dans votre projet 😃.
Voici ce que vous verrez à l'é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 la coche. Une fois votre travail terminé, 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 CV en utilisant vscode.dev en quelques étapes.
🚀 Défi
Ouvrez un dépôt distant sur lequel vous avez les permissions de faire 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 & Étude personnelle
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 faire appel à 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.