10 KiB
Vytvorenie webovej stránky životopisu pomocou vscode.dev
Aké skvelé by bolo, keby vás personalista požiadal o váš životopis a vy by ste mu poslali URL? 😎
Ciele
Po tomto zadaniu sa naučíte:
- Vytvoriť webovú stránku na prezentáciu vášho životopisu
Predpoklady
- Účet na GitHub. Prejdite na GitHub a vytvorte si účet, ak ho ešte nemáte.
Kroky
Krok 1: Vytvorte nový GitHub repozitár a pomenujte ho my-resume.
Krok 2: Vytvorte súbor index.html vo vašom repozitári. Pridáme aspoň jeden súbor priamo na github.com, pretože prázdny repozitár nie je možné otvoriť vo vscode.dev.
Kliknite na odkaz creating a new file, zadajte názov index.html a vyberte tlačidlo Commit new file.
Krok 3: Otvorte VSCode.dev a vyberte tlačidlo Open Remote Repository.
Skopírujte URL adresu repozitára, ktorý ste práve vytvorili pre svoju stránku životopisu, a vložte ju do vstupného poľa:
Nahraďte your-username svojím GitHub používateľským menom.
https://github.com/your-username/my-resume
✅ Ak je to úspešné, uvidíte svoj projekt a súbor index.html otvorený v textovom editore v prehliadači.
Krok 4: Otvorte súbor index.html, vložte do oblasti kódu nižšie uvedený kód a uložte ho.
HTML kód zodpovedný za obsah vašej webovej stránky životopisu.
<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>Vaše meno sem!</title>
</head>
<body>
<header id="header">
<!-- hlavička životopisu s vaším menom a titulom -->
<h1>Vaše meno sem!</h1>
<hr>
Vaša rola!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>KONTAKT</h2>
<!-- kontaktné informácie vrátane sociálnych sietí -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">Napíšte sem svoj email</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Napíšte sem svoje používateľské meno!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Napíšte sem svoje používateľské meno!</a>
</p>
</section>
<section>
<h2>ZRUČNOSTI</h2>
<!-- vaše zručnosti -->
<ul>
<li>Zručnosť 1!</li>
<li>Zručnosť 2!</li>
<li>Zručnosť 3!</li>
<li>Zručnosť 4!</li>
</ul>
</section>
<section>
<h2>VZDELANIE</h2>
<!-- vaše vzdelanie -->
<h3>Napíšte sem svoj kurz!</h3>
<p>
Napíšte sem svoju inštitúciu!
</p>
<p>
Začiatok - Koniec
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>O MNE</h2>
<!-- o vás -->
<p>Napíšte sem niečo o sebe!</p>
</section>
<section>
<h2>PRACOVNÉ SKÚSENOSTI</h2>
<!-- vaše pracovné skúsenosti -->
<h3>Názov pozície</h3>
<p>
Názov organizácie sem | Mesiac začiatku – Mesiac konca
</p>
<ul>
<li>Úloha 1 - Napíšte, čo ste robili!</li>
<li>Úloha 2 - Napíšte, čo ste robili!</li>
<li>Napíšte výsledky/dopad vášho príspevku</li>
</ul>
<h3>Názov pozície 2</h3>
<p>
Názov organizácie sem | Mesiac začiatku – Mesiac konca
</p>
<ul>
<li>Úloha 1 - Napíšte, čo ste robili!</li>
<li>Úloha 2 - Napíšte, čo ste robili!</li>
<li>Napíšte výsledky/dopad vášho príspevku</li>
</ul>
</section>
</article>
</main>
</body>
</html>
Pridajte detaily svojho životopisu a nahraďte text zástupcu v HTML kóde.
Krok 5: Kliknite na priečinok My-Resume, kliknite na ikonu New File ... a vytvorte 2 nové súbory vo vašom projekte: style.css a codeswing.json.
Krok 6: Otvorte súbor style.css, vložte do oblasti kódu nižšie uvedený kód a uložte ho.
CSS kód na formátovanie rozloženia stránky.
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;
}
Krok 6: Otvorte súbor codeswing.json, vložte do oblasti kódu nižšie uvedený kód a uložte ho.
{
"scripts": [],
"styles": []
}
Krok 7: Nainštalujte rozšírenie Codeswing, aby ste mohli vizualizovať webovú stránku životopisu v oblasti kódu.
Kliknite na ikonu Extensions na paneli aktivít a zadajte Codeswing. Buď kliknite na modré tlačidlo inštalovať na rozšírenom paneli aktivít, aby ste ho nainštalovali, alebo použite tlačidlo inštalovať, ktoré sa zobrazí v oblasti kódu po výbere rozšírenia na načítanie ďalších informácií. Ihneď po inštalácii rozšírenia si všimnite zmeny vo vašom projekte v oblasti kódu 😃.
Toto uvidíte na obrazovke po inštalácii rozšírenia.
Ak ste spokojní so zmenami, ktoré ste vykonali, kliknite na priečinok Changes a kliknite na tlačidlo +, aby ste zmeny pripravili.
Zadajte správu commitu (Popis zmeny, ktorú ste vykonali v projekte) a potvrďte svoje zmeny kliknutím na check. Po dokončení práce na projekte vyberte ikonu hamburgerového menu v ľavom hornom rohu, aby ste sa vrátili do repozitára na GitHub.
Gratulujeme 🎉 Práve ste vytvorili webovú stránku svojho životopisu pomocou vscode.dev v niekoľkých krokoch.
🚀 Výzva
Otvorte vzdialený repozitár, v ktorom máte povolenie vykonávať zmeny, a aktualizujte niektoré súbory. Potom skúste vytvoriť novú vetvu so svojimi zmenami a vytvorte Pull Request.
Recenzia a samostatné štúdium
Prečítajte si viac o VSCode.dev a niektorých jeho ďalších funkciách.
Upozornenie:
Tento dokument bol preložený pomocou služby na automatický preklad Co-op Translator. Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za záväzný zdroj. Pre dôležité informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.