در حال بارگذاری...

پروژه کوچک CSS — لندینگ استایل‌شده

در خلاصهٔ CSS جعبه‌ابزار را نقشه کردید. این جلسه همان نقشه را به‌کار می‌گیرد. یک لندینگ کوچک استایل‌شده با دست می‌سازید: نوار هویت، هیرو با دکمهٔ واضح، چند کارت ویژگی، و فوتر آرام. خاصیت عجیب و تازه در کار نیست — فقط مهارت‌هایی که قبلاً تمرین کرده‌اید کنار هم می‌نشینند (آبشار، باکس‌مدل، Flex، Grid، ریسپانسیو، فوکوس).

جواب مستقیم

1) اول بخش‌ها را بکشید: هدر + ناوبری، هیرو + CTA، ویژگی‌ها، فوتر.
2) با HTML معنایی علامت بزنید (header، nav، main، section، footer) داخل یک ظرف با max-width.
3) رنگ و فاصله و شعاع مشترک را روی :root بگذارید.
4) برای نوار بالا و ردیف هیرو Flex؛ برای کارت‌های ویژگی Grid.
5) یک بریک‌پوینت با media query اضافه کنید و :focus-visible را روی لینک‌ها و CTA نگه دارید.
6) تمام‌شدن یعنی صفحه روی عرض کم خوانا باشد و Tab هنوز فوکوس را نشان بدهد — نه اینکه هر ترفند CSS یک‌بار ظاهر شده باشد.

ترتیب ساخت این لندینگ

📊 Landing sections and CSS jobs

Section	HTML job	CSS job
Header + nav	نام سایت + لینک‌های داخل صفحه	ردیف Flex، فاصله، پس‌زمینهٔ آرام
Hero	تیتر، توضیح کوتاه، CTA اصلی	Flex یا پشته؛ کنتراست قوی؛ دکمهٔ واضح
Features	سه کارت کوتاه	Grid با ستون‌های هم‌سطح و gap
Footer	تماس یا خط حقوقی	پدینگ آرام؛ متن کم‌رنگ خوانا
Shared tokens	—	رنگ و فاصله و شعاع در `:root` برای همه
Responsive check	viewport در HTML	یک بریک‌پوینت که هیرو/کارت‌ها را می‌چیند

اول ساختار را وصل کنید، بعد تزئین. گرادیان قشنگ روی سوپ div سخت‌تر درست می‌شود تا اسکلت معنایی ساده با CSS آرام.

گام ۱ — اسکلت معنایی

با لندمارک شروع کنید. کلاس ظاهر را ظریف می‌کند؛ عنصر برای خواننده و فناوری کمکی منطقه را نام می‌برد.

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>

متن انگلیسی دمو را کوتاه نگه دارید. پروژهٔ خودتان هر نام محصولی می‌خواهد — ساختار مهم‌تر از داستان برند است.

گام ۲ — توکن‌های طراحی روی `:root`

مقدارهای تکراری را در custom property بگذارید تا با هر تغییر، پالت و فاصله یکدست بماند.

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);
}

توکن فقط دکور نیست — جلوی پراکندگی کپی‌پیست را می‌گیرد. یک‌بار --accent را عوض کنید؛ CTA و لینک و نشانهٔ فوکوس هم‌راستا می‌مانند.

گام ۳ — Flex برای هدر و ناوبری

ردیفی یک‌بعدی کار Flex است: لوگو یک طرف، لینک‌ها طرف دیگر، فاصله یکدست.

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 روی عرض کم صادق نگه می‌دارد.

گام ۴ — باند هیرو

به پیام جا بدهید، کنتراست را قوی نگه دارید، و CTA را مثل اقدام اصلی نشان دهید.

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);
}

clamp روی تیتر لمس مدرنی از درس‌های قبل است — مفید، نه اجباری. CTA باید خوانا بماند: پس‌زمینهٔ accent با جوهر تیره‌تر، نه رنگ‌پریده روی رنگ‌پریده.

گام ۵ — Grid برای کارت‌های ویژگی

دو محور (ردیف و ستون کارت‌های هم‌اندازه) کار Grid است. پدینگ و بوردر کارت را آرام نگه دارید.

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;
}

روی موبایل یک ستون کافی است. در بریک‌پوینت Grid را پهن کنید — برای سه کارت سیستم چیدمان سوم اختراع نکنید.

گام ۶ — بریک‌پوینت و فوکوس دیدنی

یک بریک‌پوینت صادق به‌همراه حلقهٔ فوکوس صفحهٔ تمرین را تمام می‌کند. کاربر صفحه‌کلید باید هنوز جای خودش را ببیند.

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;
}

دسترسی‌پذیری استایل را قبلاً عمیق خواندید. اینجا فقط عادت را پیاده می‌کنید: CTA قشنگ بدون نشانهٔ فوکوس نفرستید.

خودتان تمرین کنید

فایل‌های index.html و styles.css بسازید؛ اسکلت لندمارک را بگذارید و استایل‌شیت را لینک کنید.
توکن‌های :root و قوانین body/container را اضافه کنید؛ مطمئن شوید صفحه وسط و خوانا است.
هدر را با Flex و کارت‌ها را با Grid استایل کنید (یک ستون، از 640px سه ستون).
CTA را استایل کنید؛ با Tab از لوگو و ناوبری و دکمه رد شوید — فوکوس باید دیده شود.
عرض گوشی را کوچک کنید: اسکرول افقی نباشد، کارت‌ها روی هم، هدف لمس قابل‌استفاده.
اختیاری: اگر روی .btn transition گذاشتید، prefers-reduced-motion هم اضافه کنید.

اشتباهات رایج

قبل از اینکه این صفحهٔ کوچک را با دست استایل کنید، سراغ کتابخانهٔ کامپوننت رفتن
هر بخش را با position: absolute رنگ‌کردن به‌جای جریان Flex/Grid
حذف max-width ظرف تا خط‌ها روی مانیتور بزرگ لبه به لبه کش بیایند
برداشتن outline فوکوس «برای طراحی» روی CTA و لینک‌های ناوبری
برای سه کارت پنج بریک‌پوینت ساختن به‌جای یک گام پهن‌شدن روشن
این آزمایشگاه را چک‌لیست خاصیت دیدن — هر ترفند یک‌بار — به‌جای یک صفحهٔ منسجم
فراموش‌کردن درس‌های قبل: خلاصه مهارت‌ها را نقشه کرد؛ دسترسی‌پذیری فوکوس دیدنی خواست — هر دو اینجا هم برقرارند

جمع‌بندی

این پروژهٔ کوچک مهارت‌های دوره را در یک لندینگ استایل‌شده جمع می‌کند
اول ساختار (لندمارک)، بعد توکن، نوار Flex، کارت Grid، بریک‌پوینت، فوکوس
Flex برای کروم یک‌بعدی؛ Grid برای ماتریس ویژگی‌ها
تمام یعنی روی موبایل خوانا و برای صفحه‌کلید امن — نه اسکفولد آماده‌به‌فریمورک
بعدی (اختیاری پیشرفته): CSS !important (important) اگر لبه‌های آبشار را می‌خواهید؛ وگرنه همین‌طور صفحهٔ کوچک با دست بسازید

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان