10 KiB
Luo ansioluettelosivusto käyttämällä vscode.dev:ia
Kuinka siistiä olisi, jos rekrytoija pyytäisi ansioluetteloasi ja voisit lähettää heille url-osoitteen? 😎
Tavoitteet
Tämän tehtävän jälkeen opit:
- Luomaan verkkosivuston esitelläksesi ansioluettelosi
Esitiedot
- GitHub-tili. Siirry GitHubiin ja luo tili, jos sinulla ei vielä ole sellaista.
Vaiheet
Vaihe 1: Luo uusi GitHub-repositorio ja anna sille nimeksi my-resume
Vaihe 2: Luo index.html-tiedosto repositoriossasi. Lisäämme vähintään yhden tiedoston suoraan github.com:issa, koska tyhjää repositoriota ei voi avata vscode.dev:issä.
Klikkaa linkkiä creating a new file, kirjoita nimeksi index.html ja valitse Commit new file -painike.
Vaihe 3: Avaa VSCode.dev ja valitse Open Remote Repository -painike.
Kopioi juuri luomasi repositorion url-osoite ja liitä se syöttökenttään:
Korvaa your-username GitHub-käyttäjänimelläsi.
https://github.com/your-username/my-resume
✅ Jos onnistut, näet projektisi ja index.html-tiedoston avautuvan selaimen tekstieditorissa.
Vaihe 4: Avaa index.html-tiedosto, liitä alla oleva koodi koodialueelle ja tallenna.
HTML-koodi, joka vastaa ansioluettelosivustosi sisällöstä.
<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>Your Name Goes Here!</title>
</head>
<body>
<header id="header">
<!-- ansioluettelon otsikko, jossa on nimesi ja tittelisi -->
<h1>Your Name Goes Here!</h1>
<hr>
Your Role!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>YHTEYSTIEDOT</h2>
<!-- yhteystiedot, mukaan lukien sosiaalinen media -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">Kirjoita sähköpostiosoitteesi tähän</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Kirjoita käyttäjänimesi tähän!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Kirjoita käyttäjänimesi tähän!</a>
</p>
</section>
<section>
<h2>TAIDOT</h2>
<!-- taitosi -->
<ul>
<li>Taito 1!</li>
<li>Taito 2!</li>
<li>Taito 3!</li>
<li>Taito 4!</li>
</ul>
</section>
<section>
<h2>KOULUTUS</h2>
<!-- koulutuksesi -->
<h3>Kirjoita kurssisi tähän!</h3>
<p>
Kirjoita oppilaitoksesi tähän!
</p>
<p>
Aloitus- ja päättymispäivämäärä
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>TIETOA MINUSTA</h2>
<!-- tietoa sinusta -->
<p>Kirjoita lyhyt kuvaus itsestäsi!</p>
</section>
<section>
<h2>TYÖKOKEMUS</h2>
<!-- työkokemuksesi -->
<h3>Työnimike</h3>
<p>
Organisaation nimi | Aloituskuukausi – Päättymiskuukausi
</p>
<ul>
<li>Tehtävä 1 - Kirjoita, mitä teit!</li>
<li>Tehtävä 2 - Kirjoita, mitä teit!</li>
<li>Kirjoita panoksesi tulokset/vaikutukset</li>
</ul>
<h3>Työnimike 2</h3>
<p>
Organisaation nimi | Aloituskuukausi – Päättymiskuukausi
</p>
<ul>
<li>Tehtävä 1 - Kirjoita, mitä teit!</li>
<li>Tehtävä 2 - Kirjoita, mitä teit!</li>
<li>Kirjoita panoksesi tulokset/vaikutukset</li>
</ul>
</section>
</article>
</main>
</body>
</html>
Korvaa paikkamerkkiteksti ansioluettelosi tiedoilla HTML-koodissa.
Vaihe 5: Vie hiiri My-Resume-kansion päälle, klikkaa New File ... -ikonia ja luo projektiisi 2 uutta tiedostoa: style.css ja codeswing.json.
Vaihe 6: Avaa style.css-tiedosto, liitä alla oleva koodi ja tallenna.
CSS-koodi sivuston ulkoasun muotoiluun.
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;
}
Vaihe 6: Avaa codeswing.json-tiedosto, liitä alla oleva koodi ja tallenna.
{
"scripts": [],
"styles": []
}
Vaihe 7: Asenna Codeswing-laajennus nähdäksesi ansioluettelosivustosi koodialueella.
Klikkaa Extensions -ikonia toimintopalkissa ja kirjoita Codeswing. Klikkaa joko sinistä asennuspainiketta laajennetussa toimintopalkissa tai käytä koodialueella näkyvää asennuspainiketta, kun valitset laajennuksen lisätietojen lataamiseksi. Heti laajennuksen asentamisen jälkeen huomaat muutoksia projektissasi 😃
Tältä projektisi näyttää näytölläsi laajennuksen asentamisen jälkeen.
Jos olet tyytyväinen tekemiisi muutoksiin, vie hiiri Changes-kansion päälle ja klikkaa +-painiketta lisätäksesi muutokset vaiheeseen.
Kirjoita commit-viesti (kuvaus tekemästäsi muutoksesta projektiin) ja tee commit klikkaamalla check-painiketta. Kun olet valmis projektisi kanssa, valitse vasemman yläkulman hampurilaisvalikkoikoni palataksesi GitHub-repositorioon.
Onnittelut 🎉 Olet juuri luonut ansioluettelosivuston käyttämällä vscode.dev:ia muutamassa vaiheessa.
🚀 Haaste
Avaa etärepositorio, johon sinulla on muokkausoikeudet, ja päivitä joitakin tiedostoja. Seuraavaksi kokeile luoda uusi haara muutoksillasi ja tee Pull Request.
Kertaus ja itseopiskelu
Lue lisää VSCode.dev:istä ja sen muista ominaisuuksista.
Vastuuvapauslauseke:
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua Co-op Translator. Vaikka pyrimme tarkkuuteen, huomioithan, että automaattiset käännökset voivat sisältää virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä tulee pitää ensisijaisena lähteenä. Kriittisen tiedon osalta suositellaan ammattimaista ihmiskääntämistä. Emme ole vastuussa väärinkäsityksistä tai virhetulkinnoista, jotka johtuvat tämän käännöksen käytöstä.