# Opret et CV-website ved hjælp af vscode.dev _Hvor fedt ville det ikke være, hvis en rekrutterer bad om dit CV, og du sendte dem et link?_ 😎 ## Mål Efter denne opgave vil du lære at: - Oprette et website til at fremvise dit CV ### Forudsætninger 1. En GitHub-konto. Gå til [GitHub](https://github.com/) og opret en konto, hvis du ikke allerede har en. ## Trin **Trin 1:** Opret et nyt GitHub-repository og giv det navnet `my-resume` **Trin 2:** Opret en `index.html`-fil i dit repository. Vi tilføjer mindst én fil direkte på github.com, da du ikke kan åbne et tomt repository på vscode.dev. Klik på linket `creating a new file`, skriv navnet `index.html`, og vælg knappen `Commit new file`. ![Opret en ny fil på github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.da.png) **Trin 3:** Åbn [VSCode.dev](https://vscode.dev) og vælg knappen `Open Remote Repository`. Kopier URL'en til det repository, du lige har oprettet til dit CV-website, og indsæt det i inputfeltet: _Erstat `your-username` med dit GitHub-brugernavn_ ``` https://github.com/your-username/my-resume ``` ✅ Hvis det lykkes, vil du se dit projekt og `index.html`-filen åbne i teksteditoren i browseren. ![Opret en ny fil](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.da.png) **Trin 4:** Åbn `index.html`-filen, indsæt koden nedenfor i kodeområdet, og gem.
HTML-kode, der styrer indholdet på dit CV-website. Dit navn her!

OM MIG

Skriv en kort tekst om dig selv!

ERHVERVSERFARING

Jobtitel

Organisationens navn her | Startmåned – Slutmåned

  • Opgave 1 - Skriv, hvad du gjorde!
  • Opgave 2 - Skriv, hvad du gjorde!
  • Skriv resultaterne/effekten af dit bidrag

Jobtitel 2

Organisationens navn her | Startmåned – Slutmåned

  • Opgave 1 - Skriv, hvad du gjorde!
  • Opgave 2 - Skriv, hvad du gjorde!
  • Skriv resultaterne/effekten af dit bidrag
Tilføj dine CV-oplysninger for at erstatte _pladsholderteksten_ i HTML-koden. **Trin 5:** Hold musen over mappen `My-Resume`, klik på ikonet `New File ...`, og opret 2 nye filer i dit projekt: `style.css` og `codeswing.json`. **Trin 6:** Åbn `style.css`-filen, indsæt koden nedenfor, og gem.
CSS-kode til at formatere layoutet på websitet. 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; }
**Trin 6:** Åbn `codeswing.json`-filen, indsæt koden nedenfor, og gem. { "scripts": [], "styles": [] } **Trin 7:** Installer `Codeswing-udvidelsen` for at visualisere CV-websitet i kodeområdet. Klik på ikonet _`Extensions`_ på aktivitetslinjen, og skriv Codeswing. Klik enten på den _blå installer-knap_ på den udvidede aktivitetslinje for at installere eller brug installer-knappen, der vises i kodeområdet, når du vælger udvidelsen for at indlæse yderligere oplysninger. Umiddelbart efter installationen af udvidelsen skal du observere ændringerne i dit projekt i kodeområdet 😃 ![Installer udvidelser](../../../../8-code-editor/images/install-extension.gif) Dette er, hvad du vil se på din skærm, efter du har installeret udvidelsen. ![Codeswing-udvidelse i aktion](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.da.png) Hvis du er tilfreds med de ændringer, du har lavet, skal du holde musen over mappen `Changes` og klikke på `+`-knappen for at stage ændringerne. Skriv en commit-besked _(En beskrivelse af de ændringer, du har lavet i projektet)_, og commit dine ændringer ved at klikke på `check`. Når du er færdig med at arbejde på dit projekt, skal du vælge hamburgerikonet øverst til venstre for at vende tilbage til repositoryet på GitHub. Tillykke 🎉 Du har lige oprettet dit CV-website ved hjælp af vscode.dev i få trin. ## 🚀 Udfordring Åbn et eksternt repository, som du har tilladelse til at foretage ændringer i, og opdater nogle filer. Prøv derefter at oprette en ny gren med dine ændringer og lave en Pull Request. ## Gennemgang & Selvstudie Læs mere om [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) og nogle af dets andre funktioner. --- **Ansvarsfraskrivelse**: Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.