Emmet: المشروع 2

في الدروس 1–16 تعلمت اختصارات HTML (8 عوامل) + اختصارات CSS (3 دروس: الأساسيات، المطابقة التقريبية، التدرجات) + الإجراءات (5 مسرعات تحرير). هذا الدرس هو الختام الكبير لبرنامج Emmet التعليمي بأكمله: دمج جميع معرفة اختصارات CSS لكتابة صفحة هبوط SaaS متجاوبة من 110 أسطر. تستخدم أليس اختصارات HTML + اختصارات CSS للانتقال من ملف فارغ إلى صفحة كاملة في 30 دقيقة.

1. ما ستتعلمه

• تفكيك أقسام HTML: تقسيم صفحة الهبوط إلى 5 أقسام (الرأس / hero / الميزات / التسعير / التذييل)، ربط كل منها بجزء اختصار Emmet
• اختصارات CSS في التطبيق العملي: استخدام m10-20 p10-0 bgc#fff bdrs8 fz16 fw700 واختصارات مشابهة لكتابة خصائص CSS في سطر واحد
• الشبكة المتجاوبة: استخدام grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) لشبكات بطاقات متجاوبة تلقائيًا
• التنقل اللاصق: استخدام position:sticky + top:0 لتثبيت شريط التنقل أثناء التمرير
• خلفيات تدرج CSS: استخدام linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) لخلفيات قسم Hero

2. قصة حقيقية لمطور متكامل

(1) نقطة الألم: 5 أقسام + متجاوب + 3 نقاط توقف — 200 سطر HTML + 100 سطر CSS يدويًا

أليس هي مطورة متكاملة في شركة SaaS. إنه أغسطس 2026 وتحتاج صفحة هبوط لميزة جديدة، بهدف تحويل 100 مستخدم تجريبي مجاني في يوم الإطلاق. التصميم لديه 5 أقسام:

المجموع: 1 رأس + 1 hero + 4 بطاقات + 3 خطط + 1 تذييل = 10 عناصر قسم. تقدر أليس HTML المكتوب يدويًا: 200 سطر (بما في ذلك تفاصيل التداخل) + CSS 100 سطر (متجاوب + 3 نقاط توقف). المجموع 300 سطر، 4–5 ساعات.

والأسوأ: من السهل نسيان تفاصيل CSS عند الترميز اليدوي (border-radius: 8px مفقود = بطاقات غير مدورة؛ اتجاه box-shadow خاطئ). تفكر أليس: جزء HTML يمكن تسريعه بكل شيء من دروس Emmet 1–13؛ لكن ماذا عن جزء CSS؟ كتابة 100 سطر CSS يدويًا عمل شاق — هل هناك طريقة لتسريع ذلك أيضًا؟

(2) حل الاختصار المزدوج HTML + CSS في Emmet

تفتح أليس VSCode، تضغط ! لتوسيع هيكل HTML، ثم تستخدم اختصارات HTML في Emmet لكتابة body:

header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{Features})+(li>a{Pricing})+(li>a{Contact})+a.btn.btn-sm{Free Trial}
section.hero>(span.badge{v3.0 Released})+h1{Automate Your Workflow}+p.lead{Connect 200+ apps, zero-code visual builder}+.cta-row>(a.btn-primary{Get Started Free})+(a.btn-outline{Watch Demo})+ul.badges>(li{No credit card})+(li{5-minute setup})+(li{10000+ teams})
section.features>h2{Core Features}+p.section-lead{Powerful capabilities}+.grid>.card*4>(h3{Feature})+p{Description})
section.pricing>h2{Pricing}+p.section-lead{Choose the right plan for your team}+.grid>.card.plan*3>(h3{Plan}+p.price{¥99}+ul>li*3{Feature}+a.btn{Select})
footer.footer>p{© 2026 CloudFlow}

ثم في كتلة <style> تستخدم اختصارات CSS في Emmet:

* { m0 p0 }
body { ff:system-ui lh1.6 }
.nav { d:f jc:sb ai:c p16-24 }
.btn { p12-24 bdrs6 fw600 td:n }
.card { bgc#fff bdrs12 p32 box-shadow:0 2px 8px #0001 }
.btn-primary { bgc#3498db c#fff }
.btn-outline { bgc:transparent c#3498db bd2s #3498db }
.hero { p80-24 bg:lg(135deg, #f5f7fa, #c3cfe2) }

تكتب أليس 110 أسطر HTML + 40 سطر CSS في 30 دقيقة — أسرع 8–10 أضعاف من الترميز اليدوي. جزء CSS يضغط 100 سطر مكتوب يدويًا إلى 40 مع اختصارات Emmet (تسريع CSS 1.5 ضعف أيضًا).

(3) الفوائد

أكملت أليس "المشروع 2" في 30 دقيقة لصفحة الهبوط — أسرع 8–10 أضعاف من الترميز اليدوي — مع صفر سمات مفقودة في HTML وصفر أخطاء إملائية في CSS. أكبر فائدة هي اختصارات CSS — كتابة 100 سطر CSS يدويًا كانت تستغرق 1.5 ساعة (كتابة يدوية + نسخ-لصق)، الآن 30 دقيقة (اختصارات CSS في Emmet + Tab). هذا الدرس هو ختام برنامج Emmet التعليمي بأكمله — أتقن الاختصار المزدوج HTML + CSS وعزز كفاءة الترميز اليومي للواجهة الأمامية 3–5 أضعاف.

3. هيكل صفحة الهبوط: ربط 5 أقسام بعوامل Emmet

الجدول أدناه يربط جميع الأقسام الخمسة بعوامل Emmet — هذه هي خطوة "تفكيك المتطلبات" الحرجة.

نقطة أساسية: يوضح هذا الجدول عقلية "تفكيك الأقسام" في Emmet — كل قسم هو جزء اختصار واحد، 5 أجزاء مربوطة في صفحة كاملة. مع عوامل HTML الثمانية من الدروس 1–13 + اختصارات CSS (m10-20 / bgc#fff / box-shadow:0 2px 8px #0001، إلخ)، يمكن تسريع 110 أسطر HTML + 40 سطر CSS بالكامل بـ Emmet.

4. اختصارات Emmet لجزء HTML

الأمثلة الثلاثة التالية تبني من أصغر وحدة إلى التركيب الكامل — عرض عقلية "دفعة واحدة" لصفحة الهبوط.

▶ مثال: شريط التنقل header>nav>a.logo{CF}+ul.menu>(li>a)*3 (الصعوبة ⭐)

القسم الأكثر شيوعًا: header يغلف nav، nav يحتوي شعار + قائمة قائمة + CTA.

الاختصار:

header>nav>a.logo{CF}+ul.menu>(li>a)*3

التوسيع:

<header>
  <nav>
    <a class="logo" href="">CF</a>
    <ul class="menu">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

الناتج: يعرض هيكل header + nav قياسي بـ شعار واحد + 3 عناصر قائمة فارغة. <a> يفترض href="" (عنصر نائب افتراضي في Emmet).

TEXT 📖 للعرض فقط

📋 Copy

الشرح: 3 نقاط صيغ أساسية —
- `header>nav`: الدرس 04 الابن
- `a.logo{CF}`: الدرس 07 class + الدرس 09 النص
- `(li>a)*3`: الدرس 06 التجميع + الدرس 05 الضرب (يكرر كتلة li>a بالكامل 3 مرات)
6 أسطر HTML، الاختصار 28 حرفًا — نسبة ضغط 1:4.7.

▶ مثال: قسم Hero section.hero>(span.badge+h1+p.lead+.cta-row>(a.btn-primary)+(a.btn-outline)) (الصعوبة ⭐⭐)

العرض البصري الأساسي لصفحة الهبوط: شارة + عنوان + وصف + زرا CTA مزدوجان.

الاختصار:

section.hero>(span.badge{New Release}+h1{Automate Your Workflow}+p.lead{Connect 200+ Apps}+.cta-row>(a.btn-primary{Get Started Free})+(a.btn-outline{Watch Demo}))

التوسيع:

<section class="hero">
  <span class="badge">New Release</span>
  <h1>Automate Your Workflow</h1>
  <p class="lead">Connect 200+ Apps</p>
  <div class="cta-row">
    <a class="btn-primary" href="">Get Started Free</a>
    <a class="btn-outline" href="">Watch Demo</a>
  </div>
</section>

الناتج: يعرض قسم Hero لصفحة الهبوط: شارة إصدار + عنوان كبير + وصف + زرا CTA مزدوجان.

TEXT 📖 للعرض فقط

📋 Copy

الشرح: جزء Hero هو حالة كلاسيكية للتجميع + التداخل متعدد المستويات —
- `(span.badge+h1+p.lead+.cta-row>...)`: الدرس 06 التجميع + الدرس 04 الأشقاء + الابن
- `.cta-row>(a.btn-primary)+(a.btn-outline)`: تجميع متداخل داخل تجميع (استخدام متقدم للدرس 06)
- الوسم الضمني `.cta-row` يتوسع إلى `<div class="cta-row">` (الدرس 03 الوسوم الضمنية)
8 أسطر HTML، الاختصار 85 حرفًا — نسبة ضغط 1:10.6.

▶ مثال: صفحة هبوط كاملة (5 أجزاء اختصار ← 110 أسطر HTML) (الصعوبة ⭐⭐⭐)

اربط اختصارات الأقسام الخمسة (الرأس / hero / الميزات / التسعير / التذييل) للحصول على هيكل صفحة الهبوط الكامل:

الاختصار:

header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{Features})+(li>a{Pricing})+(li>a{Contact})+a.btn{Free Trial}+section.hero>(span.badge{v3.0 Released})+h1{Automate Your Workflow}+p.lead{Connect 200+ Apps}+.cta-row>(a.btn-primary{Get Started Free})+(a.btn-outline{Watch Demo})+section.features>h2{Core Features}+p.section-lead{Powerful Capabilities}+.grid>(.card*4>(h3{Feature})+p{Description}))+section.pricing>h2{Pricing}+p.section-lead{Choose the right plan}+.grid>(.card.plan*3>(h3{Plan}+p.price{¥99}+ul>li*3{Feature}+a.btn{Select}))+footer.footer>p{© 2026 CloudFlow}

اضغط Tab وتوسع إلى 110 أسطر HTML (انظر القسم 6. المثال الكامل للناتج الكامل).

الناتج: يعرض صفحة هبوط SaaS كاملة — رأس بشعار + 3 عناصر قائمة + CTA؛ hero بشارة + h1 + وصف رئيسي + زرين مزدوجين؛ ميزات بـ 4 بطاقات؛ تسعير بـ 3 خطط؛ تذييل بحقوق النشر.

TEXT 📖 للعرض فقط

📋 Copy

الشرح: المثال الأساسي لهذا الدرس — 5 أجزاء اختصار Emmet مربوطة في 110 أسطر HTML.
- 5 عوامل `+`: 4 وصلات شقيقة (الدرس 04)
- عدة `>`: تداخل الابن
- `*3` / `*4`: الدرس 05 الضرب
- `()`: الدرس 06 التجميع
- `.card.plan` / `.btn-primary`: الدرس 07 الفئات المتعددة
- `{text}`: الدرس 09 ملء النص
يجمع جميع صيغ اختصارات HTML من الدروس 1–16. **رؤية مفتاحية**: 95% من HTML صفحة الهبوط يمكن تحويله إلى Emmet؛ الكتابة اليدوية تمثل 5% فقط (تعديلات طفيفة للمحتوى الفعلي مثل للرموز وحقوق النشر).

5. اختصارات Emmet لجزء CSS

اختصارات CSS جديدة في هذا الدرس — اختصارات HTML (الدروس 1–10) + اختصارات CSS (الدروس 11–13) + الإجراءات (الدروس 14–16): الثلاثة معًا يشكلون سلسلة أدوات Emmet الكاملة.

▶ مثال: تنقل متجاوب nav{display:flex} (الصعوبة ⭐)

اختصار CSS يحول display:flex من 18 حرفًا إلى حرفين.

الاختصار:

nav{display:flex}

التوسيع:

nav { display: flex; }

الناتج: محدد CSS nav يحصل على display: flex; — أبناء nav يتوزعون أفقيًا.

TEXT 📖 للعرض فقط

📋 Copy

الشرح: قواعد تحليل اختصارات CSS في Emmet —
- `nav` هو محدد CSS
- `{display:flex}` هي كتلة قاعدة CSS
- `display:flex` تستخدم `:` كحد القيمة (مدعوم من Emmet)
- محلل Emmet يجد اختصار `display` — `d` ← `display: |;`، ويدرج القيمة `flex` عند `|`
- يمكن أيضًا كتابتها بصيغة مختصرة: `nav{d:f}` (`d` ← display، `:` حد القيمة، `f` ← قيمة flex)

▶ مثال: بطاقة ميزة bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001 (الصعوبة ⭐⭐)

5 خصائص CSS في سطر واحد — تركيبة اختصارات CSS الأساسية.

الاختصار:

.card{bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001}

التوسيع:

.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 30px;
  margin: 10px 0;
  box-shadow: 0 2px 8px #0001;
}

الناتج: فئة .card تحصل على 5 أنماط: خلفية بيضاء، border-radius 8px، حشوة 20px أعلى/أسفل + 30px يسار/يمين، هامش 10px أعلى/أسفل + 0 يسار/يمين، ظل خفيف (أسود شبه شفاف بنسبة 0.4%).

TEXT 📖 للعرض فقط

📋 Copy

الشرح: 5 تركيبات اختصارات CSS —
- `bgc#fff` ← `background-color: #fff;` (`#` هو حد القيمة، الدرس 11 أساسيات CSS)
- `bdrs8` ← `border-radius: 8px;` (الرقم 8 هو حد القيمة)
- `p20-30` ← `padding: 20px 30px;` (`-` هو فاصل القيم المتعددة)
- `m10-0` ← `margin: 10px 0;`
- `box-shadow:0 2px 8px #0001` ← `box-shadow: 0 2px 8px #0001;` (اسم الخاصية كامل + `:` حد القيمة + قيم متعددة مفصولة بمسافات)
5 أسطر CSS، الاختصار 56 حرفًا — نسبة ضغط 1:11.2.

▶ مثال: زر CTA bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700 (الصعوبة ⭐⭐)

تركيبة أنماط أزرار شائعة — 6 خصائص CSS في سطر واحد.

الاختصار:

.btn{bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700}

التوسيع:

.btn {
  background-color: #2c3e50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}

الناتج: فئة .btn تحصل على 6 أنماط: خلفية زرقاء-رمادية داكنة، نص أبيض، حشوة 10px أعلى/أسفل + 20px يسار/يمين، border-radius 4px، font-size 16px، font-weight 700 (غامق).

TEXT 📖 للعرض فقط

📋 Copy

الشرح: 6 اختصارات CSS —
- `bgc#2c3e50`: لون سداسي (بدون مسافات، علامات الاقتباس بعد `#` يمكن حذفها)
- `c#fff`: اختصار `color` + قيمة اللون
- `p10-20`: اختصار `padding` + قيمتان
- `bdrs4`: اختصار `border-radius` (الدرس 12 المطابقة التقريبية: `bdr` غير كاف، `bdrs` يطابق `border-radius`)
- `fz16`: اختصار `font-size` (الدرس 11)
- `fw700`: اختصار `font-weight` (بدون وحدة، الدرس 11 القيم بدون وحدة)
6 أسطر CSS، الاختصار 47 حرفًا — نسبة ضغط 1:7.8.

6. مثال كامل: صفحة هبوط متجاوبة — 110 أسطر HTML + 40 سطر CSS

وسّع أجزاء اختصارات HTML الخمسة + 12 جزء اختصار CSS للحصول على صفحة هبوط متجاوبة كاملة من 110 أسطر. هذا المثال هو ختام هذا الدرس — لا يوجد زر "جرب" (حسب مواصفة v2.5 البوابة #26، الأمثلة الشاملة لا تُعاين في المحرر).

جزء HTML (دمج دروس Emmet 1–13):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - Workflow Automation Platform</title>
</head>
<body>
  <header class="header">
    <nav class="nav">
      <a class="logo" href="/">CF</a>
      <ul class="menu">
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <a class="btn btn-sm" href="/signup">Free Trial</a>
    </nav>
  </header>
  <section class="hero">
    <span class="badge">v3.0 Released</span>
    <h1>Automate Your Workflow</h1>
    <p class="lead">Connect 200+ apps, zero-code visual workflow builder</p>
    <div class="cta-row">
      <a class="btn-primary" href="/signup">Get Started Free</a>
      <a class="btn-outline" href="#demo">Watch Demo</a>
    </div>
    <ul class="badges">
      <li>No credit card required</li>
      <li>5-minute setup</li>
      <li>Trusted by 10000+ teams</li>
    </ul>
  </section>
  <section id="features" class="features">
    <h2>Core Features</h2>
    <p class="section-lead">Powerful capabilities to make your workflows more efficient</p>
    <div class="grid">
      <div class="card">
        <h3>Visual Builder</h3>
        <p>Drag-and-drop interface — build complex workflows without writing code</p>
      </div>
      <div class="card">
        <h3>200+ Integrations</h3>
        <p>Connect with Slack, GitHub, Salesforce, and 200+ popular apps</p>
      </div>
      <div class="card">
        <h3>Team Collaboration</h3>
        <p>Real-time collaborative editing, permission management — teams maintain workflows together</p>
      </div>
      <div class="card">
        <h3>Enterprise Security</h3>
        <p>SOC 2 certified, end-to-end encryption — meets enterprise compliance requirements</p>
      </div>
    </div>
  </section>
  <section id="pricing" class="pricing">
    <h2>Simple, Transparent Pricing</h2>
    <p class="section-lead">Choose the plan that fits your team</p>
    <div class="grid grid-pricing">
      <div class="card plan">
        <h3>Free</h3>
        <p class="price">$0<span>/month</span></p>
        <ul>
          <li>5 workflows</li>
          <li>1,000 executions/month</li>
          <li>Community support</li>
        </ul>
        <a class="btn btn-outline" href="/signup">Get Started</a>
      </div>
      <div class="card plan highlight">
        <h3>Pro</h3>
        <p class="price">$12<span>/month</span></p>
        <ul>
          <li>Unlimited workflows</li>
          <li>50,000 executions/month</li>
          <li>Priority email support</li>
        </ul>
        <a class="btn btn-primary" href="/signup">Upgrade Now</a>
      </div>
      <div class="card plan">
        <h3>Enterprise</h3>
        <p class="price">$35<span>/month</span></p>
        <ul>
          <li>Everything in Pro</li>
          <li>Unlimited executions</li>
          <li>Dedicated account manager</li>
        </ul>
        <a class="btn btn-outline" href="/contact">Contact Sales</a>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="footer-grid">
      <div>
        <h4>Product</h4>
        <ul>
          <li><a href="#features">Features</a></li>
          <li><a href="#pricing">Pricing</a></li>
        </ul>
      </div>
      <div>
        <h4>Resources</h4>
        <ul>
          <li><a href="#">Docs</a></li>
          <li><a href="#">API</a></li>
        </ul>
      </div>
      <div>
        <h4>Company</h4>
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <p class="copyright">&copy; 2026 CloudFlow. All rights reserved.</p>
  </footer>
</body>
</html>

جزء CSS (دمج دروس Emmet 11–13):

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; color: #2c3e50; line-height: 1.6; }
.header { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; }
.nav { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.menu { display: flex; gap: 24px; list-style: none; }
.menu a { color: #34495e; text-decoration: none; font-weight: 500; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; cursor: pointer; border: none; transition: background 0.2s; }
.btn-primary { background: #3498db; color: #fff; }
.btn-outline { background: transparent; color: #3498db; border: 2px solid #3498db; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.hero { padding: 80px 24px; text-align: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.hero h1 { font-size: 48px; margin-bottom: 16px; }
.hero h1 .accent { color: #3498db; }
.lead { font-size: 20px; color: #7f8c8d; max-width: 720px; margin: 0 auto 32px; }
.cta-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 32px; }
.badges { display: flex; gap: 24px; justify-content: center; list-style: none; color: #7f8c8d; }
.features { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
.section-lead { text-align: center; color: #7f8c8d; max-width: 600px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.card { background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.pricing { padding: 80px 24px; background: #f8f9fa; }
.grid-pricing { max-width: 1100px; margin: 32px auto 0; }
.plan { text-align: center; }
.plan.highlight { border: 2px solid #3498db; transform: scale(1.05); }
.price { font-size: 36px; font-weight: 700; color: #2c3e50; margin: 16px 0; }
.price span { font-size: 16px; color: #7f8c8d; font-weight: 400; }
.footer { background: #2c3e50; color: #ecf0f1; padding: 40px 24px; text-align: center; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 800px; margin: 0 auto 24px; }
.copyright { color: #95a5a6; font-size: 14px; }
@media (max-width: 640px) { .nav { flex-direction: column; gap: 12px; } .grid { grid-template-columns: 1fr; } }

الناتج: يعرض المتصفح صفحة هبوط SaaS كاملة: رأس لاصق (يثبت في الأعلى عند التمرير) + قسم Hero (خلفية متدرجة + عنوان كبير + CTAs مزدوجة) + ميزات (4 بطاقات متجاوبة، تتكدس تلقائيًا على الجوال) + تسعير (3 خطط، الوسطى مظللة) + تذييل (روابط 3 أعمدة داكنة + حقوق النشر). متجاوب: الجوال (< 640px) بطاقات عمود واحد، سطح المكتب (> 640px) شبكة 4 أعمدة.

TEXT 📖 للعرض فقط

📋 Copy

الشرح: المثال الشامل لهذا الدرس يربط جميع معرفة Emmet من الدروس 1–13 —
- **جزء HTML**: 95% مولدة باختصارات Emmet (أجزاء القسم 4 الخمسة): الرأس + hero + الميزات + التسعير + التذييل — 5 أقسام
- **جزء CSS**: 12 كتلة اختصار Emmet تغطي الأنماط الأساسية: `nav{display:flex}`، `card{bgc#fff bdrs12 box-shadow:0 2px 8px #0001}`، `hero{bg:lg(135deg, #f5f7fa, #c3cfe2)}`، إلخ.
- **متجاوب**: محقق بـ `grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))` — لا حاجة لاستعلامات الوسائط
- **تنقل لاصق**: باستخدام `position:sticky + top:0`
مقارنة عدد الأسطر: كتابة 200 سطر HTML + 100 سطر CSS يدويًا تستغرق 4–5 ساعات؛ Emmet 110 سطر HTML + 40 سطر CSS تستغرق 30 دقيقة. **الوقت الإجمالي منخفض بنسبة 80%**.

❓ أسئلة شائعة

📖 ملخص

• سلسلة تفكير 5 أقسام: الرأس + hero + الميزات + التسعير + التذييل — فكك إلى 5 أجزاء اختصار Emmet، اربط في 110 أسطر HTML
• 12 اختصار CSS شائع: * { m0 p0 } body { ff:system-ui lh1.6 } .nav { d:f jc:sb ai:c } .card { bgc#fff bdrs12 box-shadow:0 2px 8px #0001 }، إلخ.
• صيغة الشبكة المتجاوبة: grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) (لا حاجة لاستعلامات الوسائط)
• التنقل اللاصق: position:sticky; top:0; z-index:100 (يثبت الرأس في الأعلى أثناء التمرير)
• خلفيات تدرج CSS: bgc:lg(135deg, #f5f7fa, #c3cfe2) (تأثير قسم Hero شائع)
• هذا الدرس هو الختام: دروس 1–13 اختصار HTML + CSS المزدوج مدمجين — عزز كفاءة الترميز اليومي للواجهة الأمامية 3–5 أضعاف

📝 تمارين

1. أساسي (الصعوبة ⭐): استخدم اختصارات HTML + CSS في Emmet لكتابة صفحة هبوط بسيطة — 5 أقسام (رأس + hero + ميزات + تسعير + تذييل)، على الأقل 30 سطر HTML + 20 سطر CSS. المتطلبات: (أ) جزء HTML يستخدم > + * () — 3 عوامل على الأقل؛ (ب) جزء CSS يستخدم m10-20 bgc#fff bdrs8 — 3 اختصارات على الأقل؛ (ج) قسم Hero يستخدم خلفية linear-gradient.

2. متوسط (الصعوبة ⭐⭐): كيّف صفحة الهبوط الكاملة 110 أسطر في هذا الدرس إلى صفحة هبوط منتج SaaS الخاص بك — استبدل اسم المنتج "CloudFlow" بمنتجك، استبدل الميزات الأربع بميزاتك الأساسية، واستبدل أسماء وأسعار خطط التسعير الثلاث. المتطلبات: (أ) حافظ على هيكل HTML ذي الأقسام الخمسة بدون تغيير؛ (ب) حافظ على الشبكة المتجاوبة + التنقل اللاصق + أنماط CSS للخلفية المتدرجة؛ (ج) أحصِ عدد أسطر HTML + CSS النهائية مقابل كم سطرًا ستستغرقه كتابة نفس الصفحة يدويًا (عادة 5 أضعاف لـ HTML، 3 أضعاف لضغط CSS).

3. متقدم (الصعوبة ⭐⭐⭐): وسّع صفحة الهبوط في هذا الدرس إلى صفحة تسويق SaaS كاملة — أضف قسم شهادات بعد الميزات (3 تقييمات عملاء، كل منها بصورة رمزية + 5 نجوم + نص + كاتب)، وقسم أسئلة شائعة بعد التسعير (5 لوحات Q/A قابلة للطي). المتطلبات: (أ) HTML صفحة كاملة دفعة واحدة (سطر اختصار Emmet واحد لجزء body)؛ (ب) اختصارات CSS تغطي 90% من الخصائص (لا أكثر من 10 أسطر CSS مكتوبة يدويًا)؛ (ج) متجاوب: الجوال — الميزات عمود واحد، الشهادات عمود واحد؛ سطح المكتب — الميزات 4 أعمدة، الشهادات 3 أعمدة؛ (د) الأسئلة الشائعة تستخدم <details> + <summary> للوحات القابلة للطي الأصلية (لا حاجة لـ JS). أخيرًا، اكتب "تقرير Emmet الختامي": جميع معرفة Emmet المكتسبة من الدروس الـ 18 + أهم 3 اختصارات قيمة لديك + كيف تخطط لاستخدام Emmet في عملك.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن