# Skapa en CV-webbplats med vscode.dev _Hur coolt vore det inte om en rekryterare bad om ditt CV och du skickade en url?_ 😎 ## MĂ„l Efter denna uppgift kommer du att lĂ€ra dig att: - Skapa en webbplats för att visa upp ditt CV ### Förkunskaper 1. Ett GitHub-konto. GĂ„ till [GitHub](https://github.com/) och skapa ett konto om du inte redan har ett. ## Steg **Steg 1:** Skapa ett nytt GitHub-repository och ge det namnet `my-resume` **Steg 2** Skapa en `index.html`-fil i ditt repository. Vi kommer att lĂ€gga till minst en fil direkt pĂ„ github.com eftersom du inte kan öppna ett tomt repository pĂ„ vscode.dev. Klicka pĂ„ lĂ€nken `creating a new file`, skriv in namnet `index.html` och vĂ€lj knappen `Commit new file`. ![Skapa en ny fil pĂ„ github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sv.png) **Steg 3:** Öppna [VSCode.dev](https://vscode.dev) och vĂ€lj knappen `Open Remote Repository`. Kopiera url:en till det repository du just skapade för din CV-webbplats och klistra in den i inmatningsfĂ€ltet: _ErsĂ€tt `your-username` med ditt GitHub-anvĂ€ndarnamn_ ``` https://github.com/your-username/my-resume ``` ✅ Om det lyckas kommer du att se ditt projekt och filen index.html öppnas i textredigeraren i webblĂ€saren. ![Skapa en ny fil](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sv.png) **Steg 4:** Öppna filen `index.html`, klistra in koden nedan i kodomrĂ„det och spara.
HTML-kod som ansvarar för innehÄllet pÄ din CV-webbplats. Ditt namn hÀr!

OM MIG

Skriv en kort text om dig sjÀlv!

ARBETSLIVSERFARENHET

Jobbtitel

Organisationsnamn hĂ€r | StartmĂ„nad – SlutmĂ„nad

  • Uppgift 1 - Skriv vad du gjorde!
  • Uppgift 2 - Skriv vad du gjorde!
  • Skriv resultaten/effekten av ditt bidrag

Jobbtitel 2

Organisationsnamn hĂ€r | StartmĂ„nad – SlutmĂ„nad

  • Uppgift 1 - Skriv vad du gjorde!
  • Uppgift 2 - Skriv vad du gjorde!
  • Skriv resultaten/effekten av ditt bidrag
LĂ€gg till dina CV-detaljer för att ersĂ€tta _platshĂ„llartexten_ i HTML-koden. **Steg 5:** Hovra över mappen My-Resume, klicka pĂ„ ikonen `New File ...` och skapa 2 nya filer i ditt projekt: `style.css` och `codeswing.json`. **Steg 6:** Öppna filen `style.css`, klistra in koden nedan och spara.
CSS-kod för att formatera layouten pÄ webbplatsen. 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:** Öppna filen `codeswing.json`, klistra in koden nedan och spara. { "scripts": [], "styles": [] } **Steg 7:** Installera `Codeswing extension` för att visualisera CV-webbplatsen i kodomrĂ„det. Klicka pĂ„ ikonen _`Extensions`_ i aktivitetsfĂ€ltet och skriv in Codeswing. Klicka antingen pĂ„ den _blĂ„ installationsknappen_ i det utökade aktivitetsfĂ€ltet för att installera eller anvĂ€nd installationsknappen som visas i kodomrĂ„det nĂ€r du vĂ€ljer tillĂ€gget för att ladda ytterligare information. Direkt efter installationen av tillĂ€gget, observera kodomrĂ„det för att se Ă€ndringarna i ditt projekt 😃. ![Installera tillĂ€gg](../../../../8-code-editor/images/install-extension.gif) Detta Ă€r vad du kommer att se pĂ„ din skĂ€rm efter att du har installerat tillĂ€gget. ![Codeswing-tillĂ€gg i aktion](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sv.png) Om du Ă€r nöjd med de Ă€ndringar du gjort, hovra över mappen `Changes` och klicka pĂ„ knappen `+` för att lĂ€gga till Ă€ndringarna. Skriv ett commit-meddelande _(En beskrivning av Ă€ndringen du gjort i projektet)_ och commit:a dina Ă€ndringar genom att klicka pĂ„ `check`. NĂ€r du Ă€r klar med ditt projekt, vĂ€lj hamburgermenyn lĂ€ngst upp till vĂ€nster för att Ă„tergĂ„ till repositoryn pĂ„ GitHub. Grattis 🎉 Du har just skapat din CV-webbplats med vscode.dev pĂ„ nĂ„gra fĂ„ steg. ## 🚀 Utmaning Öppna ett fjĂ€rrrepository som du har behörighet att göra Ă€ndringar i och uppdatera nĂ„gra filer. Försök sedan skapa en ny branch med dina Ă€ndringar och gör en Pull Request. ## Granskning & SjĂ€lvstudier LĂ€s mer om [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) och nĂ„gra av dess andra funktioner. --- **Ansvarsfriskrivning**: Detta dokument har översatts med hjĂ€lp av AI-översĂ€ttningstjĂ€nsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strĂ€var efter noggrannhet, bör det noteras att automatiserade översĂ€ttningar kan innehĂ„lla fel eller inexaktheter. Det ursprungliga dokumentet pĂ„ dess originalsprĂ„k bör betraktas som den auktoritativa kĂ€llan. För kritisk information rekommenderas professionell mĂ€nsklig översĂ€ttning. Vi ansvarar inte för eventuella missförstĂ„nd eller feltolkningar som uppstĂ„r vid anvĂ€ndning av denna översĂ€ttning.