Yükleniyor...

CSS Mini Proje — Stilli Landing

CSS Özeti araç setinizi haritaladı. Bu oturum onu kullanır. Elle küçük bir stilli landing kuracaksınız: kimlik çubuğu, net bir CTA’lı hero, birkaç özellik kartı ve sakin bir altbilgi. Yeni egzotik özellik yok — yalnızca daha önce çalıştığınız becerileri birleştirmek (cascade, box model, Flex, Grid, responsive, odak).

Doğrudan yanıt

1) Önce bölümleri taslaklayın: header + nav, hero + CTA, özellikler, footer.
2) Bunları max-width’li bir kapsayıcı içinde semantik HTML (header, nav, main, section, footer) ile işaretleyin.
3) Ortak renk, boşluk ve radius değerlerini :root custom property’lerine koyun.
4) Üst çubuk ve hero satırı için Flex; özellik kartları için Grid kullanın.
5) Tek bir media-query breakpoint ekleyin; bağlantılarda ve CTA’da :focus-visible kalsın.
6) Bitti demek, dar viewport’ta sayfanın okunaklı olması ve Tab’ın hâlâ odağı göstermesi demektir — her CSS numarasının bir kez görünmesi değil.

Bu landing için kurulum sırası

📊 Landing sections and CSS jobs

Section HTML job CSS job
Header + nav Site adı + sayfa içi bağlantılar Flex satırı, gap, sakin arka plan
Hero Başlık, kısa pitch, birincil CTA Flex veya yığın; güçlü kontrast; net düğme
Features Üç kısa kart Eşit izler ve gap ile Grid
Footer İletişim veya yasal satır Sakin padding; okunaklı soluk metin
Shared tokens — Her yerde yeniden kullanılan :root renk, boşluk, radius
Responsive check Viewport meta zaten HTML’de Hero/kartları yığan tek breakpoint

Önce yapıyı bağlayın, sonra süsleyin. div çorbası üstündeki güzel gradyanlar, sakin CSS’li düz semantik bir iskeletten daha zor düzelir.

Adım 1 — Semantik iskelet

Landmark’larla başlayın. Sınıflar görünümü inceler; öğeler okuyucular ve yardımcı teknolojiler için bölgeleri adlandırır.

Landing landmarks shell

html 
<body>
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="#">BrightDesk</a>
<nav class="site-nav" aria-label="Primary">
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>

<main>
<section class="hero">
<div class="container hero-inner">
<div class="hero-copy">
<h1>Ship a calm landing with CSS you already know</h1>
<p class="lede">Flex the bar, Grid the cards, keep focus visible.</p>
<a class="btn" href="#features">See features</a>
</div>
</div>
</section>

<section id="features" class="features">
<div class="container">
<h2>What you practice</h2>
<div class="feature-grid">
<article class="card"><h3>Tokens</h3><p>Shared color and space.</p></article>
<article class="card"><h3>Layout</h3><p>Flex and Grid on purpose.</p></article>
<article class="card"><h3>Polish</h3><p>Breakpoint and focus.</p></article>
</div>
</div>
</section>
</main>

<footer id="contact" class="site-footer">
<div class="container">
<p>Practice page — style by hand before frameworks.</p>
</div>
</footer>
</body>

Demo metnini İngilizce ve kısa tutun. Kendi projenizde herhangi bir ürün adı olabilir — marka hikâyesinden çok yapı önemlidir.

Adım 2 — :root üzerinde tasarım token’ları

Tekrarlayan değerleri custom property’lere çekin ki sayfayı incelerken palet ve boşluk tutarlı kalsın.

Shared tokens for the landing

css 
:root {
--bg: #0b1220;
--surface: #111827;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-ink: #0c4a6e;
--radius: 0.75rem;
--space: 1rem;
--max: 960px;
--focus: #fbbf24;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
background: var(--bg);
color: var(--text);
}

.container {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--space);
}

Token’lar süs değildir — kopyala-yapıştır sapmasını durdururlar. --accent’i bir kez değiştirin; CTA, bağlantılar ve odak ipuçları hizalı kalabilir.

Adım 3 — Header ve nav için Flex

Tek boyutlu bir satır Flex işidir: bir yanda logo, diğer yanda bağlantılar, tutarlı gap.

Flex header bar

css 
.site-header {
background: var(--surface);
border-bottom: 1px solid #1f2937;
}

.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space);
padding: 0.75rem 0;
}

.logo {
color: var(--text);
font-weight: 700;
text-decoration: none;
}

.site-nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.site-nav a {
color: var(--muted);
text-decoration: none;
}

.site-nav a:hover {
color: var(--accent);
}

flex-wrap, media query büyük bölümleri yığmadan önce dar ekranlarda çubuğu dürüst tutar.

Adım 4 — Hero bandı

Pitch’e yer verin, kontrastı güçlü tutun ve CTA’yı birincil eylem gibi gösterin.

Hero copy and primary CTA

css 
.hero {
padding: 3rem 0 2.5rem;
background:
radial-gradient(circle at top right, #1e3a5f 0%, transparent 45%),
var(--bg);
}

.hero-inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 40rem;
}

.hero h1 {
margin: 0;
font-size: clamp(1.75rem, 4vw, 2.5rem);
line-height: 1.15;
}

.lede {
margin: 0;
color: var(--muted);
font-size: 1.05rem;
}

.btn {
display: inline-block;
width: fit-content;
padding: 0.75rem 1.25rem;
border-radius: var(--radius);
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
text-decoration: none;
}

.btn:hover {
filter: brightness(1.05);
}

Başlıktaki clamp, önceki derslerden küçük modern bir dokunuştur — yararlı, zorunlu değil. CTA okunaklı kalmalı: accent arka plan ve daha koyu mürekkep; soluk üstüne soluk değil.

Adım 5 — Özellik kartları için Grid

İki eksen (eşit kartların satır ve sütunları) Grid’e aittir. Kart padding ve border’ını sakin tutun.

Feature cards with Grid

css 
.features {
padding: 2rem 0 3rem;
}

.features h2 {
margin: 0 0 1rem;
}

.feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space);
}

.card {
padding: 1.25rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid #1f2937;
}

.card h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
}

.card p {
margin: 0;
color: var(--muted);
}

.site-footer {
padding: 1.5rem 0 2rem;
border-top: 1px solid #1f2937;
color: var(--muted);
font-size: 0.95rem;
}

Mobilde tek sütun yeter. Grid’i bir breakpoint’te genişletin — üç kart için üçüncü bir düzen sistemi icat etmeyin.

Adım 6 — Breakpoint ve görünür odak

Tek dürüst bir breakpoint artı odak halkaları alıştırma sayfasını bitirir. Klavye kullanıcıları hâlâ nerede olduklarını görmelidir.

Widen cards and keep focus visible

css 
@media (min-width: 640px) {
.feature-grid {
grid-template-columns: repeat(3, 1fr);
}

.hero {
padding-top: 4rem;
}
}

a:focus-visible,
.btn:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}

Erişilebilirlik stillerini zaten derinlemesine çalıştınız. Burada yalnızca alışkanlığı uygularsınız: odak ipucunu kaybeden güzel bir CTA yayınlamayın.

Kendiniz deneyin

  1. index.html + styles.css oluşturun; landmark iskeletini yapıştırın; stil sayfasını bağlayın.
  2. :root token’larını ve body/container kurallarını ekleyin; sayfanın ortalanmış ve okunaklı olduğunu doğrulayın.
  3. Header’ı Flex, özellik kartlarını Grid ile stilleyin (tek sütun, 640px’ten üç).
  4. CTA’yı stilleyin; logo, nav ve düğmede Tab ile gezin — odak görünür kalmalı.
  5. Telefon genişliğine küçültün: yatay kaydırma yok, yığılmış kartlar, kullanılabilir dokunma hedefleri.
  6. İsteğe bağlı: .btn üzerine hover transition eklerseniz prefers-reduced-motion da ekleyin.

Yaygın hatalar

  • Bu küçük sayfayı elle stillendirmeden önce bileşen kütüphanesi açmak
  • Her bölümü Flex/Grid akışı yerine position: absolute ile boyamak
  • Büyük ekranlarda satırlar kenardan kenara uzansın diye kapsayıcıda max-width atlamak
  • CTA ve nav bağlantılarında odak outline’larını «tasarım için» kaldırmak
  • Üç kart için beş breakpoint eklemek — tek net genişletme adımı yerine
  • Bu laboratuvarı özellik kontrol listesi sanmak — her numarayı bir kez kopyalamak — tutarlı bir sayfa yayınlamak yerine
  • Son dersleri unutmak: özet becerileri haritaladı; erişilebilirlik görünür odak istedi — ikisi burada da geçerli

Özet

  • Bu mini proje kurs becerilerini tek bir stilli landingde birleştirir
  • Önce yapı (landmark’lar), sonra token’lar, Flex çubuk, Grid kartlar, breakpoint, odak
  • Tek boyutlu chrome için Flex; özellik matrisi için Grid
  • Bitti demek mobilde okunaklı ve klavye-güvenli demektir — framework iskelesi değil
  • Sonraki (isteğe bağlı ileri): cascade kenarlarını derinleştirmek isterseniz CSS !important (important); yoksa elle daha fazla küçük sayfa pratik edin

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 70 / 72
Css Ders