# Vytvořte webovou stránku životopisu pomocí vscode.dev _Jak skvělé by bylo, kdyby vás personalista požádal o životopis a vy mu poslali odkaz?_ 😎 ## Cíle Po tomto úkolu se naučíte: - Vytvořit webovou stránku pro prezentaci svého životopisu ### Předpoklady 1. Účet na GitHubu. Přejděte na [GitHub](https://github.com/) a vytvořte si účet, pokud ho ještě nemáte. ## Kroky **Krok 1:** Vytvořte nový GitHub repozitář a pojmenujte ho `my-resume`. **Krok 2:** Vytvořte soubor `index.html` ve svém repozitáři. Přidáme alespoň jeden soubor přímo na github.com, protože prázdný repozitář nelze otevřít na vscode.dev. Klikněte na odkaz `creating a new file`, zadejte název `index.html` a vyberte tlačítko `Commit new file`. ![Vytvoření nového souboru na github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.cs.png) **Krok 3:** Otevřete [VSCode.dev](https://vscode.dev) a vyberte tlačítko `Open Remote Repository`. Zkopírujte URL repozitáře, který jste právě vytvořili pro svůj web životopisu, a vložte ho do vstupního pole: _Nahraďte `your-username` svým uživatelským jménem na GitHubu._ ``` https://github.com/your-username/my-resume ``` ✅ Pokud vše proběhlo úspěšně, uvidíte svůj projekt a soubor index.html otevřený v textovém editoru v prohlížeči. ![Vytvoření nového souboru](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.cs.png) **Krok 4:** Otevřete soubor `index.html`, vložte do něj níže uvedený kód a uložte.
HTML kód odpovědný za obsah vašeho webu životopisu. Vaše jméno sem!

O MNĚ

Napište něco o sobě!

PRACOVNÍ ZKUŠENOSTI

Název pozice

Název organizace sem | Měsíc začátku – Měsíc konce

  • Úkol 1 - Napište, co jste dělali!
  • Úkol 2 - Napište, co jste dělali!
  • Napište výsledky/dopad vašeho přínosu

Název pozice 2

Název organizace sem | Měsíc začátku – Měsíc konce

  • Úkol 1 - Napište, co jste dělali!
  • Úkol 2 - Napište, co jste dělali!
  • Napište výsledky/dopad vašeho přínosu
Nahraďte _text zástupce_ ve svém HTML kódu detaily svého životopisu. **Krok 5:** Najděte složku My-Resume, klikněte na ikonu `New File ...` a vytvořte 2 nové soubory ve svém projektu: `style.css` a `codeswing.json`. **Krok 6:** Otevřete soubor `style.css`, vložte do něj níže uvedený kód a uložte.
CSS kód pro formátování rozvržení 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:** Otevřete soubor `codeswing.json`, vložte do něj níže uvedený kód a uložte. { "scripts": [], "styles": [] } **Krok 7:** Nainstalujte rozšíření `Codeswing`, abyste mohli vizualizovat webovou stránku životopisu v kódové oblasti. Klikněte na ikonu _`Extensions`_ na panelu aktivit a zadejte Codeswing. Klikněte na _modré tlačítko instalace_ na rozšířeném panelu aktivit nebo použijte tlačítko instalace, které se objeví v kódové oblasti, jakmile vyberete rozšíření pro načtení dalších informací. Ihned po instalaci rozšíření si všimněte změn ve vašem projektu 😃. ![Instalace rozšíření](../../../../8-code-editor/images/install-extension.gif) Toto uvidíte na obrazovce po instalaci rozšíření. ![Rozšíření Codeswing v akci](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.cs.png) Pokud jste spokojeni se změnami, které jste provedli, najděte složku `Changes` a klikněte na tlačítko `+`, abyste změny připravili. Zadejte zprávu ke commitu _(popis změny, kterou jste provedli v projektu)_ a potvrďte změny kliknutím na `check`. Jakmile dokončíte práci na projektu, vyberte ikonu hamburgerového menu v levém horním rohu a vraťte se do repozitáře na GitHubu. Gratulujeme 🎉 Právě jste vytvořili webovou stránku svého životopisu pomocí vscode.dev během několika kroků. ## 🚀 Výzva Otevřete vzdálený repozitář, ke kterému máte oprávnění provádět změny, a aktualizujte některé soubory. Poté zkuste vytvořit novou větev se svými změnami a vytvořte Pull Request. ## Recenze a samostudium Přečtěte si více o [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) a některých jeho dalších funkcích. --- **Prohlášení**: Tento dokument byl přeložen pomocí služby pro automatický překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.