# 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 1. En GitHub-konto. Gå til [GitHub](https://github.com/) 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`. ![Opprett en ny fil på github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.no.png) **Steg 3:** Åpne [VSCode.dev](https://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. ![Opprett en ny fil](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.no.png) **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. Navnet ditt her!

OM

Skriv en kort tekst om deg selv!

ARBEIDSERFARING

Jobbtittel

Organisasjonsnavn her | Startmåned – Sluttmåned

  • Oppgave 1 - Skriv hva du gjorde!
  • Oppgave 2 - Skriv hva du gjorde!
  • Skriv resultatene/effekten av bidraget ditt

Jobbtittel 2

Organisasjonsnavn her | Startmåned – Sluttmåned

  • Oppgave 1 - Skriv hva du gjorde!
  • Oppgave 2 - Skriv hva du gjorde!
  • Skriv resultatene/effekten av bidraget ditt
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 😃. ![Installer utvidelser](../../../../8-code-editor/images/install-extension.gif) Dette er hva du vil se på skjermen etter at du har installert utvidelsen. ![Codeswing-utvidelse i aksjon](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.no.png) 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](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) og noen av de andre funksjonene. --- **Ansvarsfraskrivelse**: Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/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.