[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-post-hizli-html-css-mini-sablonlar-5-kullanisli-ornek":3},{"dataItem":4,"heading":36,"metaData":38,"schema":81},["Reactive",5],{"id":6,"title":7,"summary":8,"content":9,"seo_title":10,"seo_description":11,"seo_keywords":12,"slug":13,"createdAt":14,"updatedAt":14,"blog_categories":15,"authors":19,"image":24,"thumb":25,"image_webp":26,"thumb_webp":27,"rating":28,"heading_title":7,"heading_sub_title":17,"readingTime":29,"url":34,"comments":35,"meta_cover":24},26384,"Hızlı HTML & CSS mini şablonlar: 5 kullanışlı örnek","Bu rehberde, başlangıç seviyesinden orta seviyeye kadar geliştiriciler için beş hızlı HTML ve CSS mini şablon sunuluyor: duyarlı navigasyon, basit açılış sayfası, resim galerisi, kayıt formu ve fiyatlandırma tablosu. Her örnek için kısa HTML/CSS kod parçacıkları ve uygulama adımları yer alıyor.","\u003Ch2>Hızlı HTML & CSS mini şablonlar: 5 kullanışlı örnek\u003C/h2>\n\u003Cp>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 \u003Ca href=\"https://www.developerupdates.com/blog/html-and-css-mini-projects\">Developer Updates\u003C/a> ve modern CSS uygulamaları için \u003Ca href=\"https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023?hl=tr\">web.dev\u003C/a> kılavuzlarını inceleyebilirsiniz.\u003C/p>\n\n\u003Ch3>Duyarlı Navigasyon Çubuğu\u003C/h3>\n\u003Cp>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.\u003C/p>\n\u003Cp>\u003Cstrong>Basit HTML\u003C/strong>\u003C/p>\n\u003Cp><nav class="nav">\u003Cbr>  <ul>\u003Cbr>    <li><a href="#">Ana Sayfa</a></li>\u003Cbr>    <li><a href="#">Hakkında</a></li>\u003Cbr>    <li><a href="#">İletişim</a></li>\u003Cbr>  </ul>\u003Cbr></nav>\u003C/p>\n\u003Cp>\u003Cstrong>Basit CSS\u003C/strong>\u003C/p>\n\u003Cp>.nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem; }\u003Cbr>.nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }\u003Cbr>@media (max-width: 600px) { .nav ul { display: none; } }\u003C/p>\n\u003Col>\n  \u003Cli>HTML yapısını sayfanıza ekleyin.\u003C/li>\n  \u003Cli>CSS ile yatay düzeni sağlayın; küçük ekranlar için gizleme veya açılır menü tasarlayın.\u003C/li>\n  \u003Cli>Odak sırasını ve klavye erişilebilirliğini kontrol edin (tab ile gezinme).\u003C/li>\n\u003C/ol>\n\u003Cp>\u003Cem>Not:\u003C/em> Duyarlı navigasyon en iyi uygulamaları ve mini proje fikirleri için kaynaklardan ilham alabilirsiniz (\u003Ca href=\"https://www.developerupdates.com/blog/html-and-css-mini-projects\">Developer Updates\u003C/a>).\u003C/p>\n\n\u003Ch3>Basit Açılış (Landing) Sayfası\u003C/h3>\n\u003Cp>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.\u003C/p>\n\u003Cp>\u003Cstrong>Basit HTML\u003C/strong>\u003C/p>\n\u003Cp><header class="hero">\u003Cbr>  <h1>Ürününüzün Adı</h1>\u003Cbr>  <p>Kısa, etkileyici bir açıklama.</p>\u003Cbr>  <a href="#signup">Hemen Başla</a>\u003Cbr></header>\u003C/p>\n\u003Cp>\u003Cstrong>Basit CSS\u003C/strong>\u003C/p>\n\u003Cp>.hero { text-align: center; padding: 4rem 1rem; background: linear-gradient(135deg,#f7f9fc,#eef2ff); }\u003Cbr>.hero h1 { font-size: 2rem; margin: 0 0 0.5rem; }\u003Cbr>@media (min-width: 700px) { .hero h1 { font-size: 3rem; } }\u003C/p>\n\u003Col>\n  \u003Cli>H1 ile ana mesajınızı net verin (SEO ve erişilebilirlik için önemlidir).\u003C/li>\n  \u003Cli>CTA butonunun kontrastını kontrol edin; renklendirmeyi CSS değişkenleriyle yönetin.\u003C/li>\n  \u003Cli>Basit görseller veya SVG ikonlar ekleyerek görsel denge sağlayın.\u003C/li>\n\u003C/ol>\n\n\u003Ch3>Resim Galerisi\u003C/h3>\n\u003Cp>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.\u003C/p>\n\u003Cp>\u003Cstrong>Basit HTML\u003C/strong>\u003C/p>\n\u003Cp><div class="gallery">\u003Cbr>  <img src="img1.jpg" alt="Açıklama 1" loading="lazy">\u003Cbr>  <img src="img2.jpg" alt="Açıklama 2" loading="lazy">\u003Cbr>  <img src="img3.jpg" alt="Açıklama 3" loading="lazy">\u003Cbr></div>\u003C/p>\n\u003Cp>\u003Cstrong>Basit CSS\u003C/strong>\u003C/p>\n\u003Cp>.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }\u003Cbr>.gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: 6px; }\u003C/p>\n\u003Col>\n  \u003Cli>Grid sütun genişliğini içerik ve görsel boyutlarına göre ayarlayın.\u003C/li>\n  \u003Cli>Alt metin (alt) kullanarak erişilebilirliği artırın.\u003C/li>\n  \u003Cli>Büyük galerilerde sayfalama veya sonsuz kaydırma düşünebilirsiniz.\u003C/li>\n\u003C/ol>\n\n\u003Ch3>Kayıt Formu\u003C/h3>\n\u003Cp>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.\u003C/p>\n\u003Cp>\u003Cstrong>Basit HTML\u003C/strong>\u003C/p>\n\u003Cp><form action="/signup" method="post">\u003Cbr>  <label for="name">İsim</label>\u003Cbr>  <input id="name" name="name" required>\u003Cbr>  <label for="email">E-posta</label>\u003Cbr>  <input id="email" name="email" type="email" required>\u003Cbr>  <button type="submit">Kayıt Ol</button>\u003Cbr></form>\u003C/p>\n\u003Cp>\u003Cstrong>Basit CSS\u003C/strong>\u003C/p>\n\u003Cp>form { display: grid; gap: 0.75rem; max-width: 420px; }\u003Cbr>input, button { padding: 0.6rem; }\u003C/p>\n\u003Col>\n  \u003Cli>Sunucu tarafı doğrulama ve gizlilik politikanızı unutmayın.\u003C/li>\n  \u003Cli>Giriş hatalarını kullanıcıya açıklayıcı şekilde gösterin.\u003C/li>\n  \u003Cli>Oturum açma/kayıt süreçlerinde açık ve kısa alanlar kullanın.\u003C/li>\n\u003C/ol>\n\n\u003Ch3>Fiyatlandırma Tablosu\u003C/h3>\n\u003Cp>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.\u003C/p>\n\u003Cp>\u003Cstrong>Basit HTML (örnek)\u003C/strong>\u003C/p>\n\u003Cp><table class="pricing">\u003Cbr>  <thead><tr><th>Plan</th><th>Fiyat</th><th>Özellikler</th></tr></thead>\u003Cbr>  <tbody>\u003Cbr>    <tr><td>Temel</td><td>$0</td><td>1 proje</td></tr>\u003Cbr>    <tr><td>Pro</td><td>$9/ay</td><td>Sınırsız proje</td></tr>\u003Cbr>    <tr><td>Enterprise</td><td>Özel</td><td>Özel destek</td></tr>\u003Cbr>  </tbody>\u003Cbr></table>\u003C/p>\n\u003Cp>\u003Cstrong>Örnek Tablo (önizleme)\u003C/strong>\u003C/p>\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Plan\u003C/th>\n      \u003Cth>Fiyat\u003C/th>\n      \u003Cth>Özellikler\u003C/th>\n    \u003C/tr>\n  \u003C/thead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>Temel\u003C/td>\n      \u003Ctd>$0\u003C/td>\n      \u003Ctd>1 proje\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>Pro\u003C/td>\n      \u003Ctd>$9/ay\u003C/td>\n      \u003Ctd>Sınırsız proje\u003C/td>\n    \u003C/tr>\n    \u003Ctr>\n      \u003Ctd>Enterprise\u003C/td>\n      \u003Ctd>Özel\u003C/td>\n      \u003Ctd>Özel destek\u003C/td>\n    \u003C/tr>\n  \u003C/tbody>\n\u003C/table>\n\u003Col>\n  \u003Cli>Hangi planın öne çıkacağını belirleyin ve görsel olarak vurgulayın (renk, gölge, etiket).\u003C/li>\n  \u003Cli>Fiyat bilgilerini açık ve kesin tutun; para birimi göstermek önemlidir.\u003C/li>\n  \u003Cli>Masaüstü ve mobilde sütun düzenini test edin.\u003C/li>\n\u003C/ol>\n\n\u003Ch3>Şablonları Birleştirme ve Özelleştirme\u003C/h3>\n\u003Cp>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 \u003Ca href=\"https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023?hl=tr\">web.dev\u003C/a> rehberine bakabilirsiniz.\u003C/p>\n\n\u003Ch3>Hızlı Kontrol Listesi (Release öncesi)\u003C/h3>\n\u003Cul>\n  \u003Cli>Mobil ve masaüstü görünümü kontrol edildi mi?\u003C/li>\n  \u003Cli>Tüm formlar sunucu tarafında doğrulanıyor mu?\u003C/li>\n  \u003Cli>Alt metinler (alt) eklendi mi ve bağlantılar erişilebilir mi?\u003C/li>\n  \u003Cli>Renk kontrastları yeterli mi?\u003C/li>\n  \u003Cli>Lighthouse veya benzeri araçlarla performans/erişilebilirlik testleri yapıldı mı?\u003C/li>\n\u003C/ul>\n\n\u003Ch3>Kaynaklar ve daha fazla okuma\u003C/h3>\n\u003Cul>\n  \u003Cli>\u003Ca href=\"https://www.developerupdates.com/blog/html-and-css-mini-projects\">Developer Updates — HTML ve CSS Mini Projeleri\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023?hl=tr\">web.dev — 6 CSS snippets every front-end developer should know\u003C/a>\u003C/li>\n  \u003Cli>\u003Ca href=\"https://developer.chrome.com/blog/css-wrapped-2023?hl=tr\">Chrome for Developers — CSS Wrapped 2023\u003C/a>\u003C/li>\n\u003C/ul>\n\n\u003Cp>\u003Cstrong>Not:\u003C/strong> 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.\u003C/p>\n","Hızlı HTML & CSS mini şablonlar — 5 kolay kod örneği","Basit ve duyarlı beş HTML & CSS mini şablonuyla başlayın: navigasyon, açılış sayfası, galeri, kayıt formu ve fiyat tablosu. Kolay kod örnekleri ve uygulama adım","kolay kod örnekleri, HTML şablon, CSS basit layout, responsive örnek, başlangıç web tasarım, mini şablonlar","hizli-html-css-mini-sablonlar-5-kullanisli-ornek","2026-04-10T09:38:14.000Z",{"id":16,"title":17,"slug":18},203,"HTML & CSS Mini Örnekleri","html-css-mini-ornekleri",{"id":20,"name":21,"nickname":22,"slug":23},91,"Mert Kılıçoğlu","CodeCraftsman","mert-kilicoglu","/media/blog/98089279db6462fd2069eeb9beb45351.jpg","/media/blog/98089279db6462fd2069eeb9beb45351_thumb.jpg","/media/blog/98089279db6462fd2069eeb9beb45351.webp","/media/blog/98089279db6462fd2069eeb9beb45351_thumb.webp",null,{"minutes":30,"wordCount":31,"imageCount":32,"formatted":33},6,1060,0,"6 dk okuma süresi","/blog/html-css-mini-ornekleri/hizli-html-css-mini-sablonlar-5-kullanisli-ornek",[],["Reactive",37],{"title":7,"subTitle":17,"image":24},["Reactive",39],{"title":10,"meta":40,"link":75},[41,43,45,48,51,54,57,60,63,66,69,71,73],{"hid":42,"name":42,"content":11},"description",{"hid":44,"name":44,"content":12},"keywords",{"hid":46,"name":46,"content":47},"author","Başlangıç Seviyesi Kod & Snippet Rehberi",{"hid":49,"name":49,"content":50},"robots","index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1",{"hid":52,"property":52,"content":53},"og:type","website",{"hid":55,"property":55,"content":56},"og:title","Başlangıç Kod & Snippet Rehberi | KodÖğreniyorum",{"hid":58,"property":58,"content":59},"og:description","Yeni başlayanlara yönelik kısa kod örnekleri, snippet'ler ve adım adım alıştırmalar. Hızlı uygulamalarla temel programlama mantığını pekiştir.",{"hid":61,"property":61,"content":62},"og:image","https://kodogreniyorum.com/media/blog/98089279db6462fd2069eeb9beb45351.jpg",{"hid":64,"property":64,"content":65},"og:url","https://kodogreniyorum.com/blog/html-css-mini-ornekleri/hizli-html-css-mini-sablonlar-5-kullanisli-ornek",{"hid":67,"name":67,"content":68},"twitter:card","summary_large_image",{"hid":70,"name":70,"content":56},"twitter:title",{"hid":72,"name":72,"content":59},"twitter:description",{"hid":74,"name":74,"content":62},"twitter:image",[76,78],{"rel":77,"href":65},"canonical",{"rel":79,"href":80},"amphtml","https://amp.kodogreniyorum.com/blog/html-css-mini-ornekleri/hizli-html-css-mini-sablonlar-5-kullanisli-ornek",["Reactive",82],{"@context":83,"@graph":84},"https://schema.org",[85,98],{"@type":86,"headline":10,"image":62,"author":87,"publisher":90,"datePublished":14,"dateModified":14,"mainEntityOfPage":96,"description":11},"BlogPosting",{"@type":88,"name":21,"url":89},"Person","https://kodogreniyorum.com/yazarlar/mert-kilicoglu",{"@type":91,"name":47,"logo":92},"Organization",{"@type":93,"url":94,"width":95,"height":95},"ImageObject","https://kodogreniyorum.com/img/icons/favicon.png",32,{"@type":97,"@id":65},"WebPage",{"@type":99,"itemListElement":100},"BreadcrumbList",[101,106,110,113],{"@type":102,"position":103,"name":104,"item":105},"ListItem",1,"Ana Sayfa","https://kodogreniyorum.com",{"@type":102,"position":107,"name":108,"item":109},2,"Blog","https://kodogreniyorum.com/blog",{"@type":102,"position":111,"name":17,"item":112},3,"https://kodogreniyorum.com/blog/html-css-mini-ornekleri",{"@type":102,"position":114,"name":7,"item":65},4]