جاري التحميل...

مشروع مصغّر 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 هادئ.

الخطوة 1 — الهيكل الدلالي

ابدأ بالمعالم. الفئات تُحسّن المظهر؛ العناصر تُسمّي المناطق للقرّاء والتقنيات المساعدة.

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>

أبقِ نص العرض الإنجليزي قصيراً. مشروعك الخاص يمكنه أي اسم منتج — الهيكل أهم من قصة العلامة.

الخطوة 2 — رموز التصميم على :root

اجمع القيم المتكررة في خصائص مخصّصة حتى تبقى اللوحة والمسافات متسقة عند التعديل.

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 والروابط وإشارات التركيز متوافقة.

الخطوة 3 — 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 يُبقي الشريط صادقاً على الشاشات الضيقة قبل أن تكدّس استعلام الوسائط الأقسام الأكبر.

الخطوة 4 — شريط الهيرو

امنح الرسالة مساحة، أبقِ التباين قوياً، واجعل 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 بحبر أغمق، لا باهت فوق باهت.

الخطوة 5 — 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;
}

على الجوال عمود واحد كافٍ. وسّع الشبكة عند نقطة توقف — لا تخترع نظام تخطيط ثالثاً لثلاث بطاقات.

الخطوة 6 — نقطة توقف وتركيز مرئي

نقطة توقف صادقة مع حلقات تركيز تُنهي صفحة التمرين. مستخدم لوحة المفاتيح يجب أن يرى أين هو.

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 جميلاً بلا إشارة تركيز.

جرّب بنفسك

  1. أنشئ index.html وstyles.css والصق هيكل المعالم؛ اربط ورقة الأنماط.
  2. أضف رموز :root وقواعد body/container؛ تأكد أن الصفحة موسّطة ومقروءة.
  3. نسّق الرأس بـ Flex وبطاقات الميزات بـ Grid (عمود واحد، ثم ثلاثة من 640px).
  4. نسّق CTA؛ مرّ بـ Tab عبر الشعار والتنقل والزر — يجب أن يبقى التركيز مرئياً.
  5. صغّر العرض لعرض هاتف: بلا تمرير أفقي، بطاقات متكدسة، أهداف لمس قابلة للاستخدام.
  6. اختياري: إن أضفت transition على .btn، أضف أيضاً prefers-reduced-motion.

أخطاء شائعة

  • فتح مكتبة مكوّنات قبل أن تستطيع تنسيق هذه الصفحة الصغيرة يدوياً
  • تلوين كل قسم بـ position: absolute بدل تدفق Flex/Grid
  • تخطي max-width على الحاوية فتمتد الأسطر من حافة إلى حافة على الشاشات الكبيرة
  • إزالة outlines التركيز «للتصميم» على CTA وروابط التنقل
  • إضافة خمس نقاط توقف لثلاث بطاقات بدل خطوة توسيع واحدة واضحة
  • معاملة هذا المختبر كقائمة تحقق خصائص — انسخ كل حيلة مرة — بدل تسليم صفحة متماسكة
  • نسيان الدروس الأخيرة: الملخص رسم خريطة المهارات؛ إمكانية الوصول فرضت تركيزاً مرئياً — كلاهما ما زال سارياً هنا

ملخص

  • هذا المشروع المصغّر يجمع مهارات الدورة في صفحة هبوط منسّقة واحدة
  • الهيكل أولاً (معالم)، ثم الرموز، شريط Flex، بطاقات Grid، نقطة توقف، تركيز
  • Flex لإطار أحادي البعد؛ Grid لمصفوفة الميزات
  • الانتهاء يعني مقروءاً على الجوال وآمناً للوحة المفاتيح — لا سقالة جاهزة لإطار
  • التالي (متقدم اختياري): CSS !important (important) إن أردت حالات تتابع أعمق؛ وإلا تمرّن على صفحات صغيرة أخرى يدوياً

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓
7
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 70 من 72
Css درس تعليمي