# Създайте уебсайт за автобиография с помощта на vscode.dev _Колко готино би било, ако рекрутър поиска вашата автобиография и вие му изпратите линк?_ 😎 ## Цели След това задание ще научите как да: - Създадете уебсайт, който да представя вашата автобиография ### Предварителни изисквания 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.bg.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.bg.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`, за да визуализирате уебсайта с автобиография в текстовата област. Кликнете върху иконата _`Extensions`_ в лентата с инструменти и въведете Codeswing. Или кликнете върху _синия бутон за инсталиране_ в разширената лента с инструменти, за да инсталирате, или използвайте бутона за инсталиране, който се появява в текстовата област, след като изберете разширението, за да заредите допълнителна информация. Веднага след инсталирането на разширението, наблюдавайте промените във вашия проект 😃. ![Инсталиране на разширения](../../../../8-code-editor/images/install-extension.gif) Това е, което ще видите на екрана си след инсталирането на разширението. ![Codeswing разширение в действие](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.bg.png) Ако сте доволни от направените промени, задръжте курсора върху папката `Changes` и кликнете върху бутона `+`, за да подготвите промените. Въведете съобщение за commit _(Описание на направените промени в проекта)_ и запазете промените, като кликнете върху `check`. След като приключите с работата по проекта, изберете иконата на менюто (хамбургер) в горния ляв ъгъл, за да се върнете към хранилището в GitHub. Поздравления 🎉 Току-що създадохте уебсайт за автобиография с помощта на vscode.dev само в няколко стъпки. ## 🚀 Предизвикателство Отворете отдалечено хранилище, за което имате разрешение да правите промени, и актуализирайте някои файлове. След това опитайте да създадете нов клон с вашите промени и направете Pull Request. ## Преглед и самостоятелно обучение Прочетете повече за [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) и някои от другите му функции. --- **Отказ от отговорност**: Този документ е преведен с помощта на AI услуга за превод [Co-op Translator](https://github.com/Azure/co-op-translator). Въпреки че се стремим към точност, моля, имайте предвид, че автоматичните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия изходен език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален превод от човек. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.