Hızlı HTML & CSS mini şablonlar: 5 kullanışlı örnek

Hızlı HTML & CSS mini şablonlar: 5 kullanışlı örnek

Bu makalede, kısa sürede uygulayabileceğiniz beş pratik HTML & CSS mini şablon (kolay kod örnekleri) bulacaksınız. Her şablon için amaç, temel HTML yapısı, minimal CSS ve hızlı uygulama adımları veriyorum. Örnekler; gezinme, açılış sayfası, resim galerisi, kayıt formu ve fiyatlandırma tablosunu kapsar. Daha fazla örnek ve fikir için Developer Updates ve modern CSS uygulamaları için web.dev kılavuzlarını inceleyebilirsiniz.

Duyarlı Navigasyon Çubuğu

Basit, okunaklı ve mobil uyumlu bir navigasyon çubuğu ziyaretçilerin sayfanızda hızlı gezinmesini sağlar. Aşağıdaki örnek, flexbox ile temel bir yapıyı gösterir; daha gelişmiş hamburger menüleri için küçük JavaScript eklemesi gerekir.

Basit HTML

<nav class="nav">
  <ul>
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Hakkında</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Basit CSS

.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem; }
.nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
@media (max-width: 600px) { .nav ul { display: none; } }

1. HTML yapısını sayfanıza ekleyin.
2. CSS ile yatay düzeni sağlayın; küçük ekranlar için gizleme veya açılır menü tasarlayın.
3. Odak sırasını ve klavye erişilebilirliğini kontrol edin (tab ile gezinme).

Not: Duyarlı navigasyon en iyi uygulamaları ve mini proje fikirleri için kaynaklardan ilham alabilirsiniz (Developer Updates).

Basit Açılış (Landing) Sayfası

Açılış sayfaları, ziyaretçilere bir teklif, ürün veya hizmetin kısa bir özetini sunmak için idealdir. Aşağıdaki yapı hızlıca uygulanabilecek bir hero alanı ve CTA (call-to-action) içerir.

Basit HTML

<header class="hero">
  <h1>Ürününüzün Adı</h1>
  <p>Kısa, etkileyici bir açıklama.</p>
  <a href="#signup">Hemen Başla</a>
</header>

Basit CSS

.hero { text-align: center; padding: 4rem 1rem; background: linear-gradient(135deg,#f7f9fc,#eef2ff); }
.hero h1 { font-size: 2rem; margin: 0 0 0.5rem; }
@media (min-width: 700px) { .hero h1 { font-size: 3rem; } }

1. H1 ile ana mesajınızı net verin (SEO ve erişilebilirlik için önemlidir).
2. CTA butonunun kontrastını kontrol edin; renklendirmeyi CSS değişkenleriyle yönetin.
3. Basit görseller veya SVG ikonlar ekleyerek görsel denge sağlayın.

Resim Galerisi

Görselleri düzenli göstermek için CSS Grid hızlı ve esnek bir çözümdür. Ayrıca "loading="lazy"" özniteliği ile görüntülerin yükleme maliyetini düşürebilirsiniz.

Basit HTML

<div class="gallery">
  <img src="img1.jpg" alt="Açıklama 1" loading="lazy">
  <img src="img2.jpg" alt="Açıklama 2" loading="lazy">
  <img src="img3.jpg" alt="Açıklama 3" loading="lazy">
</div>

Basit CSS

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; }

1. Grid sütun genişliğini içerik ve görsel boyutlarına göre ayarlayın.
2. Alt metin (alt) kullanarak erişilebilirliği artırın.
3. Büyük galerilerde sayfalama veya sonsuz kaydırma düşünebilirsiniz.

Kayıt Formu

Formlar kullanıcı verisi toplamak için temel unsurdur. Etiketleri (label) doğru kullanmak ve HTML5 doğrulama özelliklerinden yararlanmak kullanıcı deneyimini iyileştirir.

Basit HTML

<form action="/signup" method="post">
  <label for="name">İsim</label>
  <input id="name" name="name" required>
  <label for="email">E-posta</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Kayıt Ol</button>
</form>

Basit CSS

form { display: grid; gap: 0.75rem; max-width: 420px; }
input, button { padding: 0.6rem; }

1. Sunucu tarafı doğrulama ve gizlilik politikanızı unutmayın.
2. Giriş hatalarını kullanıcıya açıklayıcı şekilde gösterin.
3. Oturum açma/kayıt süreçlerinde açık ve kısa alanlar kullanın.

Fiyatlandırma Tablosu

Fiyat tabloları, ürün/hizmet katmanlarını net göstermek için uygundur. Aşağıda hem örnek HTML (kaçışlı) hem de basit bir tablo önizlemesi bulunuyor.

Basit HTML (örnek)

<table class="pricing">
  <thead><tr><th>Plan</th><th>Fiyat</th><th>Özellikler</th></tr></thead>
  <tbody>
    <tr><td>Temel</td><td>$0</td><td>1 proje</td></tr>
    <tr><td>Pro</td><td>$9/ay</td><td>Sınırsız proje</td></tr>
    <tr><td>Enterprise</td><td>Özel</td><td>Özel destek</td></tr>
  </tbody>
</table>

Örnek Tablo (önizleme)

1. Hangi planın öne çıkacağını belirleyin ve görsel olarak vurgulayın (renk, gölge, etiket).
2. Fiyat bilgilerini açık ve kesin tutun; para birimi göstermek önemlidir.
3. Masaüstü ve mobilde sütun düzenini test edin.

Şablonları Birleştirme ve Özelleştirme

Bu mini şablonlar birbirleriyle kolayca birleştirilebilir: aynı değişken renk paleti, ortak tipografi ve ortak konteyner genişliği kullanarak tutarlı bir görünüm oluşturun. CSS değişkenleri, responsive noktaları ve yardımcı sınıflar kullanmak işleri hızlandırır. Güncel CSS örnekleri ve snippet önerileri için web.dev rehberine bakabilirsiniz.

Hızlı Kontrol Listesi (Release öncesi)

• Mobil ve masaüstü görünümü kontrol edildi mi?
• Tüm formlar sunucu tarafında doğrulanıyor mu?
• Alt metinler (alt) eklendi mi ve bağlantılar erişilebilir mi?
• Renk kontrastları yeterli mi?
• Lighthouse veya benzeri araçlarla performans/erişilebilirlik testleri yapıldı mı?

Kaynaklar ve daha fazla okuma

• Developer Updates — HTML ve CSS Mini Projeleri
• web.dev — 6 CSS snippets every front-end developer should know
• Chrome for Developers — CSS Wrapped 2023

Not: Buradaki kodlar öğretici ve hızlı prototipleme amaçlıdır. Üretim ortamına almadan önce erişilebilirlik, performans ve sunucu tarafı güvenlik/gizlilik kontrollerini uygulamanız önerilir.