# Ustvarite spletno stran z življenjepisom 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 ga poimenujte `my-resume` **Korak 2:** Ustvarite datoteko `index.html` v svojem repozitoriju. 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 z življenjepisom, in ga prilepite v vnosno polje: _Zamenjajte `your-username` s svojim 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 svoje delovno območje in shranite.
HTML koda, ki je odgovorna za vsebino vaše spletne strani z življenjepisom. 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 z življenjepisom v delovnem območju. Kliknite ikono _`Extensions`_ v orodni vrstici in vnesite Codeswing. Kliknite _modri gumb za namestitev_ na razširjeni orodni vrstici ali uporabite gumb za namestitev, ki se prikaže v delovnem območju, 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 menija hamburger v zgornjem levem kotu, da se vrnete v repozitorij na GitHubu. Čestitke 🎉 Pravkar ste ustvarili svojo spletno stran z življenjepisom z uporabo vscode.dev v nekaj korakih. ## 🚀 Izziv Odprite oddaljeni repozitorij, za katerega imate dovoljenja za spreminjanje, 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 strojno prevajanje [Co-op Translator](https://github.com/Azure/co-op-translator). Čeprav si prizadevamo za natančnost, vas prosimo, da se zavedate, 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 strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.