11 KiB
VSCode.dev kullanarak bir özgeçmiş web sitesi oluşturun
Bir işe alım uzmanının özgeçmişinizi istemesi ve sizin ona bir URL göndermeniz ne kadar havalı olurdu? 😎
Amaçlar
Bu ödevi tamamladıktan sonra şunları öğreneceksiniz:
- Özgeçmişinizi sergilemek için bir web sitesi oluşturma
Ön Koşullar
- Bir GitHub hesabı. GitHub adresine gidin ve henüz bir hesabınız yoksa bir hesap oluşturun.
Adımlar
Adım 1: Yeni bir GitHub deposu oluşturun ve ona my-resume adını verin.
Adım 2: Depoda bir index.html dosyası oluşturun. github.com üzerinde en az bir dosya ekleyeceğiz çünkü vscode.dev üzerinde boş bir depo açamazsınız.
Yeni bir dosya oluşturma bağlantısına tıklayın, index.html adını yazın ve Yeni dosyayı kaydet düğmesini seçin.
Adım 3: VSCode.dev adresini açın ve Uzaktan Depo Aç düğmesini seçin.
Özgeçmiş siteniz için yeni oluşturduğunuz deponun URL'sini kopyalayın ve giriş kutusuna yapıştırın:
your-username kısmını GitHub kullanıcı adınızla değiştirin.
https://github.com/your-username/my-resume
✅ Başarılı olursa, projenizi ve metin editöründe tarayıcıda açılan index.html dosyasını göreceksiniz.
Adım 4: index.html dosyasını açın, aşağıdaki kodu kod alanınıza yapıştırın ve kaydedin.
Özgeçmiş web sitenizin içeriğinden sorumlu HTML kodu.
<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>Adınız Buraya Gelecek!</title>
</head>
<body>
<header id="header">
<!-- özgeçmiş başlığı, adınız ve unvanınız -->
<h1>Adınız Buraya Gelecek!</h1>
<hr>
Rolünüz!
<hr>
</header>
<main>
<article id="mainLeft">
<section>
<h2>İLETİŞİM</h2>
<!-- sosyal medya dahil iletişim bilgileri -->
<p>
<i class="fa fa-envelope" aria-hidden="true"></i>
<a href="mailto:username@domain.top-level domain">E-posta adresinizi buraya yazın</a>
</p>
<p>
<i class="fab fa-github" aria-hidden="true"></i>
<a href="github.com/yourGitHubUsername">Kullanıcı adınızı buraya yazın!</a>
</p>
<p>
<i class="fab fa-linkedin" aria-hidden="true"></i>
<a href="linkedin.com/yourLinkedInUsername">Kullanıcı adınızı buraya yazın!</a>
</p>
</section>
<section>
<h2>BECERİLER</h2>
<!-- becerileriniz -->
<ul>
<li>Beceri 1!</li>
<li>Beceri 2!</li>
<li>Beceri 3!</li>
<li>Beceri 4!</li>
</ul>
</section>
<section>
<h2>EĞİTİM</h2>
<!-- eğitim bilgileriniz -->
<h3>Kursunuzu buraya yazın!</h3>
<p>
Kurumunuzu buraya yazın!
</p>
<p>
Başlangıç - Bitiş Tarihi
</p>
</section>
</article>
<article id="mainRight">
<section>
<h2>HAKKINDA</h2>
<!-- kendiniz hakkında -->
<p>Kendiniz hakkında kısa bir yazı yazın!</p>
</section>
<section>
<h2>İŞ DENEYİMİ</h2>
<!-- iş deneyimleriniz -->
<h3>İş Unvanı</h3>
<p>
Kurum Adı Buraya Gelecek | Başlangıç Ayı – Bitiş Ayı
</p>
<ul>
<li>Görev 1 - Ne yaptığınızı yazın!</li>
<li>Görev 2 - Ne yaptığınızı yazın!</li>
<li>Katkılarınızın sonuçlarını/etkisini yazın</li>
</ul>
<h3>İş Unvanı 2</h3>
<p>
Kurum Adı Buraya Gelecek | Başlangıç Ayı – Bitiş Ayı
</p>
<ul>
<li>Görev 1 - Ne yaptığınızı yazın!</li>
<li>Görev 2 - Ne yaptığınızı yazın!</li>
<li>Katkılarınızın sonuçlarını/etkisini yazın</li>
</ul>
</section>
</article>
</main>
</body>
</html>
HTML kodundaki yer tutucu metni değiştirerek özgeçmiş bilgilerinizi ekleyin.
Adım 5: My-Resume klasörünün üzerine gelin, Yeni Dosya ... simgesine tıklayın ve projenizde 2 yeni dosya oluşturun: style.css ve codeswing.json dosyaları.
Adım 6: style.css dosyasını açın, aşağıdaki kodu yapıştırın ve kaydedin.
Sitenin düzenini biçimlendirmek için CSS kodu.
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;
}
Adım 6: codeswing.json dosyasını açın, aşağıdaki kodu yapıştırın ve kaydedin.
{
"scripts": [],
"styles": []
}
Adım 7: Özgeçmiş web sitesini kod alanında görselleştirmek için Codeswing uzantısını yükleyin.
Etkinlik çubuğundaki Uzantılar simgesine tıklayın ve Codeswing yazın. Uzantıyı yüklemek için genişletilmiş etkinlik çubuğundaki mavi yükleme düğmesine tıklayın veya uzantıyı seçtiğinizde kod alanında görünen yükleme düğmesini kullanın. Uzantıyı yükledikten hemen sonra, projenizdeki değişiklikleri kod alanında gözlemleyin 😃
Uzantıyı yükledikten sonra ekranınızda göreceğiniz şey budur.
Yaptığınız değişikliklerden memnunsanız, Değişiklikler klasörünün üzerine gelin ve değişiklikleri aşamalandırmak için + düğmesine tıklayın.
Bir commit mesajı yazın (Projede yaptığınız değişikliğin açıklaması) ve değişikliklerinizi onay işaretine tıklayarak kaydedin. Projenizde çalışmayı tamamladıktan sonra, GitHub'daki depoya geri dönmek için sol üstteki hamburger menü simgesini seçin.
Tebrikler 🎉 Sadece birkaç adımda vscode.dev kullanarak özgeçmiş web sitenizi oluşturdunuz.
🚀 Meydan Okuma
Değişiklik yapma izniniz olan bir uzak depo açın ve bazı dosyaları güncelleyin. Ardından, değişikliklerinizle yeni bir dal oluşturmayı ve bir Pull Request yapmayı deneyin.
İnceleme ve Kendi Kendine Çalışma
VSCode.dev ve diğer özellikleri hakkında daha fazla bilgi edinin.
Feragatname:
Bu belge, Co-op Translator adlı yapay zeka çeviri hizmeti kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.