11 KiB
Készíts egy önéletrajz-weboldalt a vscode.dev segítségével
Milyen menő lenne, ha egy toborzó elkérné az önéletrajzodat, és te egy URL-t küldenél neki? 😎
Célkitűzések
E feladat elvégzése után megtanulod, hogyan:
- Hozz létre egy weboldalt, amely bemutatja az önéletrajzodat
Előfeltételek
- Egy GitHub-fiók. Látogass el a GitHub oldalra, és hozz létre egy fiókot, ha még nincs.
Lépések
1. lépés: Hozz létre egy új GitHub-tárházat, és nevezd el my-resume néven.
2. lépés: Hozz létre egy index.html fájlt a tárházadban. Legalább egy fájlt hozzá kell adnunk a github.com-on, mert üres tárházat nem lehet megnyitni a vscode.dev-en.
Kattints a creating a new file linkre, írd be a fájl nevét index.html, majd válaszd a Commit new file gombot.
3. lépés: Nyisd meg a VSCode.dev oldalt, és válaszd az Open Remote Repository gombot.
Másold ki az éppen létrehozott tárház URL-jét, és illeszd be a bemeneti mezőbe:
Cseréld ki a your-username részt a GitHub-felhasználónevedre.
https://github.com/your-username/my-resume
✅ Ha sikeres volt, látni fogod a projektedet és az index.html fájlt a böngésző szövegszerkesztőjében.
4. lépés: Nyisd meg az index.html fájlt, illeszd be az alábbi kódot a kódrészbe, majd mentsd el.
HTML kód az önéletrajz-weboldalad tartalmához.
<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>A neved ide kerül!</title>
</head>
<body>
<header id="header">
<!-- önéletrajz fejléc a neveddel és a pozícióddal -->
<h1>A neved ide kerül!</h1>
<hr>
A szereped!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>KAPCSOLAT</h2>
<!-- elérhetőségek, beleértve a közösségi médiát -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">Írd ide az e-mail címedet</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Írd ide a felhasználónevedet!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Írd ide a felhasználónevedet!</a>
</p>
</section>
<section>
<h2>KÉSZSÉGEK</h2>
<!-- a készségeid -->
<ul>
<li>Készség 1!</li>
<li>Készség 2!</li>
<li>Készség 3!</li>
<li>Készség 4!</li>
</ul>
</section>
<section>
<h2>OKTATÁS</h2>
<!-- az oktatásod -->
<h3>Írd ide a kurzusodat!</h3>
<p>
Írd ide az intézményedet!
</p>
<p>
Kezdési - Befejezési dátum
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>RÓLAM</h2>
<!-- rólad -->
<p>Írj egy rövid bemutatkozást magadról!</p>
</section>
<section>
<h2>MUNKAHELYI TAPASZTALAT</h2>
<!-- a munkatapasztalatod -->
<h3>Munkakör</h3>
<p>
Szervezet neve ide kerül | Kezdési hónap – Befejezési hónap
</p>
<ul>
<li>Feladat 1 - Írd le, mit csináltál!</li>
<li>Feladat 2 - Írd le, mit csináltál!</li>
<li>Írd le a hozzájárulásod eredményeit/hatását</li>
</ul>
<h3>Munkakör 2</h3>
<p>
Szervezet neve ide kerül | Kezdési hónap – Befejezési hónap
</p>
<ul>
<li>Feladat 1 - Írd le, mit csináltál!</li>
<li>Feladat 2 - Írd le, mit csináltál!</li>
<li>Írd le a hozzájárulásod eredményeit/hatását</li>
</ul>
</section>
</article>
</main>
</body>
</html>
Cseréld ki az ideiglenes szöveget az önéletrajzod adataira a HTML-kódban.
5. lépés: Vidd az egeret a My-Resume mappa fölé, kattints az Új fájl ... ikonra, és hozz létre 2 új fájlt a projektedben: style.css és codeswing.json.
6. lépés: Nyisd meg a style.css fájlt, illeszd be az alábbi kódot, majd mentsd el.
CSS kód a weboldal elrendezésének formázásához.
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. lépés: Nyisd meg a codeswing.json fájlt, illeszd be az alábbi kódot, majd mentsd el.
{
"scripts": [],
"styles": []
}
7. lépés: Telepítsd a Codeswing bővítményt, hogy megtekinthesd az önéletrajz-weboldalt a kódrészben.
Kattints az Extensions ikonra az aktivitási sávon, és írd be, hogy Codeswing. Kattints a kék telepítés gombra az aktivitási sáv kibővített részén, vagy használd a telepítés gombot, amely a kódrészben jelenik meg, miután kiválasztottad a bővítményt. A bővítmény telepítése után figyeld meg a projektedben történt változásokat 😃
Ezt fogod látni a képernyődön, miután telepítetted a bővítményt.
Ha elégedett vagy a változtatásokkal, vidd az egeret a Changes mappa fölé, és kattints a + gombra a változtatások színpadra állításához.
Írj be egy commit üzenetet (A projektben végrehajtott változtatások leírása), majd kattints a pipa gombra a változtatások elkötelezéséhez. Ha végeztél a projekttel, válaszd a bal felső sarokban lévő hamburger menü ikont, hogy visszatérj a GitHub-tárházhoz.
Gratulálok 🎉 Most néhány lépésben létrehoztad az önéletrajz-weboldaladat a vscode.dev segítségével.
🚀 Kihívás
Nyiss meg egy távoli tárházat, amelyhez van jogosultságod változtatásokat végrehajtani, és frissíts néhány fájlt. Ezután próbálj meg létrehozni egy új ágat a változtatásaiddal, és készíts egy Pull Requestet.
Áttekintés és önálló tanulás
Olvass többet a VSCode.dev oldalról és annak egyéb funkcióiról.
Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás, a Co-op Translator segítségével került lefordításra. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.