13 KiB
Направите веб-сајт са биографијом користећи vscode.dev
Колико би било кул да вас регрутер замоли за вашу биографију, а ви му пошаљете URL? 😎
Циљеви
Након овог задатка, научићете како да:
- Направите веб-сајт за приказивање ваше биографије
Предуслови
- Налог на GitHub-у. Идите на GitHub и направите налог ако га већ немате.
Кораци
Корак 1: Направите нови GitHub репозиторијум и дајте му име my-resume
Корак 2: Направите index.html датотеку у вашем репозиторијуму. Додаћемо бар једну датотеку док смо још на github.com јер не можете отворити празан репозиторијум на vscode.dev.
Кликните на линк creating a new file, укуцајте име index.html и изаберите дугме Commit new file.
Корак 3: Отворите VSCode.dev и изаберите дугме Open Remote Repository.
Копирајте URL репозиторијума који сте управо направили за ваш сајт са биографијом и налепите га у поље за унос:
Замените your-username са вашим GitHub корисничким именом.
https://github.com/your-username/my-resume
✅ Ако је успешно, видећете ваш пројекат и датотеку index.html отворену у текст едитору у претраживачу.
Корак 4: Отворите датотеку index.html, налепите код испод у ваш кодни простор и сачувајте.
HTML код одговоран за садржај вашег веб-сајта са биографијом.
<html>
<head>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Ваше име овде!</title>
</head>
<body>
<header id="header">
<!-- заглавље биографије са вашим именом и титулом -->
<h1>Ваше име овде!</h1>
<hr>
Ваша улога!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>КОНТАКТ</h2>
<!-- контакт информације укључујући друштвене мреже -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">Упишите ваш емаил овде</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Упишите ваше корисничко име овде!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Упишите ваше корисничко име овде!</a>
</p>
</section>
<section>
<h2>ВЕШТИНЕ</h2>
<!-- ваше вештине -->
<ul>
<li>Вештина 1!</li>
<li>Вештина 2!</li>
<li>Вештина 3!</li>
<li>Вештина 4!</li>
</ul>
</section>
<section>
<h2>ОБРАЗОВАЊЕ</h2>
<!-- ваше образовање -->
<h3>Упишите ваш курс овде!</h3>
<p>
Упишите вашу институцију овде!
</p>
<p>
Почетак - Крај
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>О МЕНИ</h2>
<!-- о вама -->
<p>Упишите нешто о себи!</p>
</section>
<section>
<h2>РАДНО ИСКУСТВО</h2>
<!-- ваше радно искуство -->
<h3>Назив посла</h3>
<p>
Назив организације овде | Месец почетка – Месец краја
</p>
<ul>
<li>Задатак 1 - Упишите шта сте радили!</li>
<li>Задатак 2 - Упишите шта сте радили!</li>
<li>Упишите резултате/утицај вашег доприноса</li>
</ul>
<h3>Назив посла 2</h3>
<p>
Назив организације овде | Месец почетка – Месец краја
</p>
<ul>
<li>Задатак 1 - Упишите шта сте радили!</li>
<li>Задатак 2 - Упишите шта сте радили!</li>
<li>Упишите резултате/утицај вашег доприноса</li>
</ul>
</section>
</article>
</main>
</body>
</html>
Додајте детаље ваше биографије уместо текста за попуњавање у 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. Или кликните на плаво дугме за инсталацију на проширеној траци активности да бисте инсталирали или користите дугме за инсталацију које се појављује у кодном простору када изаберете екстензију за учитавање додатних информација. Одмах након инсталације екстензије, приметите промене у вашем пројекту 😃.
Ово је оно што ћете видети на вашем екрану након инсталације екстензије.
Ако сте задовољни променама које сте направили, пређите мишем преко фасцикле Changes и кликните на дугме + да бисте означили промене.
Укуцајте поруку коментара (Опис промене коју сте направили у пројекту) и потврдите ваше промене кликом на check. Када завршите са радом на вашем пројекту, изаберите икону менија са три линије у горњем левом углу да бисте се вратили у репозиторијум на GitHub-у.
Честитамо 🎉 Управо сте направили ваш веб-сајт са биографијом користећи vscode.dev у неколико корака.
🚀 Изазов
Отворите удаљени репозиторијум за који имате дозволе за измене и ажурирајте неке датотеке. Затим покушајте да направите нову грану са вашим изменама и направите Pull Request.
Преглед и самостално учење
Прочитајте више о VSCode.dev и неким његовим другим функцијама.
Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције Co-op Translator. Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.