# Направите веб-сајт са биографијом користећи 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: 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; }
**Корак 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` и кликните на дугме `+` да бисте означили промене. Укуцајте поруку коментара _(Опис промене коју сте направили у пројекту)_ и потврдите ваше промене кликом на `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). Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.