# Направите веб-сајт за резиме користећи vscode.dev _Колико би било кул да вас регрутер пита за ваш резиме, а ви му пошаљете URL?_ 😎 ## Циљеви Након овог задатка, научићете како да: - Направите веб-сајт за приказивање вашег резимеа ### Предуслови 1. Налог на GitHub-у. Идите на [GitHub](https://github.com/) и направите налог ако га већ немате. ## Кораци **Корак 1:** Направите нови GitHub репозиторијум и дајте му име `my-resume` **Корак 2:** Направите `index.html` датотеку у вашем репозиторијуму. Додаћемо бар једну датотеку док смо још на github.com јер не можете отворити празан репозиторијум на vscode.dev. Кликните на линк `creating a new file`, унесите име `index.html` и изаберите дугме `Commit new file`. ![Направите нову датотеку на github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.sr.png) **Корак 3:** Отворите [VSCode.dev](https://vscode.dev) и изаберите дугме `Open Remote Repository`. Копирајте URL репозиторијума који сте управо направили за ваш сајт резимеа и налепите га у поље за унос: _Замените `your-username` са вашим корисничким именом на GitHub-у._ ``` https://github.com/your-username/my-resume ``` ✅ Ако је успешно, видећете ваш пројекат и датотеку index.html отворену у текст едитору у прегледачу. ![Направите нову датотеку](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.sr.png) **Корак 4:** Отворите датотеку `index.html`, налепите код испод у ваш кодни простор и сачувајте.
HTML код одговоран за садржај вашег веб-сајта резимеа. Ваше име овде!

О МЕНИ

Унесите кратак опис о себи!

РАДНО ИСКУСТВО

Назив посла

Назив организације овде | Почетни месец – Завршни месец

  • Задатак 1 - Унесите шта сте радили!
  • Задатак 2 - Унесите шта сте радили!
  • Унесите резултате/утицај вашег доприноса

Назив посла 2

Назив организације овде | Почетни месец – Завршни месец

  • Задатак 1 - Унесите шта сте радили!
  • Задатак 2 - Унесите шта сте радили!
  • Унесите резултате/утицај вашег доприноса
Додајте детаље вашег резимеа да замените _текст за попуњавање_ у HTML коду. **Корак 5:** Пређите мишем преко фасцикле My-Resume, кликните на икону `New File ...` и направите 2 нове датотеке у вашем пројекту: `style.css` и `codeswing.json`. **Корак 6:** Отворите датотеку `style.css`, налепите код испод и сачувајте.
CSS код за форматирање изгледа сајта. 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: 1ем; } 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; }
**Корак 6:** Отворите датотеку `codeswing.json`, налепите код испод и сачувајте. { "scripts": [], "styles": [] } **Корак 7:** Инсталирајте `Codeswing extension` да бисте визуализовали веб-сајт резимеа у кодном простору. Кликните на икону _`Extensions`_ на траци активности и укуцајте Codeswing. Или кликните на _плаво дугме за инсталацију_ на проширеној траци активности да бисте инсталирали или користите дугме за инсталацију које се појављује у кодном простору када изаберете екстензију за учитавање додатних информација. Одмах након инсталације екстензије, приметите промене у вашем кодном простору 😃. ![Инсталирајте екстензије](../../../../8-code-editor/images/install-extension.gif) Ово је оно што ћете видети на вашем екрану након инсталације екстензије. ![Codeswing екстензија у акцији](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.sr.png) Ако сте задовољни променама које сте направили, пређите мишем преко фасцикле `Changes` и кликните на дугме `+` да бисте поставили промене. Унесите поруку за commit _(Опис промене коју сте направили у пројекту)_ и commit-ујте ваше промене кликом на `check`. Када завршите са радом на вашем пројекту, изаберите икону менија са три линије у горњем левом углу да бисте се вратили у репозиторијум на GitHub-у. Честитамо 🎉 Управо сте направили ваш веб-сајт резимеа користећи vscode.dev у неколико корака. ## 🚀 Изазов Отворите удаљени репозиторијум за који имате дозволе за измене и ажурирајте неке датотеке. Затим покушајте да направите нову грану са вашим изменама и направите Pull Request. ## Преглед и самостално учење Прочитајте више о [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) и неким његовим другим функцијама. --- **Одрицање од одговорности**: Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције [Co-op Translator](https://github.com/Azure/co-op-translator). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.