# Vytvorenie webovej stránky životopisu pomocou vscode.dev _Aké skvelé by bolo, keby vás personalista požiadal o váš životopis a vy by ste mu poslali URL?_ 😎 ## Ciele Po tomto zadaniu sa naučíte: - Vytvoriť webovú stránku na prezentáciu vášho životopisu ### Predpoklady 1. Účet na GitHub. Prejdite na [GitHub](https://github.com/) a vytvorte si účet, ak ho ešte nemáte. ## Kroky **Krok 1:** Vytvorte nový GitHub repozitár a pomenujte ho `my-resume`. **Krok 2:** Vytvorte súbor `index.html` vo vašom repozitári. Pridáme aspoň jeden súbor priamo na github.com, pretože prázdny repozitár nie je možné otvoriť vo vscode.dev. Kliknite na odkaz `creating a new file`, zadajte názov `index.html` a vyberte tlačidlo `Commit new file`. ![Vytvorenie nového súboru na github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sk.png) **Krok 3:** Otvorte [VSCode.dev](https://vscode.dev) a vyberte tlačidlo `Open Remote Repository`. Skopírujte URL adresu repozitára, ktorý ste práve vytvorili pre svoju stránku životopisu, a vložte ju do vstupného poľa: _Nahraďte `your-username` svojím GitHub používateľským menom._ ``` https://github.com/your-username/my-resume ``` ✅ Ak je to úspešné, uvidíte svoj projekt a súbor index.html otvorený v textovom editore v prehliadači. ![Vytvorenie nového súboru](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sk.png) **Krok 4:** Otvorte súbor `index.html`, vložte do oblasti kódu nižšie uvedený kód a uložte ho.
HTML kód zodpovedný za obsah vašej webovej stránky životopisu. Vaše meno sem!

O MNE

Napíšte sem niečo o sebe!

PRACOVNÉ SKÚSENOSTI

Názov pozície

Názov organizácie sem | Mesiac začiatku – Mesiac konca

  • Úloha 1 - Napíšte, čo ste robili!
  • Úloha 2 - Napíšte, čo ste robili!
  • Napíšte výsledky/dopad vášho príspevku

Názov pozície 2

Názov organizácie sem | Mesiac začiatku – Mesiac konca

  • Úloha 1 - Napíšte, čo ste robili!
  • Úloha 2 - Napíšte, čo ste robili!
  • Napíšte výsledky/dopad vášho príspevku
Pridajte detaily svojho životopisu a nahraďte _text zástupcu_ v HTML kóde. **Krok 5:** Kliknite na priečinok My-Resume, kliknite na ikonu `New File ...` a vytvorte 2 nové súbory vo vašom projekte: `style.css` a `codeswing.json`. **Krok 6:** Otvorte súbor `style.css`, vložte do oblasti kódu nižšie uvedený kód a uložte ho.
CSS kód na formátovanie rozloženia stránky. 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; }
**Krok 6:** Otvorte súbor `codeswing.json`, vložte do oblasti kódu nižšie uvedený kód a uložte ho. { "scripts": [], "styles": [] } **Krok 7:** Nainštalujte rozšírenie `Codeswing`, aby ste mohli vizualizovať webovú stránku životopisu v oblasti kódu. Kliknite na ikonu _`Extensions`_ na paneli aktivít a zadajte Codeswing. Buď kliknite na _modré tlačidlo inštalovať_ na rozšírenom paneli aktivít, aby ste ho nainštalovali, alebo použite tlačidlo inštalovať, ktoré sa zobrazí v oblasti kódu po výbere rozšírenia na načítanie ďalších informácií. Ihneď po inštalácii rozšírenia si všimnite zmeny vo vašom projekte v oblasti kódu 😃. ![Inštalácia rozšírení](../../../../8-code-editor/images/install-extension.gif) Toto uvidíte na obrazovke po inštalácii rozšírenia. ![Rozšírenie Codeswing v akcii](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sk.png) Ak ste spokojní so zmenami, ktoré ste vykonali, kliknite na priečinok `Changes` a kliknite na tlačidlo `+`, aby ste zmeny pripravili. Zadajte správu commitu _(Popis zmeny, ktorú ste vykonali v projekte)_ a potvrďte svoje zmeny kliknutím na `check`. Po dokončení práce na projekte vyberte ikonu hamburgerového menu v ľavom hornom rohu, aby ste sa vrátili do repozitára na GitHub. Gratulujeme 🎉 Práve ste vytvorili webovú stránku svojho životopisu pomocou vscode.dev v niekoľkých krokoch. ## 🚀 Výzva Otvorte vzdialený repozitár, v ktorom máte povolenie vykonávať zmeny, a aktualizujte niektoré súbory. Potom skúste vytvoriť novú vetvu so svojimi zmenami a vytvorte Pull Request. ## Recenzia a samostatné štúdium Prečítajte si viac o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) a niektorých jeho ďalších funkciách. --- **Upozornenie**: Tento dokument bol preložený pomocou služby na automatický preklad [Co-op Translator](https://github.com/Azure/co-op-translator). Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za záväzný zdroj. Pre dôležité informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.