Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için profesyonel bir kod editörüne (VS Code önerilir) ve modern bir web tarayıcısına (Chrome, Firefox veya Edge) ihtiyacınız var. Html ve Css dosyalarınızı ayrı tutmak, projenin sürdürülebilirliği ve kodun temizliği (Clean Code) açısından kritik öneme sahiptir.

• HTML5: Sayfa yapısını oluşturmak için kullanılacak.
• CSS3: Görselleştirme, animasyonlar ve duyarlı tasarım için kullanılacak.
• Tarayıcı Geliştirici Araçları: F12 tuşu ile açılan bu panel, tasarımlarınızı anlık test etmenize olanak tanır.

Çalışmaya başlamadan önce proje klasörünüzü oluşturun ve içerisine index.html ile style.css dosyalarını ekleyin. Dosyalar arası bağlantıyı kurmak için HTML dosyanızın head etiketleri arasına link etiketini eklemeyi unutmayın.

Adım 1: Temel HTML İskeletini Oluşturma

Karşılama ekranının temelini oluştururken, semantik (anlamsal) HTML etiketleri kullanmak SEO ve erişilebilirlik açısından önemlidir. Bir "hero" alanı veya karşılama kutusu için section ve div etiketlerini kullanacağız.

    

        
Hoş Geldiniz!
        
İçeriğimizi keşfetmeye hazır mısınız?
        Başla
    

Yukarıdaki kod, ekranın merkezinde yer alacak bir kutu yapısını ifade eder. welcome-container ana kapsayıcıyı, welcome-content ise içeriklerin hizalanacağı alanı temsil eder.

Adım 2: CSS ile Modern Yerleşim ve Tasarım

İçeriği ekranın tam ortasına yerleştirmek ve görsel bir derinlik kazandırmak için CSS Flexbox kullanacağız. Bu yöntem, ekran boyutu ne olursa olsun içeriğin her zaman ortalı kalmasını sağlar.

.welcome-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-family: sans-serif;
}

.welcome-content {
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

Burada 100vh değeri, kapsayıcının ekranın tam yüksekliğini almasını sağlar. backdrop-filter özelliği ise 2026 standartlarında sıkça kullanılan, arka planı bulanıklaştıran modern bir cam efekti yaratır.

Adım 3: Özelleştirilebilir Buton ve Etkileşim Tasarımı

Kullanıcının dikkatini çekecek bir "Çağrı Butonu" (Call to Action - CTA) eklemek, karşılama ekranının işlevselliğini artırır. Butonun üzerine gelindiğinde (hover) renk değiştirmesi, kullanıcıya etkileşimde olduğu hissini verir.

.cta-button {
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    background-color: #ffffff;
    color: #764ba2;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.cta-button:hover {
    transform: scale(1.05);
    background-color: #f0f0f0;
}

transition özelliği, butonun büyüme efektinin ani değil, yumuşak bir geçişle gerçekleşmesini sağlar. Bu küçük detaylar, kullanıcı deneyimini profesyonel bir seviyeye taşır.

Adım 4: Duyarlı Tasarım (Responsive) Kuralları

Ekranın mobil cihazlarda da düzgün görünmesi için medya sorguları (media queries) kullanmalıyız. Bu sayede ekran genişliği küçüldüğünde yazı boyutlarını ve boşlukları otomatik olarak optimize edebiliriz.

@media (max-width: 600px) {
    .welcome-content {
        padding: 1rem;
        width: 90%;
    }
    h1 {
        font-size: 1.5rem;
    }
}

Bu kod bloğu, ekran genişliği 600 pikselin altına düştüğünde içeriğin genişliğini ve yazı boyutunu küçültür. Böylece mobil kullanıcılar için de optimize edilmiş bir deneyim sunulur.

Karşılaştırma: Tasarım Yöntemleri

Adım 5: Animasyon ve Görsel Zenginleştirme

Karşılama ekranına giriş animasyonu eklemek, sitenizin dinamik görünmesini sağlar. CSS @keyframes kullanarak içeriğin yavaşça belirmesini sağlayabiliriz.

.welcome-content {
    animation: fadeIn 1.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

Bu animasyon, sayfa yüklendiğinde içeriğin aşağıdan yukarıya doğru hafifçe kayarak görünmesini sağlar. Kullanıcıyı karşılayan ilk öğenin hareketli olması, sayfanın canlı olduğu algısını güçlendirir.

Kritik Güvenlik Uyarısı: Web projelerinizde kullanıcıdan veri alacağınız formlar veya etkileşimli alanlar eklediğinizde, XSS (Cross-Site Scripting) saldırılarına karşı her zaman girdi temizleme ve çıktı kodlama yöntemlerini kullanın. Bu rehberdeki tasarım saf HTML/CSS içermektedir, ancak sunucu tarafına geçişte güvenlik önlemlerini ihmal etmeyin.

Sıkça Sorulan Sorular

Karşılama ekranı SEO'yu etkiler mi?

Evet, eğer karşılama ekranı içeriğin tamamını kapatıyor ve Google botlarının içeriği taramasını engelliyorsa sıralamanız düşebilir. Bu nedenle içeriğin hızlı yüklendiğinden ve arama motorları için erişilebilir olduğundan emin olun.

Neden Flexbox kullanmalıyım?

Flexbox, öğeleri dikey ve yatay olarak ortalamak için en verimli ve temiz yöntemdir. Karmaşık hesaplamalar yapmadan hizalama sorunlarını çözmenizi sağlar.

Mobil cihazlarda ekranın taşmasını nasıl engellerim?

CSS içerisinde box-sizing: border-box; kuralını kullanmak ve medya sorguları ile genişlik değerlerini yüzde (%) olarak belirlemek taşma sorunlarını %99 oranında çözer.

Daha fazla özelleştirme için ne yapabilirim?

CSS değişkenlerini (CSS Variables) kullanarak renkleri ve yazı tiplerini tek bir merkezden yönetebilir, projeyi kolayca kişiselleştirebilirsiniz.

Bu tasarım tüm tarayıcılarda çalışır mı?

Modern tarayıcıların tamamı Flexbox ve CSS Grid özelliklerini destekler. Çok eski tarayıcılar için "autoprefixer" gibi araçlar kullanarak CSS kodlarınıza ön ekler (prefix) ekleyebilirsiniz.

Performans Optimizasyonu ve Yükleme Süreleri

Karşılama ekranları, kullanıcının siteyle ilk temas noktasıdır. Bu nedenle, ekranın milisaniyeler içinde yüklenmesi kritik öneme sahiptir. Görsel ağırlıklı bir karşılama ekranı, doğru optimize edilmediğinde "Largest Contentful Paint" (LCP) değerini olumsuz etkileyebilir.

Görsel Optimizasyon Stratejileri

Ekranınızda kullandığınız arka plan görselleri için modern formatları tercih etmek, yükleme hızını ciddi oranda artırır. WebP veya AVIF formatları, geleneksel JPEG ve PNG formatlarına göre çok daha yüksek sıkıştırma oranları sunar.

• Lazy Loading: Ekranın alt kısımlarında kalan görseller için loading="lazy" niteliğini kullanın.
• CSS Sprites: Küçük ikonlar için ayrı ayrı istek atmak yerine, ikonları tek bir görselde birleştirerek HTTP istek sayısını azaltın.
• Font Optimizasyonu: Google Fonts kullanıyorsanız, sadece ihtiyacınız olan ağırlıkları (weight) seçin ve font-display: swap; özelliğini kullanarak metinlerin yüklenmesini beklerken görünür kalmasını sağlayın.

Hata Ayıklama ve Tarayıcı Uyumluluk Testleri

Geliştirdiğiniz karşılama ekranının farklı cihazlarda ve tarayıcılarda nasıl göründüğünü doğrulamak, profesyonel bir geliştiricinin olmazsa olmazıdır. Tarayıcı geliştirici araçları (F12), bu süreçte en büyük yardımcınızdır.

Geliştirici Araçları ile Hata Ayıklama

CSS düzeninizde bozulmalar yaşıyorsanız, "Elements" sekmesinde yer alan "Computed" paneline bakarak öğelerin gerçek boyutlarını ve uygulanan kutu modelini (box-model) inceleyebilirsiniz. Özellikle overflow sorunlarını tespit etmek için şu CSS hilesini geçici olarak kullanabilirsiniz:

/* Tüm öğelere sınır ekleyerek taşma yapan elemanı bulun */
* {
    outline: 1px solid red !important;
}

Bu kod bloğu, sayfanızdaki hangi elemanın ekranın dışına taştığını görsel olarak net bir şekilde ortaya koyacaktır. Tasarımınızı tamamladıktan sonra bu kodu kaldırmayı unutmayın.

Test Senaryoları Tablosu

Karşılama ekranınızın kalitesini artırmak için aşağıdaki test matrisini uygulamanızı öneririz:

Bu testleri tamamladıktan sonra, projenizi yayına almadan önce farklı tarayıcılarda (Chrome, Firefox, Safari, Edge) önizleme yaparak kullanıcıların karşılaşabileceği olası uyumsuzlukları giderebilirsiniz.

Sonuç

Html & Css ile özelleştirilebilir bir içerik karşılama ekranı yapmak, web geliştirme yolculuğunuzda arayüz tasarım temellerini pekiştiren harika bir uygulamadır. Bu rehberde öğrendiğiniz Flexbox, medya sorguları ve animasyon teknikleri, sadece karşılama ekranlarında değil, web sitenizin tüm bölümlerinde kullanabileceğiniz temel yetkinliklerdir.

Bir sonraki adım olarak, bu karşılama ekranına JavaScript ekleyerek bir "Giriş Yap" veya "Abone Ol" butonu ile etkileşimi artırmayı deneyebilirsiniz. Kodlarınızı düzenli tutun, tarayıcı geliştirici araçlarını aktif kullanın ve her zaman kullanıcı deneyimini ön planda tutan tasarımlar üretmeye devam edin.