HTML ve CSS ile Basit Bir Portföy Sitesi Nasıl Oluşturulur?
HTML ve CSS ile basit bir portföy sitesi oluşturmak için temel dosya yapısını hazırlayın, HTML yapısını oluşturun ve CSS ile tasarımı geliştirin. Mobil uyumluluk ve yayınlama adımlarını unutmayın.
5 ay önce
Merhaba arkadaşlar, bugün sizlere HTML ve CSS ile basit bir portföy sitesi oluşturma sürecini adım adım anlatacağım. Kendi portföy sitenizi hazırlamak, yeteneklerinizi sergilemek için harika bir fırsattır. Üstelik temel düzeyde HTML ve CSS bilgisi ile bu projeyi kolayca tamamlayabilirsiniz. Hadi başlayalım!
1. Proje Dosya Yapısını Hazırlayın
Bir klasör oluşturun ve içine “index.html”, “style.css” gibi dosyalar ekleyin. Ayrıca, resimler ve diğer dosyalar için ayrı bir klasör oluşturabilirsiniz.
2. HTML Yapısını Oluşturun
HTML dosyanızda temel yapıyı oluşturun. Örneğin, bir başlık, portföy projelerinizin listesi ve iletişim bilgileriniz için bölümler ekleyebilirsiniz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portföy</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Merhaba! Benim Portföyüm</h1>
</header>
<main>
<section id="projeler">
<h2>Projelerim</h2>
<p>Projelerimi aşağıda bulabilirsiniz.</p>
</section>
<section id="iletisim">
<h2>İletişim</h2>
<p>E-posta: ornek@mail.com</p>
</section>
</main>
</body>
</html>
3. CSS ile Tasarımı Geliştirin
Tasarımınızı güzelleştirmek için CSS dosyanızda renkler, yazı tipleri ve düzenlemeler yapabilirsiniz. İşte temel bir örnek:
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #333;
color: #fff;
padding: 10px 20px;
text-align: center;
}
main {
padding: 20px;
}
h2 {
color: #333;
}
4. Mobil Uyumluluğa Dikkat Edin
CSS’de medya sorguları ekleyerek sitenizin mobil cihazlarda düzgün görünmesini sağlayabilirsiniz. Örneğin:
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
5. Projelerinizi Test Edin ve Yayınlayın
Portföy sitenizi tarayıcıda görüntüleyerek kontrol edin. Ardından GitHub Pages veya başka bir ücretsiz hosting hizmeti ile yayınlayabilirsiniz.
Bu adımları takip ederek, kendi basit portföy sitenizi oluşturabilirsiniz. Kendi stilinizi ekleyerek projeyi daha kişisel hale getirebilirsiniz.
Bir sonraki yazımda görüşmek üzere!
Henüz yorum yapılmadı, ilk yorumu sen yapmak ister misin?