# Ustvarite spletno stran za življenjepis z uporabo vscode.dev _Kako kul bi bilo, če bi vas zaposlovalec prosil za vaš življenjepis, vi pa bi mu poslali kar URL?_ 😎 ## Cilji Po tej nalogi boste znali: - Ustvariti spletno stran za predstavitev svojega življenjepisa ### Predpogoji 1. GitHub račun. Obiščite [GitHub](https://github.com/) in ustvarite račun, če ga še nimate. ## Koraki **Korak 1:** Ustvarite novo GitHub repozitorij in mu dajte ime `my-resume`. **Korak 2:** V svojem repozitoriju ustvarite datoteko `index.html`. Na github.com bomo dodali vsaj eno datoteko, saj praznega repozitorija ni mogoče odpreti v vscode.dev. Kliknite povezavo `creating a new file`, vnesite ime `index.html` in izberite gumb `Commit new file`. ![Ustvarite novo datoteko na github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sl.png) **Korak 3:** Odprite [VSCode.dev](https://vscode.dev) in izberite gumb `Open Remote Repository`. Kopirajte URL repozitorija, ki ste ga pravkar ustvarili za svojo spletno stran življenjepisa, in ga prilepite v vnosno polje: _Zamenjajte `your-username` z vašim GitHub uporabniškim imenom._ ``` https://github.com/your-username/my-resume ``` ✅ Če je bilo uspešno, boste videli svoj projekt in datoteko index.html odprto v urejevalniku besedila v brskalniku. ![Ustvarite novo datoteko](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sl.png) **Korak 4:** Odprite datoteko `index.html`, prilepite spodnjo kodo v območje kode in shranite.
HTML koda, ki je odgovorna za vsebino vaše spletne strani življenjepisa. Vaše ime gre sem!

O MENI

Vnesite nekaj o sebi!

DELOVNE IZKUŠNJE

Delovno mesto

Ime organizacije gre sem | Začetni mesec – Končni mesec

  • Naloga 1 - Napišite, kaj ste počeli!
  • Naloga 2 - Napišite, kaj ste počeli!
  • Napišite rezultate/vpliv vašega prispevka

Delovno mesto 2

Ime organizacije gre sem | Začetni mesec – Končni mesec

  • Naloga 1 - Napišite, kaj ste počeli!
  • Naloga 2 - Napišite, kaj ste počeli!
  • Napišite rezultate/vpliv vašega prispevka
Dodajte podrobnosti svojega življenjepisa, da zamenjate _nadomestno besedilo_ v HTML kodi. **Korak 5:** Premaknite kazalec na mapo My-Resume, kliknite ikono `New File ...` in ustvarite 2 novi datoteki v svojem projektu: `style.css` in `codeswing.json`. **Korak 6:** Odprite datoteko `style.css`, prilepite spodnjo kodo in shranite.
CSS koda za oblikovanje postavitve strani. 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; }
**Korak 6:** Odprite datoteko `codeswing.json`, prilepite spodnjo kodo in shranite. { "scripts": [], "styles": [] } **Korak 7:** Namestite razširitev `Codeswing`, da si ogledate spletno stran življenjepisa na območju kode. Kliknite ikono _`Extensions`_ na orodni vrstici in vnesite Codeswing. Kliknite _modri gumb za namestitev_ na razširjeni orodni vrstici ali uporabite gumb za namestitev, ki se prikaže na območju kode, ko izberete razširitev za nalaganje dodatnih informacij. Takoj po namestitvi razširitve opazujte spremembe v svojem projektu 😃. ![Namestitev razširitev](../../../../8-code-editor/images/install-extension.gif) To je tisto, kar boste videli na zaslonu po namestitvi razširitve. ![Razširitev Codeswing v akciji](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sl.png) Če ste zadovoljni s spremembami, ki ste jih naredili, premaknite kazalec na mapo `Changes` in kliknite gumb `+`, da pripravite spremembe. Vnesite sporočilo za commit _(Opis spremembe, ki ste jo naredili v projektu)_ in potrdite svoje spremembe s klikom na `check`. Ko končate z delom na projektu, izberite ikono hamburger menija v zgornjem levem kotu, da se vrnete v repozitorij na GitHubu. Čestitke 🎉 Pravkar ste ustvarili svojo spletno stran življenjepisa z uporabo vscode.dev v nekaj korakih. ## 🚀 Izziv Odprite oddaljeni repozitorij, za katerega imate dovoljenja za urejanje, in posodobite nekaj datotek. Nato poskusite ustvariti novo vejo s svojimi spremembami in ustvariti Pull Request. ## Pregled in samostojno učenje Preberite več o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) in nekaterih njegovih drugih funkcijah. --- **Omejitev odgovornosti**: Ta dokument je bil preveden z uporabo storitve za prevajanje z umetno inteligenco [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da upoštevate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo profesionalni človeški prevod. Ne prevzemamo odgovornosti za morebitna napačna razumevanja ali napačne interpretacije, ki bi nastale zaradi uporabe tega prevoda.