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: 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. Или кликните на плаво дугме за инсталацију на проширеној траци активности да бисте инсталирали или користите дугме за инсталацију које се појављује у кодном простору када изаберете екстензију за учитавање додатних информација. Одмах након инсталације екстензије, приметите промене у вашем кодном простору 😃.
Ово је оно што ћете видети на вашем екрану након инсталације екстензије.
Ако сте задовољни променама које сте направили, пређите мишем преко фасцикле Changes и кликните на дугме + да бисте поставили промене.
Унесите поруку за commit (Опис промене коју сте направили у пројекту) и commit-ујте ваше промене кликом на check. Када завршите са радом на вашем пројекту, изаберите икону менија са три линије у горњем левом углу да бисте се вратили у репозиторијум на GitHub-у.
Честитамо 🎉 Управо сте направили ваш веб-сајт резимеа користећи vscode.dev у неколико корака.
🚀 Изазов
Отворите удаљени репозиторијум за који имате дозволе за измене и ажурирајте неке датотеке. Затим покушајте да направите нову грану са вашим изменама и направите Pull Request.
Преглед и самостално учење
Прочитајте више о VSCode.dev и неким његовим другим функцијама.
Одрицање од одговорности:
Овај документ је преведен коришћењем услуге за превођење помоћу вештачке интелигенције Co-op Translator. Иако се трудимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на његовом изворном језику треба сматрати ауторитативним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.