10 KiB
Ustvarite spletno stran z življenjepisom z uporabo vscode.dev
Kako kul bi bilo, če bi vas zaposlovalec prosil za vaš življenjepis, vi pa bi mu poslali kar URL? 😎
Cilji
Po tej nalogi boste znali:
- Ustvariti spletno stran za predstavitev svojega življenjepisa
Predpogoji
- GitHub račun. Obiščite GitHub in ustvarite račun, če ga še nimate.
Koraki
Korak 1: Ustvarite novo GitHub repozitorij in ga poimenujte my-resume
Korak 2: Ustvarite datoteko index.html v svojem repozitoriju. Na github.com bomo dodali vsaj eno datoteko, saj praznega repozitorija ni mogoče odpreti v vscode.dev.
Kliknite povezavo creating a new file, vnesite ime index.html in izberite gumb Commit new file.
Korak 3: Odprite VSCode.dev in izberite gumb Open Remote Repository.
Kopirajte URL repozitorija, ki ste ga pravkar ustvarili za svojo spletno stran z življenjepisom, in ga prilepite v vnosno polje:
Zamenjajte your-username s svojim GitHub uporabniškim imenom.
https://github.com/your-username/my-resume
✅ Če je bilo uspešno, boste videli svoj projekt in datoteko index.html odprto v urejevalniku besedila v brskalniku.
Korak 4: Odprite datoteko index.html, prilepite spodnjo kodo v svoje delovno območje in shranite.
HTML koda, ki je odgovorna za vsebino vaše spletne strani z življenjepisom.
<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 ime gre sem!</title>
</head>
<body>
<header id="header">
<!-- glava življenjepisa z vašim imenom in nazivom -->
<h1>Vaše ime gre sem!</h1>
<hr>
Vaša vloga!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>KONTAKT</h2>
<!-- kontaktni podatki, vključno z družbenimi omrežji -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">Vnesite svoj e-poštni naslov tukaj</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Vnesite svoje uporabniško ime tukaj!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Vnesite svoje uporabniško ime tukaj!</a>
</p>
</section>
<section>
<h2>SPRETNOSTI</h2>
<!-- vaše spretnosti -->
<ul>
<li>Spretnost 1!</li>
<li>Spretnost 2!</li>
<li>Spretnost 3!</li>
<li>Spretnost 4!</li>
</ul>
</section>
<section>
<h2>IZOBRAZBA</h2>
<!-- vaša izobrazba -->
<h3>Vnesite svoj študij tukaj!</h3>
<p>
Vnesite svojo izobraževalno ustanovo tukaj!
</p>
<p>
Začetek - Konec
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>O MENI</h2>
<!-- o vas -->
<p>Vnesite nekaj o sebi!</p>
</section>
<section>
<h2>DELOVNE IZKUŠNJE</h2>
<!-- vaše delovne izkušnje -->
<h3>Delovno mesto</h3>
<p>
Ime organizacije gre sem | Začetni mesec – Končni mesec
</p>
<ul>
<li>Naloga 1 - Napišite, kaj ste počeli!</li>
<li>Naloga 2 - Napišite, kaj ste počeli!</li>
<li>Napišite rezultate/vpliv vašega prispevka</li>
</ul>
<h3>Delovno mesto 2</h3>
<p>
Ime organizacije gre sem | Začetni mesec – Končni mesec
</p>
<ul>
<li>Naloga 1 - Napišite, kaj ste počeli!</li>
<li>Naloga 2 - Napišite, kaj ste počeli!</li>
<li>Napišite rezultate/vpliv vašega prispevka</li>
</ul>
</section>
</article>
</main>
</body>
</html>
Dodajte podrobnosti svojega življenjepisa, da zamenjate nadomestno besedilo v HTML kodi.
Korak 5: Premaknite kazalec na mapo My-Resume, kliknite ikono New File ... in ustvarite 2 novi datoteki v svojem projektu: style.css in codeswing.json.
Korak 6: Odprite datoteko style.css, prilepite spodnjo kodo in shranite.
CSS koda za oblikovanje postavitve strani.
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;
}
Korak 6: Odprite datoteko codeswing.json, prilepite spodnjo kodo in shranite.
{
"scripts": [],
"styles": []
}
Korak 7: Namestite razširitev Codeswing, da si ogledate spletno stran z življenjepisom v delovnem območju.
Kliknite ikono Extensions v orodni vrstici in vnesite Codeswing. Kliknite modri gumb za namestitev na razširjeni orodni vrstici ali uporabite gumb za namestitev, ki se prikaže v delovnem območju, ko izberete razširitev za nalaganje dodatnih informacij. Takoj po namestitvi razširitve opazujte spremembe v svojem projektu 😃.
To je tisto, kar boste videli na zaslonu po namestitvi razširitve.
Če ste zadovoljni s spremembami, ki ste jih naredili, premaknite kazalec na mapo Changes in kliknite gumb +, da pripravite spremembe.
Vnesite sporočilo za commit (Opis spremembe, ki ste jo naredili v projektu) in potrdite svoje spremembe s klikom na check. Ko končate z delom na projektu, izberite ikono menija hamburger v zgornjem levem kotu, da se vrnete v repozitorij na GitHubu.
Čestitke 🎉 Pravkar ste ustvarili svojo spletno stran z življenjepisom z uporabo vscode.dev v nekaj korakih.
🚀 Izziv
Odprite oddaljeni repozitorij, za katerega imate dovoljenja za spreminjanje, in posodobite nekaj datotek. Nato poskusite ustvariti novo vejo s svojimi spremembami in ustvariti Pull Request.
Pregled in samostojno učenje
Preberite več o VSCode.dev in nekaterih njegovih drugih funkcijah.
Omejitev odgovornosti:
Ta dokument je bil preveden z uporabo storitve za strojno prevajanje Co-op Translator. Čeprav si prizadevamo za natančnost, vas prosimo, da se zavedate, da lahko avtomatizirani prevodi vsebujejo napake ali netočnosti. Izvirni dokument v njegovem izvirnem jeziku je treba obravnavati kot avtoritativni vir. Za ključne informacije priporočamo strokovno človeško prevajanje. Ne prevzemamo odgovornosti za morebitna nesporazumevanja ali napačne razlage, ki izhajajo iz uporabe tega prevoda.