HTML ve CSS, web'in temel yapı taşlarıdır. HTML içeriği yapılandırır, CSS görsel sunumu belirler. Modern web geliştirmede semantik HTML ve CSS'in güçlü layout sistemi olan Grid/Flexbox'ı birlikte kullanmak standart haline gelmiştir.
Semantik HTML
Semantik etiketler, tarayıcılara ve arama motorlarına içeriğin anlamını anlatır. Erişilebilirlik ve SEO için kritiktir.
// HTML //
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CodeForge — Türkçe programlama eğitim platformu">
<title>CodeForge | Programlama Öğren</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<header>
<nav aria-label="Ana menü">
<a href="/" aria-current="page">Anasayfa</a>
<a href="/dersler">Dersler</a>
<a href="/makaleler">Makaleler</a>
</nav>
</header>
<main>
<article>
<header>
<h1>JavaScript ile Modern Web Geliştirme</h1>
<time datetime="2025-09-15">15 Eylül 2025</time>
<address rel="author">Ali Yılmaz</address>
</header>
<section aria-labelledby="giris-baslik">
<h2 id="giris-baslik">Giriş</h2>
<p>JavaScript, web'in vazgeçilmez programlama dilidir...</p>
</section>
<aside aria-label="İlgili kaynaklar">
<h3>Faydalı Linkler</h3>
<ul>
<li><a href="https://developer.mozilla.org" rel="noopener noreferrer">MDN Web Docs</a></li>
</ul>
</aside>
</article>
</main>
<footer>
<p>© 2025 CodeForge. Tüm hakları saklıdır.</p>
</footer>
</body>
</html>CSS Değişkenleri ve Temel Sıfırlama
// CSS //
/* :root — global CSS değişkenleri */
:root {
/* Renkler */
--renk-birincil: #0ea5e9;
--renk-ikincil: #6366f1;
--renk-basari: #22c55e;
--renk-uyari: #f59e0b;
--renk-hata: #ef4444;
--renk-metin: #0f172a;
--renk-metin-ik: #64748b;
--renk-arkaplan: #ffffff;
--renk-sinir: #e2e8f0;
/* Tipografi */
--yazi-ailesi: 'Inter', system-ui, sans-serif;
--yazi-mono: 'JetBrains Mono', 'Fira Code', monospace;
--yakin-boyut: 1rem; /* 16px */
/* Boşluklar (8px sistem) */
--bosluk-1: 0.25rem; /* 4px */
--bosluk-2: 0.5rem; /* 8px */
--bosluk-3: 0.75rem; /* 12px */
--bosluk-4: 1rem; /* 16px */
--bosluk-6: 1.5rem; /* 24px */
--bosluk-8: 2rem; /* 32px */
--bosluk-12: 3rem; /* 48px */
/* Gölgeler */
--golge-sm: 0 1px 3px rgba(0,0,0,.12);
--golge-md: 0 4px 6px -1px rgba(0,0,0,.1);
--golge-lg: 0 10px 15px -3px rgba(0,0,0,.1);
/* Border radius */
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 1rem;
--radius-tam: 9999px;
}
/* Modern sıfırlama */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: var(--yazi-ailesi);
color: var(--renk-metin);
background: var(--renk-arkaplan);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }Flexbox
// CSS //
/* Temel Flexbox */
.kart-satiri {
display: flex;
gap: var(--bosluk-4);
flex-wrap: wrap; /* Küçük ekranda alta in */
align-items: center; /* Dikey ortalama */
justify-content: space-between; /* Yatay dağılım */
}
/* Navigasyon bar */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--bosluk-4) var(--bosluk-8);
background: var(--renk-arkaplan);
border-bottom: 1px solid var(--renk-sinir);
}
/* Kart içi dikey ortalama */
.kart {
display: flex;
flex-direction: column;
gap: var(--bosluk-3);
padding: var(--bosluk-6);
border: 1px solid var(--renk-sinir);
border-radius: var(--radius-lg);
box-shadow: var(--golge-sm);
}
.kart-altlik {
margin-top: auto; /* Push footer to bottom */
display: flex;
justify-content: space-between;
align-items: center;
}CSS Grid
// CSS //
/* Sayfa layout — sidebar + içerik */
.sayfa-duzen {
display: grid;
grid-template-columns: 280px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar icerik"
"footer footer";
min-height: 100vh;
gap: 0;
}
.sayfa-header { grid-area: header; }
.sayfa-sidebar { grid-area: sidebar; }
.sayfa-icerik { grid-area: icerik; padding: var(--bosluk-8); }
.sayfa-footer { grid-area: footer; }
/* Responsive kart grid */
.kart-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--bosluk-6);
}
/* 12 sütun sistem */
.konteyner {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--bosluk-4);
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--bosluk-4);
}
.tam-genislik { grid-column: 1 / -1; }
.uc-dort { grid-column: span 9; }
.bir-dort { grid-column: span 3; }Responsive Tasarım
// CSS //
/* Mobile-first yaklaşım */
/* Mobil (varsayılan, 320px+) */
.kart-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--bosluk-4);
}
/* Tablet (640px+) */
@media (min-width: 640px) {
.kart-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop (1024px+) */
@media (min-width: 1024px) {
.kart-grid {
grid-template-columns: repeat(3, 1fr);
}
.sayfa-duzen {
grid-template-columns: 280px 1fr;
}
}
/* Büyük ekran (1280px+) */
@media (min-width: 1280px) {
.konteyner { max-width: 1280px; }
}
/* Karanlık mod tercihi */
@media (prefers-color-scheme: dark) {
:root {
--renk-metin: #f1f5f9;
--renk-arkaplan: #0f172a;
--renk-sinir: #1e293b;
}
}Animasyon ve Geçişler
// CSS //
/* Yumuşak geçiş */
.buton {
background: var(--renk-birincil);
color: white;
padding: var(--bosluk-3) var(--bosluk-6);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
font-weight: 600;
transition: background 200ms ease, transform 150ms ease, box-shadow 200ms ease;
}
.buton:hover {
background: #0284c7;
transform: translateY(-1px);
box-shadow: var(--golge-md);
}
.buton:active {
transform: translateY(0);
}
/* Yüklenme animasyonu */
@keyframes doner {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.yuklenme {
width: 2rem;
height: 2rem;
border: 3px solid var(--renk-sinir);
border-top-color: var(--renk-birincil);
border-radius: 50%;
animation: doner 0.8s linear infinite;
}
/* Kayma animasyonu */
@keyframes yukariKay {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animasyonlu {
animation: yukariKay 300ms ease-out both;
}Bileşen Örneği: Badge
// CSS //
/* Yeniden kullanılabilir badge bileşeni */
.badge {
display: inline-flex;
align-items: center;
gap: var(--bosluk-1);
padding: var(--bosluk-1) var(--bosluk-3);
font-size: 0.75rem;
font-weight: 600;
border-radius: var(--radius-tam);
letter-spacing: 0.025em;
text-transform: uppercase;
}
.badge--birincil { background: #dbeafe; color: #1d4ed8; }
.badge--basari { background: #dcfce7; color: #15803d; }
.badge--uyari { background: #fef9c3; color: #a16207; }
.badge--hata { background: #fee2e2; color: #b91c1c; }
/* Kullanım */// HTML //
<span class="badge badge--basari">Yayınlandı</span>
<span class="badge badge--uyari">İncelemede</span>
<span class="badge badge--hata">Reddedildi</span>Sonuç
Semantik HTML, CSS Custom Properties ve Grid/Flexbox kombinasyonu modern ve erişilebilir arayüzlerin temelini oluşturur. Responsive tasarım ve sistem tasarımı yaklaşımıyla tutarlı bir görsel dil oluşturabilirsiniz. Bir sonraki konuda Tailwind CSS ile bu temeli nasıl utility-first bir framework üzerine inşa edeceğimizi göreceğiz.