10 KiB
Lag en CV-nettside ved hjelp av vscode.dev
Hvor kult hadde det ikke vært om en rekrutterer ba om CV-en din, og du sendte dem en URL? 😎
Mål
Etter denne oppgaven vil du lære å:
- Lage en nettside for å vise frem CV-en din
Forutsetninger
- En GitHub-konto. Gå til GitHub og opprett en konto hvis du ikke allerede har en.
Steg
Steg 1: Opprett et nytt GitHub-repositorium og gi det navnet my-resume
Steg 2: Opprett en index.html-fil i repositoriet ditt. Vi må legge til minst én fil direkte på github.com fordi du ikke kan åpne et tomt repositorium i vscode.dev.
Klikk på lenken creating a new file, skriv inn navnet index.html og velg knappen Commit new file.
Steg 3: Åpne VSCode.dev og velg knappen Open Remote Repository.
Kopier URL-en til repositoriet du nettopp opprettet for CV-nettsiden din, og lim den inn i inndatafeltet:
Erstatt your-username med ditt GitHub-brukernavn.
https://github.com/your-username/my-resume
✅ Hvis det lykkes, vil du se prosjektet ditt og index.html-filen åpne seg i teksteditoren i nettleseren.
Steg 4: Åpne index.html-filen, lim inn koden nedenfor i kodeområdet ditt og lagre.
HTML-kode som er ansvarlig for innholdet på CV-nettsiden din.
<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>Navnet ditt her!</title>
</head>
<body>
<header id="header">
<!-- CV-header med navnet ditt og tittel -->
<h1>Navnet ditt her!</h1>
<hr>
Din rolle!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>KONTAKT</h2>
<!-- Kontaktinfo inkludert sosiale medier -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">Skriv e-posten din her</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Skriv brukernavnet ditt her!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Skriv brukernavnet ditt her!</a>
</p>
</section>
<section>
<h2>FERDIGHETER</h2>
<!-- Ferdighetene dine -->
<ul>
<li>Ferdighet 1!</li>
<li>Ferdighet 2!</li>
<li>Ferdighet 3!</li>
<li>Ferdighet 4!</li>
</ul>
</section>
<section>
<h2>UTDANNING</h2>
<!-- Utdanningen din -->
<h3>Skriv kurset ditt her!</h3>
<p>
Skriv institusjonen din her!
</p>
<p>
Start - Sluttdato
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>OM</h2>
<!-- Om deg -->
<p>Skriv en kort tekst om deg selv!</p>
</section>
<section>
<h2>ARBEIDSERFARING</h2>
<!-- Arbeidserfaringen din -->
<h3>Jobbtittel</h3>
<p>
Organisasjonsnavn her | Startmåned – Sluttmåned
</p>
<ul>
<li>Oppgave 1 - Skriv hva du gjorde!</li>
<li>Oppgave 2 - Skriv hva du gjorde!</li>
<li>Skriv resultatene/effekten av bidraget ditt</li>
</ul>
<h3>Jobbtittel 2</h3>
<p>
Organisasjonsnavn her | Startmåned – Sluttmåned
</p>
<ul>
<li>Oppgave 1 - Skriv hva du gjorde!</li>
<li>Oppgave 2 - Skriv hva du gjorde!</li>
<li>Skriv resultatene/effekten av bidraget ditt</li>
</ul>
</section>
</article>
</main>
</body>
</html>
Legg til CV-detaljene dine for å erstatte plassholderteksten i HTML-koden.
Steg 5: Hold musepekeren over My-Resume-mappen, klikk på ikonet New File ... og opprett 2 nye filer i prosjektet ditt: style.css og codeswing.json.
Steg 6: Åpne style.css-filen, lim inn koden nedenfor og lagre.
CSS-kode for å formatere layouten på nettsiden.
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;
}
Steg 6: Åpne codeswing.json-filen, lim inn koden nedenfor og lagre.
{
"scripts": [],
"styles": []
}
Steg 7: Installer Codeswing-utvidelsen for å visualisere CV-nettsiden i kodeområdet.
Klikk på Extensions-ikonet i aktivitetsfeltet og skriv inn Codeswing. Klikk enten på den blå installeringsknappen i det utvidede aktivitetsfeltet for å installere, eller bruk installeringsknappen som vises i kodeområdet når du velger utvidelsen for å laste inn mer informasjon. Umiddelbart etter at utvidelsen er installert, vil du se endringer i prosjektet ditt i kodeområdet 😃.
Dette er hva du vil se på skjermen etter at du har installert utvidelsen.
Hvis du er fornøyd med endringene du har gjort, hold musepekeren over Changes-mappen og klikk på +-knappen for å legge til endringene.
Skriv inn en commit-melding (en beskrivelse av endringen du har gjort i prosjektet) og commit endringene dine ved å klikke på check. Når du er ferdig med prosjektet, velg hamburgermenyikonet øverst til venstre for å gå tilbake til repositoriet på GitHub.
Gratulerer 🎉 Du har nettopp laget CV-nettsiden din ved hjelp av vscode.dev på få steg.
🚀 Utfordring
Åpne et eksternt repositorium du har tillatelse til å gjøre endringer i, og oppdater noen filer. Prøv deretter å opprette en ny gren med endringene dine og lage en Pull Request.
Gjennomgang og selvstudium
Les mer om VSCode.dev og noen av de andre funksjonene.
Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi streber etter nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.