Gereksinimler ve Ön Hazırlık
Projeye başlamadan önce bilgisayarınızda modern bir kod düzenleyiciye (IDE) ihtiyacınız vardır. Visual Studio Code, sunduğu eklenti desteği ve kullanım kolaylığı ile bu süreçte en büyük yardımcınız olacaktır. Ayrıca, tarayıcı olarak Google Chrome veya Mozilla Firefox kullanmanız, geliştirici araçları (DevTools) ile anlık hata ayıklama yapmanızı kolaylaştıracaktır.
- Modern bir web tarayıcısı (Chrome, Firefox veya Edge).
- Visual Studio Code (veya benzeri bir metin editörü).
- Temel dosya yapısı bilgisi (index.html ve style.css dosyalarının oluşturulması).
- Tarayıcıda "İncele" (Inspect) aracının nasıl kullanılacağına dair temel bilgi.
Adım Adım HTML İskeletinin Oluşturulması
Web sitenizin temelini HTML (HyperText Markup Language) oluşturur. HTML, içeriğinizi tarayıcıya anlamlı bir şekilde sunmanızı sağlar. İlk adım olarak, sitenizin ana yapısını kuracağız. Semantic (anlamsal) etiketler kullanmak, hem SEO (Arama Motoru Optimizasyonu) hem de erişilebilirlik açısından kritik öneme sahiptir.
Kişisel Portfolyo | Adınız Soyadınız
Yukarıdaki kod bloğu, sayfanızın standart HTML5 yapısını temsil eder. meta viewport etiketi, sitenizin mobil cihazlarda düzgün ölçeklenmesini sağlar. Bu yapı, sitenizin tarayıcı tarafından doğru yorumlanması için zorunludur.
CSS ile Görsel Tasarım ve Düzenleme
HTML iskeletini oluşturduktan sonra, CSS (Cascading Style Sheets) kullanarak sitenize renk, tipografi ve düzen kazandırmanız gerekir. CSS, sitenizin "görünüşünü" belirleyen dildir. Aşağıdaki örnekte, temel bir düzenleme (layout) için Flexbox kullanımını göreceksiniz.
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}Bu CSS kodları, başlık kısmını koyu bir arka planla belirginleştirir ve navigasyon menüsünü yatay olarak hizalar. Flexbox (display: flex), modern web tasarımında öğeleri hizalamak için en verimli yöntemdir.
Responsive Tasarım: Mobil Uyumluluk
Günümüzde kullanıcıların büyük bir kısmı web sitelerine mobil cihazlardan erişmektedir. Bu nedenle, portfolyonuzun farklı ekran boyutlarında doğru görünmesi şarttır. Media Query (Medya Sorguları) kullanarak CSS kurallarını ekran genişliğine göre değiştirebilirsiniz.
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
header {
padding: 2rem 0;
}
}Bu kod bloğu, ekran genişliği 768 pikselin altına düştüğünde menü öğelerini alt alta dizer. Bu, mobil kullanıcı deneyimini iyileştiren kritik bir adımdır.
İletişim Formu ve Güvenlik Uyarıları
Portfolyo sitenizde bir iletişim formu bulundurmak, potansiyel işverenlerin size ulaşmasını sağlar. Ancak form verilerini işlerken güvenlik önlemlerini asla ihmal etmemelisiniz. HTML tarafında required özniteliğini kullanarak boş gönderimleri engelleyebilirsiniz.
İsim:
Mesaj:
Gönder
Kritik Güvenlik Uyarısı: HTML formları tek başına verileri işleyemez. Form verilerini bir veritabanına kaydetmek veya e-posta olarak almak için arka uç (backend) teknolojileri (PHP, Node.js vb.) kullanmalısınız. Kullanıcıdan gelen verileri asla doğrudan veritabanına yazmayın; XSS ve SQL Injection saldırılarına karşı her zaman "sanitization" (temizleme) ve "validation" (doğrulama) uygulayın.
Yöntem Karşılaştırma Tablosu
Web sitenizi oluştururken kullanabileceğiniz farklı yaklaşımları aşağıda karşılaştırdık:
| Yöntem | Avantajı | Dezavantajı |
|---|---|---|
| Saf HTML/CSS | Çok hızlı, hafif, öğrenmesi kolay. | Dinamik özellikler (form işleme) için backend gerekir. |
| Statik Site Oluşturucular | Blog yönetimi kolay, SEO dostu. | Öğrenme eğrisi daha dik. |
Sıkça Sorulan Sorular
HTML ve CSS öğrenmek ne kadar sürer?
Temel seviyede bir portfolyo sitesi yapmak için 1-2 haftalık düzenli çalışma yeterlidir. Ancak ileri seviye animasyonlar ve karmaşık düzenler için pratik yapmaya devam etmelisiniz.
Sitemi internette nasıl yayınlayabilirim?
GitHub Pages veya Netlify gibi servisleri kullanarak ücretsiz ve hızlı bir şekilde statik sitenizi yayına alabilirsiniz.
Neden hazır şablon kullanmamalıyım?
Hazır şablonlar öğrenme sürecinizi yavaşlatır ve kod yapısını anlamanızı engeller. Kendi kodunuzu yazmak, hata ayıklama yeteneğinizi geliştirir.
CSS dosyası neden çalışmıyor olabilir?
Genellikle dosya yolu hatasıdır. HTML dosyanızdaki link etiketinde yer alan href değerinin, CSS dosyanızın ismiyle birebir aynı olduğundan emin olun.
SEO için nelere dikkat etmeliyim?
Doğru başlık etiketleri (h1-h6) kullanın, görsellerinize "alt" metinleri ekleyin ve sayfa yüklenme hızını optimize edin.
Web Sitesi Performansını Optimize Etme
Portfolyo sitenizin profesyonel görünmesi sadece tasarım ile değil, aynı zamanda yüklenme hızıyla da doğrudan ilişkilidir. Kullanıcılar yavaş açılan siteleri hızlıca terk eder. Performansı artırmak için şu adımları izleyebilirsiniz:
- Görsel Optimizasyonu: Yüksek çözünürlüklü fotoğraflar sitenizi yavaşlatır. Görsellerinizi WebP formatına dönüştürün ve boyutlarını optimize edin.
- CSS ve HTML Küçültme (Minification): Kodlarınızdaki boşlukları ve yorum satırlarını temizleyerek dosya boyutunu küçültün.
- Tarayıcı Önbellekleme: Sunucu tarafında tarayıcı önbellekleme ayarlarını aktif ederek, geri dönen kullanıcıların sitenizi daha hızlı yüklemesini sağlayın.
Kod Hata Ayıklama (Debugging) Teknikleri
Geliştirme aşamasında CSS düzenlerinizin neden bozulduğunu veya HTML öğelerinizin neden hizalanmadığını anlamak için tarayıcı geliştirici araçlarını (DevTools) etkin kullanmalısınız. İşte en sık karşılaşılan sorunları çözme yöntemleri:
1. Inspect Element Kullanımı
Tarayıcınızda sağ tıklayıp "İncele" (Inspect) seçeneğine tıkladığınızda, öğelerin üzerine gelerek hangi CSS kurallarının uygulandığını görebilirsiniz. Eğer bir stilin üzeri çiziliyse, o kural başka bir CSS seçicisi tarafından eziliyor demektir.
2. Border Tekniği
Düzen (layout) hatalarını bulmak için geçici olarak tüm öğelere ince bir çerçeve eklemek, kutu modelini (box model) görmenizi sağlar:
* {
border: 1px solid red !important;
}İleri Düzey CSS İpuçları: Modern Düzenler
Portfolyo sitenizi bir üst seviyeye taşımak için CSS Grid ve değişkenler (CSS Variables) kullanarak daha sürdürülebilir bir kod yapısı kurabilirsiniz. Değişkenler, renk paletinizi tek bir noktadan yönetmenize olanak tanır.
:root {
--ana-renk: #3498db;
--yazi-rengi: #2c3e50;
--arka-plan: #ffffff;
}
body {
background-color: var(--arka-plan);
color: var(--yazi-rengi);
}
.buton {
background-color: var(--ana-renk);
padding: 10px 20px;
border-radius: 5px;
}Canlı Yayına Hazırlık: Deployment Öncesi Kontrol Listesi
Sitenizi internete açmadan önce aşağıdaki kontrol listesini tamamladığınızdan emin olun:
- Favicon Ekleyin: Tarayıcı sekmesinde görünecek küçük ikonunuzu
etiketiyle ekleyin. - Meta Etiketleri: Arama motorları için
etiketini mutlaka doldurun. - Link Kontrolü: Sosyal medya hesaplarınıza ve projelerinize giden tüm bağlantıların çalıştığını manuel olarak test edin.
- 404 Sayfası: Kullanıcıların yanlış bir URL girmesi durumunda karşılaşacakları basit bir hata sayfası oluşturun.
Profesyonel İpucu: Sitenizi yayına aldıktan sonra Google Search Console'a kaydederek sitenizin dizine eklenmesini hızlandırabilir ve arama sonuçlarındaki performansınızı takip edebilirsiniz.
Sonuç
Html & Css ile kişisel bir portfolyo web sitesi oluşturmak, yazılım kariyerinizin ilk ve en değerli adımlarından biridir. Bu rehberde öğrendiğiniz temel yapıları, CSS Flexbox düzenlerini ve responsive tasarım prensiplerini kullanarak kendinize özgü bir alan yaratabilirsiniz. Kod yazmak bir süreçtir; hata yapmaktan korkmayın ve her hatayı bir öğrenme fırsatı olarak görün. Bir sonraki adımda, sitenize JavaScript ekleyerek etkileşimli öğeler (örneğin; karanlık mod geçişi veya proje filtreleme) eklemeyi hedefleyebilirsiniz.
Sorumluluk Reddi: Bu makale yazılım eğitimi amaçlıdır. Web sitenizin güvenliği, barındırma hizmeti sağlayıcınızın ve yazdığınız arka uç kodlarının güvenliğine bağlıdır. Kişisel verilerin korunması kanunu (KVKK) gereği, kullanıcı verilerini toplarken gerekli yasal bilgilendirmeleri yapmayı unutmayın.
Yorumlar (0)
Yorum Yaz