نظام تخطيط HTML / CSS

🎯 السؤال الأساسي

كيف تُصنع صفحات الويب؟ لماذا بعض الصفحات مجرد نصوص بينما تعمل أخرى كتطبيقات تفاعلية؟ هذا السؤال يقودك إلى الركائز الثلاث لتطوير الويب، لتفهم البنية وراء كل صفحة ويب.

1. ما هي HTML و CSS و JavaScript؟

1.1 من الصفحات الثابتة إلى التطبيقات الديناميكية

تخيل ملصقًا تراه في الشارع. يمكنك النظر إليه فقط، لا يمكنك التفاعل معه — الملصق لا يتغير محتواه لأنك نظرت إليه، ولا تظهر معلومات إضافية لأنك لمست مكانًا معينًا.

كانت صفحات الويب القديمة مثل هذه "الملصقات الإلكترونية": يمكن مشاهدتها فقط، لا يمكن تعديلها، محتواها ثابت.

لكن صفحات الويب الحديثة مختلفة تمامًا. إنها مثل تطبيقات سطح المكتب:

يمكنك النقر، السحب، الإدخال، الرفع
الصفحة تتغير في الوقت الفعلي حسب تفاعلك
يمكنها إنجاز مهام معقدة مثل البرامج (مثل تحرير الفيديو عبر الإنترنت)

السبب الأساسي لهذا التحول هو الركائز الثلاث لتقنيات الويب: HTML + CSS + JavaScript.

1.2 تشبيه: بناء منزل

التقنية	🏠 تشبيه المنزل	الدور الفعلي	مثال محدد
HTML	هيكل ومواد المنزل	تحديد محتوى ومستويات الصفحة	هذا جدار، هذه نافذة، هذه غرفة
CSS	الديكور والمظهر للمنزل	التحكم في تنسيق وتخطيط الصفحة	طلاء الجدار بالأزرق، وضع النافذة شرقًا، تبليط الأرضية
JavaScript	الأجهزة الكهربائية والأنظمة الذكية للمنزل	جعل الصفحة تفاعلية ومنطقية	تضغط المفتاح فيضيء المصباح، تفتح الباب فيُسحب الستار تلقائيًا

💡 العلاقة بين الثلاثة

HTML → CSS: يجب أن يكون المنزل موجودًا أولاً قبل تزيينه. HTML هو الأساس، و CSS هو التجميل.

HTML + CSS → JavaScript: يجب أن يكون المنزل والديكور موجودين أولاً قبل تركيب الأنظمة الذكية. JavaScript يجعل الصفحة "الميتة" "حية".

الفكرة الأساسية: لكل منها دوره، ولا غنى عن أي منها. الصفحة التي تحتوي على HTML فقط تكون قبيحة، والصفحة التي تحتوي على HTML+CSS فقط لا يمكنها التفاعل، ولا يمكن صنع "تطبيقات ويب" مثل WeChat Web أو Taobao إلا بوجود الثلاثة معًا.

1.3 جرب بنفسك

👇 العرض التوضيحي التالي يوضح كيفية تعاون HTML/CSS/JavaScript معًا:

HTML / CSS / JavaScript CollaborationSwitch modes to see what each layer does for the same page

①Welcome to my website

②This is a description paragraph

HTML code

<h1>Welcome to my website</h1>
<p>This is a description paragraph</p>
<button>Try me</button>

Execution process

The browser parses tags and identifies content types
h1 is a heading, p is a paragraph, and button is a button
The page renders with default styles

Division of work:HTML defines structure, CSS defines presentation, and JavaScript defines behavior.

2. HTML: الهيكل العظمي لصفحة الويب

2.1 لماذا نحتاج إلى HTML؟

قبل ظهور HTML، كان المحتوى على الإنترنت مجرد نص عادي. مثل النص الذي تقرأه الآن، بدون أي تنسيق، بدون مستويات، بدون روابط.

ما هي مشكلة النص العادي؟

❌ لا يمكن التعبير عن التسلسل الهرمي: لا يمكن التمييز بين العنوان والنص الأساسي والملاحظات
❌ الآلة لا تفهمه: محركات البحث وقارئات الشاشة (للمكفوفين) لا يمكنها فهم المحتوى
❌ لا يمكن التفاعل: لا روابط، لا أزرار، لا حقول إدخال

HTML (HyperText Markup Language) وُلدت لحل هذه المشكلة. تستخدم "الوسوم" (tags) لتمييز معنى المحتوى، لتخبر المتصفح "ما هذا".

2.2 كيف يبدو كود HTML؟

الوحدة الأساسية في HTML هي "الوسم" (tag). الوسوم تُحاط بأقواس زاوية < > وتظهر في أزواج:

html

<h1>هذا عنوان</h1>
<p>هذه فقرة</p>
<a href="url">هذا رابط</a>

المفاهيم الأساسية:

المفهوم	الشرح	مثال
الوسم	علامة محاطة بأقواس زاوية	`<h1>`، `</h1>`
العنصر	الوسم + المحتوى ككل	`<h1>عنوان</h1>`
الخاصية	معلومات إضافية على الوسم	`href="url"`، `class="card"`
التداخل	وضع وسم داخل وسم آخر	`<div><p>نص</p></div>`

2.3 كيف تقرأ كود HTML؟

🎯 قراءة ضرورية للمبتدئين: طريقة قراءة الكود

كثير من المبتدئين يشعرون بالدوار عند رؤية مجموعة من <xxx>. في الواقع، قراءة كود HTML لها طريقة ثابتة:

الخطوة الأولى: ابحث عن "الطبقة الخارجية"

html

<div class="card">        ← هذا حاوية، تحتوي على المحتوى
  <h2>عنوان</h2>
  <p>نص وصفي</p>
</div>

الخطوة الثانية: انظر إلى اسم الوسم لتخمين المعنى

اسم الوسم	تذكره بسرعة	ماذا يحتوي
`<div>`	صندوق كبير	أي محتوى، للتجميع
`<span>`	صندوق صغير	أجزاء نصية، للتمييز
`<p>`	فقرة	فقرة نصية
`<h1>`-`<h6>`	عنوان	نص عنوان، كلما قل الرقم زادت الأهمية
`<a>`	رابط/مرساة	محتوى قابل للنقر للانتقال
`<img>`	صورة	لا يحتوي محتوى، استخدم src للإشارة للصورة
`<button>`	زر	نص/أيقونة قابلة للنقر
`<input>`	حقل إدخال	لا يحتوي محتوى، مكان إدخال المستخدم

الخطوة الثالثة: انظر إلى class و id

html

<div class="user-card" id="user-123">

class="user-card" → "نوع" هذا العنصر، يمكن لـ CSS تحديده بالجملة
id="user-123" → "رقم الهوية" لهذا العنصر، معرف فريد

الخطوة الرابعة: المسافة البادئة تمثل التسلسل الهرمي

html

<body>
  <header>           ← المسافة البادئة تعني أن header هو ابن body
    <nav>            ← nav هو ابن header
      <a>الرئيسية</a>    ← a هو ابن nav
    </nav>
  </header>
</body>

2.4 مرجع سريع لوسوم HTML الشائعة

وسوم هيكلية (تحدد الهيكل العظمي للصفحة):

html

<h1>هذا عنوان من المستوى الأول</h1>
<h2>هذا عنوان من المستوى الثاني</h2>
<p>هذه فقرة</p>
<div>هذه حاوية (للتجميع)</div>
<span>هذه حاوية سطرية (لتمييز النص)</span>

الروابط والوسائط (لإثراء الصفحة):

html

<a href="https://example.com">انقر هنا للانتقال</a>
<img src="photo.jpg" alt="وصف الصورة" />
<video src="movie.mp4" controls></video>

النماذج (لجمع إدخال المستخدم):

html

<form>
  <input type="text" placeholder="أدخل اسم المستخدم" />
  <input type="password" placeholder="أدخل كلمة المرور" />
  <button type="submit">تسجيل الدخول</button>
</form>

الوسوم الدلالية (جديدة في HTML5، تجعل معنى الصفحة أوضح):

html

<header>رأس الصفحة</header>
<nav>شريط التنقل</nav>
<main>منطقة المحتوى الرئيسي</main>
<article>مقال</article>
<aside>الشريط الجانبي</aside>
<footer>تذييل الصفحة</footer>

💡 لماذا نستخدم الوسوم الدلالية؟

<div class="header"> و <header> يبدوان بنفس التأثير، لماذا نستخدم الأخير؟

صديق لـ SEO: محركات البحث تفهم هيكل الصفحة بشكل أفضل
إمكانية الوصول: قارئات الشاشة يمكنها تحديد مناطق "التنقل" و"المحتوى الرئيسي" بسرعة
قابلية قراءة الكود: رؤية <header> تخبرك فورًا أنه رأس الصفحة

متى نستخدم div؟ عندما لا يوجد وسم دلالي مناسب. مثل حاوية للزينة فقط.

2.5 كيف تتذكر كل وسوم HTML هذه؟

🎯 حيرة المبتدئين

"وسوم HTML أكثر من مائة، كيف يمكن تذكرها؟"

الجواب: لا تحتاج لتذكرها كلها. في التطوير الفعلي، 90% من الحالات تستخدم فقط حوالي 20 وسمًا.

تذكرها حسب التصنيف الوظيفي

أولاً: وسوم هيكل الصفحة (رسم الهيكل العظمي)

الوسم	كلمة مساعدة للتذكر	الاستخدام
`<header>`	رأس	رأس الصفحة أو القسم
`<nav>`	تنقل	منطقة روابط التنقل
`<main>`	رئيسي	المحتوى الرئيسي للصفحة (واحد فقط لكل صفحة)
`<article>`	مقال	كتلة محتوى مستقلة (يمكن أخذها لوحدها وتبقى ذات معنى)
`<section>`	قسم	تجميع محتوى له موضوع
`<aside>`	جانبي	شريط جانبي، محتوى تكميلي
`<footer>`	تذييل	أسفل الصفحة أو القسم

طريقة التذكر: تخيل جريدة — لها رأس (header)، فهرس (nav)، نص رئيسي (main/article)، عمود (aside)، تذييل (footer).

ثانيًا: وسوم تمييز المحتوى (توضيح ما هو الشيء)

الوسم	كلمة مساعدة للتذكر	الاستخدام
`<h1>`-`<h6>`	عنوان 1-6	مستويات العناوين، h1 الأكبر والأهم
`<p>`	فقرة	فقرة نصية
`<ul>`/`<ol>`/`<li>`	غير مرتب/مرتب/عنصر قائمة	قوائم
`<a>`	رابط	رابط، للانتقال
`<img>`	صورة	صورة
`<video>`/`<audio>`	فيديو/صوت	وسائط متعددة
`<strong>`/`<em>`	تأكيد/تأكيد مائل	تأكيد دلالي

طريقة التذكر: <a> هو اختصار لـ anchor (مرساة)، تخيل سفينة ترمي مرساة لتتوقف في مكان، الرابط "يتوقف" عند صفحة أخرى.

ثالثًا: وسوم النماذج والتفاعل (جمع إدخال المستخدم)

الوسم	كلمة مساعدة للتذكر	الاستخدام
`<form>`	نموذج	حاوية النموذج
`<input>`	إدخال	حقول إدخال متنوعة (type يحدد النوع)
`<textarea>`	منطقة نص	إدخال نص متعدد الأسطر
`<select>`/`<option>`	تحديد/خيار	قائمة منسدلة
`<button>`	زر	زر
`<label>`	تسمية	نص توضيحي لحقل الإدخال

طريقة التذكر: خاصية type في <input> تحدد شكله:

type="text" → مربع نص
type="password" → مربع كلمة مرور
type="email" → مربع بريد إلكتروني
type="checkbox" → مربع اختيار
type="radio" → زر اختيار واحد

رابعًا: وسوم الحاويات (للتجميع)

الوسم	كلمة مساعدة للتذكر	الاستخدام
`<div>`	صندوق كبير	حاوية كتلية، تحتل سطرًا كاملاً
`<span>`	صندوق صغير	حاوية سطرية، تحتل عرض المحتوى فقط

طريقة التذكر: div = division (تقسيم)، span = span (امتداد). div يستخدم لتقسيم مناطق كبيرة، span لتمييز أجزاء نصية.

ماذا تفعل عندما ترى وسمًا لا تعرفه؟

الطريقة الأولى: خمن الكلمة الإنجليزية

كثير من الوسوم هي اختصارات لكلمات إنجليزية:

<abbr> = abbreviation (اختصار)
<blockquote> = block quote (اقتباس كتلي)
<caption> = caption (عنوان/شرح)
<figcaption> = figure caption (شرح صورة)

الطريقة الثانية: ابحث في MDN

مرجع عناصر MDN HTML يحتوي على شرح مفصل لجميع الوسوم.

الطريقة الثالثة: اسأل الذكاء الاصطناعي

"ما معنى وسم <dl> في HTML؟ ومتى يستخدم؟"

لا تحفظ الوسوم عن ظهر قلب

سير العمل الحقيقي هو كالتالي:

تعرف أنك تريد "حاوية" → اكتب <div>
تكتشف لاحقًا أنها "منطقة تنقل" → غيرها إلى <nav>
تكتشف لاحقًا أنها "مقال مستقل" → غيرها إلى <article>

اكتب أولاً، ثم حسّن الدلالات. يمكن تغيير الوسوم في أي وقت، لا داعي للقلق بشأن أي وسم تستخدم من البداية.

3. CSS: جلد صفحة الويب

3.1 لماذا نحتاج إلى CSS؟

تخيل أنك انتقلت إلى منزل غير مكتمل: به جدران ونوافذ وأبواب، يمكن العيش فيه، لكن:

الجدران إسمنتية رمادية، ليست جميلة
المقابس والمفاتيح مركبة عشوائيًا، ليست مرتبة
لا يوجد أثاث، الحياة غير مريحة

صفحة الويب التي تحتوي على HTML فقط هكذا تمامًا: بها محتوى وهيكل، لكنها قبيحة، فوضوية، غير ودية.

CSS (Cascading Style Sheets) هو "فريق الديكور" لصفحة الويب. لا يغير هيكل HTML (لا يهدم الجدران ولا يغير الأبواب)، مسؤوليته فقط:

🎨 طلاء الجدران: تغيير الألوان والخلفيات
🖼️ تعليق اللوحات: إضافة حدود وظلال وزوايا دائرية
🪑 ترتيب الأثاث: ضبط التخطيط والمسافات والمحاذاة

3.2 كيف يبدو كود CSS؟

كود CSS له تنسيق ثابت:

css

المحدد {
  اسم_الخاصية: قيمة_الخاصية;
  اسم_الخاصية: قيمة_الخاصية;
}

ثلاث طرق للكتابة:

html

<!-- الطريقة الأولى: تنسيق سطري (للاختبار المؤقت) -->
<div style="color: red;">نص أحمر</div>

<!-- الطريقة الثانية: تنسيق داخلي (يكتب داخل ملف HTML) -->
<style>
  .red-text { color: red; }
</style>

<!-- الطريقة الثالثة: تنسيق خارجي (ملف CSS مستقل، موصى به) -->
<link rel="stylesheet" href="styles.css" />

3.3 كيف تقرأ كود CSS؟

🎯 قراءة ضرورية للمبتدئين: طريقة قراءة CSS

الخطوة الأولى: انظر إلى المحدد — "لمن الديكور؟"

المحدد	الكتابة	المعنى
محدد الوسم	`p { }`	جميع وسوم `<p>`
محدد الفئة	`.card { }`	جميع العناصر التي `class="card"`
محدد ID	`#header { }`	العنصر الوحيد `id="header"`
محدد السليل	`.card h2 { }`	جميع `<h2>` داخل `.card`
المحدد المجمع	`.card, .box { }`	تحديد `.card` أو `.box`

الخطوة الثانية: انظر إلى الخاصية — "ماذا تزين؟"

تصنيف الخاصية	الخصائص الشائعة	الدور
النص	`color`, `font-size`, `font-weight`	اللون، الحجم، السماكة
الخلفية	`background`, `background-color`	لون الخلفية، صورة الخلفية
الحدود	`border`, `border-radius`	خط الحدود، الزوايا الدائرية
المسافات	`margin`, `padding`	الهامش الخارجي، الهامش الداخلي
التخطيط	`display`, `flex`, `grid`	طريقة الترتيب

الخطوة الثالثة: انظر إلى القيمة — "كيف سيكون الديكور؟"

css

.card {
  width: 300px;        /* عرض ثابت */
  padding: 16px;       /* هامش داخلي 16 بكسل */
  border-radius: 8px;  /* زوايا دائرية 8 بكسل */
  background: #fff;    /* خلفية بيضاء */
}

الوحدات الشائعة:

px: بكسل، حجم ثابت
%: نسبة مئوية، نسبة إلى العنصر الأب
rem: نسبة إلى حجم خط العنصر الجذري
vw/vh: نسبة إلى عرض/ارتفاع نافذة العرض

3.4 أولوية المحددات

إذا تم تحديد عنصر بمحددات متعددة في نفس الوقت، من له الكلمة الأخيرة؟

html

<p class="highlight" id="special">ما لون هذا النص؟</p>

css

p { color: red; }             /* الأولوية: 1 */
.highlight { color: yellow; } /* الأولوية: 10 */
#special { color: blue; }     /* الأولوية: 100 */

الجواب: أزرق. محدد ID له أعلى أولوية، يليه محدد الفئة، وأخيرًا محدد الوسم.

التنسيق السطري (المكتوب في خاصية style) أولويته 1000، الأعلى!

3.5 نموذج الصندوق: لماذا العرض لا يتطابق؟

🎯 سيناريو حقيقي

تصنع صفحة ويب، تريد عرض ثلاث بطاقات جنبًا إلى جنب، عرض كل بطاقة 300px، العرض الكلي للحاوية 900px. كتبت:

css

.card { width: 300px; }

النتيجة: البطاقة الثالثة نزلت إلى السطر التالي!

لماذا؟ لأن width: 300px هو عرض المحتوى فقط، نسيت حساب padding و border. إذا كانت البطاقة بها padding: 20px و border: 1px، فالعرض الفعلي هو 342px، ثلاث بطاقات تعني 1026px، تجاوزت الحاوية!

كل عنصر HTML في CSS يُعامل على أنه "صندوق" مكون من أربع طبقات. تخيل أنك تغلف طردًا بريديًا: المحتوى هو السلعة، padding هو الفقاعات البلاستيكية، border هو الصندوق الكرتوني، margin هو المسافة بين الصناديق.

👇 جرب بنفسك: اسحب المنزلقات لضبط حجم كل طبقة، ولاحظ تغيرات نموذج الصندوق:

CSS Box ModelUnderstand how much space an element actually occupies

Scenario: you want three cards in one 900px row, and each card has width: 200px. The third card wraps to the next line. Why?

width100px

padding15px

border5px

margin10px

box-sizing:

margin

border

padding

content
100px

Actual occupied width160px

100 + 15×2 + 5×2 + 10×2 = 160px

Three cards use 480px in total, so they fit.

 CSS 
 .box { 
 box-sizing: content-box; 
 width: 100px; 
 padding: 15px; 
 border: 5px solid #ccc; 
 margin: 10px; 
 } 

Key difference: content-box, the default, makes width apply only to content. border-box makes width include content + padding + border. A global box-sizing: border-box setting is usually recommended.

الحل:

css

.box {
  box-sizing: border-box;  /* اجعل width يشمل padding و border */
  width: 200px;
  padding: 10px;
  border: 5px;
}

بهذه الطريقة، width: 200px هو العرض النهائي، padding و border "سينضغطان" في الداخل.

3.6 Flexbox: كيف تجعل العناصر تترتب تلقائيًا؟

Flexbox هو أكثر طرق التخطيط استخدامًا في CSS الحديثة. يجعل العناصر تترتب وتت align تلقائيًا، مثل الكتب على الرف تترتب تلقائيًا.

👇 جرب بنفسك: بدل الاتجاه والمحاذاة، ولاحظ كيف تترتب الصناديق:

Flexbox LayoutAdjust the settings and watch how items are arranged

→Main axis→

Main AxisThe direction items are laid out, controlled by flex-direction.

↓Cross axis↓

Cross AxisPerpendicular to the main axis and used to align items.

flex-direction

justify-content (main-axis alignment)

align-items (cross-axis alignment)

flex-wrap

Main axis: horizontal →Cross axis: vertical ↓

CSS

display: flex;

Memory aid: justify-content aligns items along the main axis. align-items aligns them along the cross axis.

مفاهيم Flex الأساسية:

الخاصية	الدور	القيم الشائعة
`display: flex`	تفعيل تخطيط Flex	-
`flex-direction`	اتجاه المحور الرئيسي	`row` (أفقي)، `column` (عمودي)
`justify-content`	محاذاة المحور الرئيسي	`flex-start`، `center`، `space-between`
`align-items`	محاذاة المحور المتقاطع	`stretch`، `center`، `flex-start`
`flex-wrap`	هل يلتف؟	`nowrap`، `wrap`
`gap`	المسافة بين العناصر	`10px`، `1rem`

3.7 معالجات CSS المسبقة: SCSS/SASS و LESS

🎯 سيناريو حقيقي

كتبت مشروعًا، ملف CSS فيه 2000 سطر. لاحقًا أردت تغيير لون السمة، فاكتشفت:

اللون الرئيسي #3b82f6 ظهر 50 مرة
تغيير لون واحد يتطلب بحثًا واستبدالاً شاملاً، مع القلق من نسيان بعضها
المحددات مكتوبة كـ .nav .nav-list .nav-item .nav-link طويلة وصعبة الصيانة

معالجات CSS المسبقة جاءت لحل هذه المشاكل. تجعل CSS "قابلة للبرمجة": بها متغيرات، وتداخل، وإعادة استخدام للكود.

3.7.1 ما هي معالجات CSS المسبقة؟

بشرح بسيط: المعالج المسبق هو "CSS أكثر ذكاءً". تكتب التنسيقات بلغة أقوى، ثم يُترجم إلى CSS عادي، فيفهمه المتصفح بشكل طبيعي.

لماذا نستخدمها؟

المشكلة	CSS الأصلية	المعالج المسبق
تكرار الألوان	نسخ ولصق في كل مكان	تعريف متغير، تغييره مرة واحدة يسري عالميًا
تداخل المحددات العميق	كتابتها كسلسلة طويلة	صيغة التداخل، التسلسل الهرمي واضح
تكرار نفس التنسيقات	نسخ ولصق	Mixin، إعادة استخدام مثل الدوال

3.7.2 مقارنة المعالجات المسبقة الثلاثة

الميزة	CSS الأصلية	SCSS/SASS	LESS
كتابة المتغير	`--primary`	`$primary`	`@primary`
صيغة التداخل	❌ غير مدعوم	✅ مدعوم	✅ مدعوم
Mixin (إعادة استخدام الكود)	❌ غير مدعوم	✅ `@mixin`	✅ `.mixin()`
صعوبة التعلم	بسيط	متوسط	متوسط
الشعبية	-	⭐⭐⭐ الأكثر شعبية	⭐⭐ شعبية متوسطة

للتذكر ببساطة:

SCSS: يستخدم رمز $، يستخدمه Bootstrap 5، أفضل نظام بيئي
LESS: يستخدم رمز @، متوافق مع كتابة @media في CSS، سهل البداية

3.7.3 أمثلة مقارنة للميزات الأساسية

1. المتغيرات: تغيير واحد، تأثير عالمي

السيناريو: لون السمة #3b82f6 مستخدم في 20 مكانًا، تريد تغييره إلى الأحمر.

css

/* يجب التغيير في 20 مكانًا، سهل النسيان */
.button { background: #3b82f6; }
.link { color: #3b82f6; }
.border { border-color: #3b82f6; }

2. التداخل: العلاقات الهرمية واضحة

السيناريو: شريط التنقل به هيكل متعدد الطبقات.

css

/* سلسلة طويلة، يصعب رؤية العلاقات الهرمية */
.navbar .nav-list .nav-item .nav-link { }
.navbar .nav-list .nav-item .nav-link:hover { }

3. Mixin: إعادة استخدام أجزاء الكود

السيناريو: عدة أزرار تحتاج نفس تنسيق "التوسيط".

css

/* نسخ ولصق 3 مرات */
.btn-primary {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
}

3.7.4 كيف تختار؟

الحالة	الاختيار الموصى به
بدأت للتو، المشروع صغير	CSS الأصلية (ضع الأساس أولاً)
المشروع يستخدم Bootstrap 5	SCSS (كود Bootstrap المصدر هو SCSS)
الفريق معتاد على رمز `@`	LESS (متوافق مع كتابة `@media` في CSS)
تحتاج منطق معقد (حلقات، شروط)	SCSS (إمكانيات أقوى)

3.7.5 الاستخدام في المشاريع

مشروع Vite (الأسهل):

bash

# تثبيت sass
npm install -D sass

# استخدم ملفات .scss أو .less مباشرة

💡 نصائح للمبتدئين

تعلم CSS الأصلية أولاً: المعالجات المسبقة مجرد "سكر نحوي"، دون فهم أساسيات CSS ستزداد الفوضى
لا تجبر نفسك عليها في المشاريع الصغيرة: إذا كان CSS أقل من 200 سطر، فاكتب CSS مباشرة أسهل
ابدأ بـ SCSS: الصيغة تقريبًا مثل CSS، فقط أضيفت متغيرات $
لا تفرط في التداخل: أكثر من 3 مستويات يجعل الكود صعب الصيانة

3.7.6 مقارنة تنظيم الملفات حسب التقنيات المختلفة

نفس المشروع، باستخدام تقنيات مختلفة، كيف يختلف هيكل الملفات؟

my-website/
├── index.html              # هيكل الصفحة
├── about.html
├── css/
│   ├── reset.css           # تنسيقات إعادة الضبط
│   ├── layout.css          # تنسيقات التخطيط
│   ├── components.css      # تنسيقات المكونات
│   └── style.css           # التنسيق الرئيسي (قد يصل لآلاف الأسطر)
├── js/
│   └── main.js
└── images/
    └── logo.png

الميزات:

CSS مركز في ملف واحد أو عدة ملفات
تغيير التنسيق يتطلب التنقل بين ملفات HTML و CSS
التنسيقات عرضة للتعارض

ملخص الفروقات الأساسية:

التقنية	موقع ملفات التنسيق	إدارة السمة	إعادة استخدام الكود
HTML+CSS أصلية	مجلد `css/` مركزي	بحث واستبدال	نسخ ولصق
Vue + CSS	موزعة داخل مكونات `.vue`	بحث واستبدال	نسخ ولصق
Vue + SCSS	داخل المكونات + ملفات `styles/` العامة	إدارة موحدة بالمتغيرات	إعادة استخدام بـ mixin
Vue + Tailwind	لا يوجد (داخل أسماء الفئات)	`tailwind.config.js`	دمج أسماء الفئات

3.8 كيف تتذكر كل خصائص CSS هذه؟

🎯 حيرة المبتدئين

"خصائص CSS بالمئات، كيف يمكن تذكرها؟"

الجواب: صنفها حسب الاستخدام، تذكر الخصائص الأساسية، وغيرها ابحث عنه عند الحاجة.

تذكرها حسب التصنيف الوظيفي

أولاً: تنسيق النصوص (كيف يبدو النص)

الخاصية	كلمة مساعدة للتذكر	القيم الشائعة
`color`	لون	`red`، `#fff`، `rgb(0,0,0)`
`font-size`	حجم الخط	`16px`، `1rem`، `1.5em`
`font-weight`	سماكة الخط	`normal`، `bold`، `100`-`900`
`font-family`	نوع الخط	`"Microsoft YaHei"`، `sans-serif`
`line-height`	ارتفاع السطر	`1.5`، `24px`
`text-align`	محاذاة النص	`left`، `center`، `right`
`text-decoration`	زخرفة النص	`none`، `underline`، `line-through`

طريقة التذكر: تخيل أنك تنسق في Word — تغيير اللون، تغيير الحجم، تضخيم، تغيير الخط، ضبط ارتفاع السطر، محاذاة، إضافة تسطير.

ثانيًا: نموذج الصندوق (كم مساحة يشغلها العنصر)

الخاصية	كلمة مساعدة للتذكر	القيم الشائعة
`width`/`height`	عرض/ارتفاع	`100px`، `50%`، `100vw`
`padding`	هامش داخلي	`10px`، `10px 20px`
`margin`	هامش خارجي	`10px`، `auto` (للتوسيط)
`border`	حدود	`1px solid #ccc`
`border-radius`	زوايا دائرية	`4px`، `50%` (دائرة كاملة)
`box-sizing`	نموذج الصندوق	`border-box` (موصى به)

طريقة التذكر: padding هو الهامش "الداخلي" (المسافة من المحتوى إلى الحدود)، margin هو الهامش "الخارجي" (المسافة من الحدود إلى العناصر الأخرى).

قواعد الاختصار:

css

/* أربع قيم: أعلى يمين أسفل يسار (باتجاه عقارب الساعة) */
padding: 10px 20px 15px 25px;

/* قيمتان: أعلى-أسفل يسار-يمين */
padding: 10px 20px;

/* قيمة واحدة: الاتجاهات الأربعة متساوية */
padding: 10px;

ثالثًا: الخلفيات والحدود (كيف يبدو العنصر)

الخاصية	كلمة مساعدة للتذكر	القيم الشائعة
`background`	خلفية	`#fff`، `url(bg.jpg)`، `linear-gradient(...)`
`background-color`	لون الخلفية	`#fff`، `rgba(0,0,0,0.5)`
`background-image`	صورة الخلفية	`url(photo.jpg)`
`background-size`	حجم الخلفية	`cover`، `contain`، `100%`
`background-position`	موضع الخلفية	`center`، `top left`
`box-shadow`	ظل الصندوق	`0 2px 10px rgba(0,0,0,0.1)`
`opacity`	الشفافية	`0`-`1` (0 شفاف تمامًا)

طريقة التذكر: background هو اختصار، يمكنك تعيين عدة قيم مرة واحدة:

css

background: #fff url(bg.jpg) no-repeat center/cover;
/*          لون   صورة       عدم تكرار    موضع/حجم */

رابعًا: التخطيط (كيف تترتب العناصر)

الخاصية	كلمة مساعدة للتذكر	القيم الشائعة
`display`	طريقة العرض	`block`، `inline`، `flex`، `grid`، `none`
`position`	الموضع	`static`، `relative`، `absolute`، `fixed`، `sticky`
`top`/`right`/`bottom`/`left`	الاتجاهات الأربعة	`10px`، `50%` (تستخدم مع position)
`z-index`	المستوى	كلما زاد الرقم كان في الأعلى
`float`	تعويم	`left`، `right` (طريقة قديمة، غير موصى بها)
`overflow`	معالجة الفائض	`visible`، `hidden`، `scroll`، `auto`

طريقة تذكر position:

static: افتراضي، التدفق الطبيعي
relative: إزاحة نسبة لموضعه الأصلي
absolute: تموضع نسبة لأقرب عنصر سلف ذي موضع
fixed: تموضع نسبة لنافذة العرض (لا يتحرك مع التمرير)
sticky: يثبت بعد التمرير لموقع معين

خامسًا: تخطيط Flexbox (أداة التخطيط أحادي البعد)

الخاصية	كلمة مساعدة للتذكر	الدور
`display: flex`	تفعيل Flex	تحويل الحاوية إلى حاوية Flex
`flex-direction`	الاتجاه	`row` (أفقي)، `column` (عمودي)
`justify-content`	محاذاة المحور الرئيسي	كيف تترتب العناصر على المحور الرئيسي
`align-items`	محاذاة المحور المتقاطع	كيف تترتب العناصر على المحور المتقاطع
`flex-wrap`	التفاف	`nowrap`، `wrap`
`gap`	فجوة	المسافة بين العناصر
`flex`	مرونة	نسبة تمدد العناصر الفرعية

طريقة التذكر:

justify = تبرير/محاذاة → محاذاة المحور الرئيسي
align = ترتيب/محاذاة → محاذاة المحور المتقاطع

سادسًا: الحركة والانتقالات (كيف يتحرك العنصر)

الخاصية	كلمة مساعدة للتذكر	القيم الشائعة
`transition`	انتقال	`all 0.3s ease`
`transform`	تحويل	`translate(10px)`، `rotate(45deg)`، `scale(1.1)`
`animation`	حركة	`fadeIn 1s ease forwards`

قواعد الاختصار:

css

/* transition: الخاصية المدة دالة التخفيف التأخير */
transition: all 0.3s ease 0s;

/* transform يمكنه دمج عدة تحويلات */
transform: translateX(10px) rotate(45deg) scale(1.1);

ماذا تفعل عندما ترى خاصية لا تعرفها؟

الطريقة الأولى: خمن الكلمة الإنجليزية

كثير من الخصائص هي كلمات إنجليزية أو اختصارات:

margin = هامش
padding = حشو
border = حدود
visibility = قابلية الرؤية
cursor = مؤشر

الطريقة الثانية: اربطها بالسيناريو

عندما تريد تحقيق تأثير معين، فكر في "الكلمات المفتاحية":

أريد...	الخصائص المحتملة
تغيير اللون	`color`، `background-color`، `border-color`
تغيير الحجم	`width`، `height`، `font-size`
تغيير الموضع	`margin`، `position`، `top/left`
تغيير المسافات	`padding`، `margin`، `gap`
إخفاء عنصر	`display: none`، `visibility: hidden`، `opacity: 0`
توسيط	`margin: auto`، `text-align: center`، `justify-content: center`
إضافة زوايا دائرية	`border-radius`
إضافة ظل	`box-shadow`، `text-shadow`
إضافة حركة	`transition`، `animation`

الطريقة الثالثة: ابحث في MDN أو اسأل الذكاء الاصطناعي

مرجع خصائص MDN CSS يحتوي على شرح مفصل لجميع الخصائص.

"كيف أجعل النص يظهر في سطر واحد فقط في CSS، والجزء الزائد يظهر بعلامة حذف؟"

الطريقة الرابعة: "تعلم بالسرقة" من أدوات المطور

عندما ترى تصميم صفحة يعجبك:

انقر بزر الفأرة الأيمن → "فحص"
حدد العنصر، وانظر إلى لوحة Styles
انسخ خصائص CSS مباشرة

لا تحفظ الخصائص عن ظهر قلب

سير العمل الحقيقي هو كالتالي:

تعرف أنك تريد "توسيط" → ابحث عن "CSS centering"
انسخ الكود، عدل القيم
مع الاستخدام المتكرر ستتذكرها

مسار التعلم الموصى به:

أتقن نموذج الصندوق أولاً: width، height، padding، margin، border
ثم Flexbox: display: flex، justify-content، align-items
ثم الموضع: position، top/left، z-index
أخيرًا الحركة: transition، transform، animation

الخصائص الأخرى ابحث عنها عند الحاجة، وستتذكرها طبيعيًا مع الاستخدام.

4. JavaScript: عقل صفحة الويب

4.1 لماذا نحتاج إلى JavaScript؟

صفحة الويب التي تحتوي فقط على HTML + CSS، مثل عارضة أزياء في واجهة متجر:

✅ تبدو جميلة (CSS)
✅ هيكلها واضح (HTML)
❌ لكنك إذا تحدثت إليها، لن ترد
❌ إذا ضغطت زرًا، لن يحدث شيء

JavaScript يحول صفحة الويب من "عارضة أزياء" إلى "شخص حقيقي":

✅ تنقر زرًا، فيظهر تنبيه
✅ تدخل نصًا، فيتحقق من التنسيق فورًا
✅ تمرر الصفحة، فيُحمل المزيد من المحتوى
✅ ترسل نموذجًا، فيظهر "جارٍ الإرسال..."

4.2 كيف يبدو كود JavaScript؟

القدرة الأولى: تذكر البيانات (المتغيرات)

javascript

let userName = 'Zhang San'
let isLoggedIn = true
let cartCount = 5

القدرة الثانية: تكرار المهام (الدوال)

javascript

function sayHello(name) {
  return 'مرحبًا، ' + name + '！'
}

console.log(sayHello('Zhang San'))  // الناتج: مرحبًا، Zhang San！

القدرة الثالثة: الاستجابة للأحداث (مراقبة الأحداث)

javascript

button.addEventListener('click', function() {
  alert('تم النقر على الزر！')
})

القدرة الرابعة: تعديل الصفحة (عمليات DOM)

javascript

document.getElementById('title').textContent = 'عنوان جديد'
document.getElementById('box').style.background = 'red'

4.3 كيف تقرأ كود JavaScript؟

🎯 قراءة ضرورية للمبتدئين: طريقة قراءة كود JS

الخطوة الأولى: ابحث عن المتغيرات — "ماذا تذكر؟"

javascript

const API_URL = 'https://api.example.com'  // ثابت، لا يتغير
let count = 0                                // متغير، يتغير
const user = { name: 'Zhang San', age: 25 }       // كائن، بيانات متعددة
const items = ['تفاح', 'موز', 'برتقال']        // مصفوفة، بيانات قائمة

الخطوة الثانية: ابحث عن الدوال — "ماذا يمكنه أن يفعل؟"

javascript

// اسم الدالة عادة يمكن تخمين الغرض منه
function handleClick() { }      // معالجة النقر
function fetchData() { }        // جلب البيانات
function validateForm() { }     // التحقق من النموذج

الخطوة الثالثة: ابحث عن الأحداث — "متى يُشغّل؟"

javascript

button.addEventListener('click', handleClick)     // عند النقر
input.addEventListener('input', validateForm)     // عند الإدخال
window.addEventListener('scroll', loadMore)       // عند التمرير

الخطوة الرابعة: ابحث عن عمليات DOM — "ماذا تغير؟"

javascript

element.textContent = 'محتوى جديد'     // تغيير النص
element.classList.add('active')    // إضافة فئة تنسيق
element.style.display = 'none'     // إخفاء العنصر
parent.appendChild(child)          // إضافة عنصر

4.4 DOM: كيف يتعامل JavaScript مع الصفحة؟

بعد أن يقرأ المتصفح كود HTML، لا يعامله كمجموعة نصوص، بل يرسمه في الذاكرة على شكل "شجرة":

Document (مستند)
    ↓
<html>
    ├─<head>
    │   └─<title>صفحتي</title>
    └─<body>
        ├─<h1>مرحبًا</h1>
        └─<div class="card">
            ├─<img src="photo.jpg">
            └─<p>فقرة نصية</p>

هذه الشجرة تسمى شجرة DOM. كل وسم HTML هو "عقدة" في هذه الشجرة.

كيف تجد العقدة؟

javascript

// حسب ID (الأسرع، فريد)
const element = document.getElementById('header')

// حسب المحدد (الأكثر استخدامًا)
const element = document.querySelector('.card h2')    // أول عنصر
const elements = document.querySelectorAll('button')  // جميع العناصر

// حسب العلاقة
element.parentNode           // العقدة الأب
element.children             // العقد الأبناء
element.nextElementSibling   // العقدة الشقيقة التالية

تحذير أدائي: عمليات DOM مكلفة جدًا. كل تعديل في DOM يجعل المتصفح يعيد حساب التخطيط وإعادة الرسم.

javascript

// ❌ غير فعال: حلقة 1000 مرة، كل مرة تعدل DOM
for (let i = 0; i < 1000; i++) {
  document.body.appendChild(createDiv())
}

// ✅ فعال: اجمع أولاً، ثم أدخل دفعة واحدة
const fragment = document.createDocumentFragment()
for (let i = 0; i < 1000; i++) {
  fragment.appendChild(createDiv())
}
document.body.appendChild(fragment)

وهذا هو سبب ولادة أطر العمل الحديثة مثل Vue / React: تلعب بـ "DOM افتراضي" في الذاكرة، تحسب أقل قدر من التعديلات، ثم أخيرًا تعدل DOM الحقيقي.

👇 جرب بنفسك: الطرق الأساسية لعمليات DOM:

DOM Manipulation DemoUse JavaScript to change page content, styles, and structure

Change content

Change style

Add/remove elements

Welcome to DOM

This card demonstrates DOM manipulation.

Item 1
Item 2

Corresponding JavaScript code
// Click a button on the left to see the code

Common DOM methods

querySelector()Find an element by selector

textContentGet or set text content

classListWork with CSS classes

createElement()Create a new element

appendChild()Append a child element

remove()Remove an element

Note:Frequent DOM operations can hurt performance. Modern frameworks such as Vue and React use a virtual DOM to compute changes in memory and then batch updates to the real DOM.

4.5 ECMAScript: تطور إصدارات JavaScript

ECMAScript هو "الدليل القياسي" لـ JavaScript. مصنعو المتصفحات يطبقون محركات JavaScript وفق هذا المعيار.

لماذا توجد أرقام إصدارات؟

JavaScript ليست ثابتة. كل عام تضاف ميزات جديدة وتُصلح مشاكل. رقم الإصدار يخبرك "ما هي الميزات التي يدعمها هذا المتصفح".

نظرة على الإصدارات المهمة

الإصدار	السنة	الميزات الأساسية	ما المشكلة التي حلها
ES5	2009	Strict mode، `forEach`/`map`/`filter`	توحيد اللغة، إضافة دوال مصفوفات
ES6/ES2015	2015	`let/const`، Arrow functions، `class`، `Promise`، Modules	أكبر تحديث، نقطة انطلاق JS الحديثة
ES2016	2016	`includes()`، `**` الأس	تحديث صغير
ES2017	2017	`async/await`، `Object.entries()`	كود غير متزامن أكثر قابلية للقراءة
ES2018	2018	`...` Spread operator، `Promise.finally()`	تحسينات للكائنات والعمليات غير المتزامنة
ES2020	2020	Optional chaining `?.`، Nullish coalescing `??`، `BigInt`	وصول آمن للخصائص المتداخلة
ES2021	2021	`replaceAll()`، Logical assignment `??=`	تحسينات للنصوص والتعيينات
ES2022	2022	Top-level `await`، `.at()` index	تحميل غير متزامن أسهل للوحدات

أكثر صيغ ES6+ استخدامًا

1. let و const بدلاً من var

javascript

// ❌ الطريقة القديمة: var لها variable hoisting، عرضة للأخطاء
var name = 'Zhang San'
if (true) {
  var name = 'Li Si'  // يستبدل name الخارجي
}
console.log(name)  // 'Li Si'، ليست النتيجة المتوقعة

// ✅ الطريقة الجديدة: let لها block scope
let name = 'Zhang San'
if (true) {
  let name = 'Li Si'  // فعال فقط داخل هذا الـ if
}
console.log(name)  // 'Zhang San'، مطابق للتوقع

// ✅ const: لا يمكن إعادة تعيينها بعد الإعلان
const PI = 3.14159
PI = 3  // خطأ! يمنع التعديل غير المقصود

2. Arrow Functions: كتابة دوال أكثر اختصارًا

javascript

// ❌ الطريقة القديمة
const add = function(a, b) {
  return a + b
}

// ✅ الطريقة الجديدة
const add = (a, b) => a + b

// this في arrow function يرتبط بـ outer scope
const obj = {
  name: 'Zhang San',
  // ❌ دالة عادية: this يشير إلى المستدعي
  oldWay: function() {
    setTimeout(function() {
      console.log(this.name)  // undefined
    }, 100)
  },
  // ✅ arrow function: this يرث من obj
  newWay: function() {
    setTimeout(() => {
      console.log(this.name)  // 'Zhang San'
    }, 100)
  }
}

3. Destructuring Assignment: استخراج البيانات من الكائنات/المصفوفات

javascript

// تفكيك الكائنات
const user = { name: 'Zhang San', age: 25, city: 'Beijing' }
const { name, age } = user  // استخراج مباشر
console.log(name)  // 'Zhang San'

// تفكيك المصفوفات
const colors = ['red', 'green', 'blue']
const [first, second] = colors
console.log(first)  // 'red'

// تفكيك معاملات الدوال
function greet({ name, age }) {
  console.log(`${name} عمره ${age} سنة`)
}
greet(user)  // 'Zhang San عمره 25 سنة'

4. Template Strings: دمج النصوص بدون ألم

javascript

// ❌ الطريقة القديمة: كومة من علامات التنصيص وعلامات الجمع
const msg = 'المستخدم ' + name + ' عمره ' + age + ' سنة'

// ✅ الطريقة الجديدة: backtick + ${}
const msg = `المستخدم ${name} عمره ${age} سنة`

// يدعم أيضًا الأسطر المتعددة
const html = `
  <div class="card">
    <h2>${name}</h2>
    <p>العمر: ${age}</p>
  </div>
`

5. async/await: كتابة الكود غير المتزامن كما لو كان متزامنًا

javascript

// ❌ جحيم callbacks
fetchUser(function(user) {
  fetchOrders(user.id, function(orders) {
    fetchDetails(orders[0].id, function(details) {
      console.log(details)
    })
  })
})

// ✅ async/await
async function getUserData() {
  const user = await fetchUser()
  const orders = await fetchOrders(user.id)
  const details = await fetchDetails(orders[0].id)
  console.log(details)
}

6. Optional Chaining ?. و Nullish Coalescing ??

javascript

const user = {
  name: 'Zhang San',
  address: {
    city: 'Beijing'
  }
}

// ❌ الطريقة القديمة: تحقق طبقة بطبقة
const street = user && user.address && user.address.street
const streetName = street !== undefined ? street : 'غير معروف'

// ✅ الطريقة الجديدة: optional chaining + nullish coalescing
const streetName = user?.address?.street ?? 'غير معروف'

💡 كيف تعرف ما إذا كان المتصفح يدعم ميزة معينة؟

راجع جدول التوافق: caniuse.com أدخل اسم الميزة
استخدم أدوات البناء: Babel يمكنه تحويل الصيغ الجديدة إلى كود يدعمه المتصفحات القديمة
انظر إلى الجمهور المستهدف: إذا كنت تدعم المتصفحات الحديثة فقط، فمعظم ميزات ES6+ يمكن استخدامها مباشرة

4.6 TypeScript: إضافة قيود الأنواع إلى JavaScript

لماذا نحتاج إلى TypeScript؟

السيناريو الأول: نوع معاملات الدالة غير محدد

javascript

// JavaScript
function calculateTotal(price, quantity) {
  return price * quantity
}

calculateTotal(100, 5)      // 500 ✅
calculateTotal('100', 5)    // '1005' ❌ دمج نصوص، وليس ضرب
calculateTotal(100, '5')    // 500 ✅ لكن هذا حظ جيد

JavaScript لن يخبرك أن نوع المعامل خاطئ، حتى تكتشف المشكلة في وقت التشغيل.

السيناريو الثاني: خطأ إملائي في اسم خاصية كائن

javascript

// JavaScript
const user = {
  name: 'Zhang San',
  age: 25
}

console.log(user.nmae)  // undefined، خطأ إملائي لكن لا خطأ برمجي

TypeScript يحل هذه المشاكل:

typescript

// TypeScript
interface User {
  name: string
  age: number
}

function greet(user: User) {
  console.log(`مرحبًا، ${user.name}`)
  console.log(user.nmae)  // ❌ خطأ في الترجمة: الخاصية 'nmae' غير موجودة
}

greet({ name: 'Zhang San', age: 25 })        // ✅
greet({ name: 'Zhang San', age: '25' })      // ❌ خطأ في الترجمة: age يجب أن يكون number
greet({ name: 'Zhang San' })                 // ❌ خطأ في الترجمة: age مفقود

مفاهيم TypeScript الأساسية

1. الأنواع الأساسية

typescript

let name: string = 'Zhang San'
let age: number = 25
let isActive: boolean = true
let anyValue: any = 'يمكن أن يكون أي نوع'  // غير موصى به، يفقد معنى فحص الأنواع

2. Interface: تعريف هيكل الكائن

typescript

interface Product {
  id: number
  name: string
  price: number
  discount?: number  // خاصية اختيارية
  readonly createdAt: Date  // خاصية للقراءة فقط
}

const product: Product = {
  id: 1,
  name: 'iPhone 15',
  price: 6999,
  createdAt: new Date()
}

3. Type Alias

typescript

type ID = string | number  // Union type
type Status = 'pending' | 'approved' | 'rejected'  // Literal type

function updateStatus(id: ID, status: Status) {
  // ...
}

updateStatus(1, 'approved')      // ✅
updateStatus('abc', 'pending')   // ✅
updateStatus(1, 'processing')    // ❌ 'processing' ليس Status صالحًا

4. Generics: أنواع قابلة لإعادة الاستخدام

typescript

// بدون generics: كتابة دالة لكل نوع
function getFirstNumber(arr: number[]): number {
  return arr[0]
}
function getFirstString(arr: string[]): string {
  return arr[0]
}

// مع generics: دالة واحدة تناسب الجميع
function getFirst<T>(arr: T[]): T {
  return arr[0]
}

getFirst([1, 2, 3])        // ترجع number
getFirst(['a', 'b', 'c'])  // ترجع string

TypeScript مقابل JavaScript

الميزة	JavaScript	TypeScript
فحص الأنواع	تكتشف الأخطاء في وقت التشغيل	تكتشف الأخطاء في وقت الترجمة
دعم IDE	إكمال أساسي	إكمال ذكي، إعادة هيكلة، الانتقال للتعريف
منحنى التعلم	بسيط	يحتاج تعلم نظام الأنواع
السيناريوهات المناسبة	مشاريع صغيرة، نماذج أولية	مشاريع كبيرة، عمل جماعي
طريقة التشغيل	المتصفح يشغلها مباشرة	تحتاج ترجمة إلى JavaScript

TypeScript في التطوير الفعلي

typescript

// تعريف نوع استجابة API
interface ApiResponse<T> {
  code: number
  message: string
  data: T
}

interface User {
  id: number
  name: string
  email: string
}

// طلب API مع أنواع
async function fetchUser(id: number): Promise<ApiResponse<User>> {
  const response = await fetch(`/api/users/${id}`)
  return response.json()
}

// عند الاستخدام، IDE يقترح جميع الخصائص
fetchUser(1).then(res => {
  console.log(res.data.name)   // ✅ إكمال تلقائي من IDE
  console.log(res.data.nmae)   // ❌ خطأ في الترجمة
})

💡 نصائح للمبتدئين

تعلم JavaScript أولاً: TypeScript هو superset من JS، تعلم TS دون فهم JS سيكون مؤلمًا جدًا
لا تجبر نفسك على TS في المشاريع الصغيرة: تعريفات الأنواع تزيد من حجم الكود، المشاريع البسيطة تصبح أكثر تعقيدًا
انتقل تدريجيًا من JSDoc: اكتب تعليقات /** @type {User} */ في ملفات JS لتجربة اقتراحات الأنواع
استخدام any هو تنازل، وليس حلاً: عند مواجهة مشكلة في الأنواع، حاول حلها أولاً، لا تلجأ مباشرة إلى any

4.7 سلسلة أدوات تطوير JavaScript الحديثة

🎯 لماذا نحتاج سلسلة الأدوات؟

المتصفح لا يفهم إلا HTML/CSS/JS. لكن في التطوير الحديث، نستخدم:

TypeScript: المتصفح لا يفهمه، يحتاج ترجمة إلى JS
SCSS/Less: المتصفح لا يفهمه، يحتاج ترجمة إلى CSS
Modularization: import/export تحتاج تجميع في ملف واحد
الصيغ الجديدة: ES6+ تحتاج تحويل إلى كود تدعمه المتصفحات القديمة

سلسلة الأدوات تحول "الكود الذي نكتبه أثناء التطوير" إلى "كود يمكن للمتصفح تشغيله".

الأدوات الأساسية:

الأداة	الدور	تشبيه
Node.js	بيئة تشغيل JavaScript	تجعل JS تعمل خارج المتصفح
npm/yarn/pnpm	مدير الحزم	تنزيل مكتبات الأكواد التي كتبها الآخرون
Vite/Webpack	أداة بناء	تجميع الكود المصدري إلى كود يمكن للمتصفح تشغيله
Babel	مترجم	تحويل الصيغ الجديدة إلى صيغ قديمة
ESLint	فحص الكود	اكتشاف مشاكل الكود وعدم تناسق الأسلوب

سير عمل تطوير نموذجي:

bash

# 1. إنشاء المشروع
npm create vite@latest my-app -- --template vue-ts

# 2. تثبيت الاعتماديات
cd my-app
npm install

# 3. وضع التطوير (تحديث تلقائي)
npm run dev

# 4. بناء نسخة الإنتاج
npm run build

5. علاقة التعاون بين الثلاثة

5.1 مقارنة تقسيم العمل

الدور	مسؤول عن ماذا	لا يفعل ماذا	مثال نموذجي
HTML	تحديد الهيكل والدلالات	لا يتحكم بالتنسيق/التفاعل	`<section><h1>عنوان</h1></section>`
CSS	التحكم بالمظهر والتخطيط	لا يتحكم بالمنطق/البيانات	`.card { background: white; }`
JavaScript	معالجة التفاعل والمنطق	لا يحدد الهيكل	`button.onclick = () => alert()`

5.2 مثال تعاون كامل

html

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS: تجعل البطاقة جميلة */
    .card {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 16px;
      max-width: 300px;
    }
    .card button {
      background: #3b82f6;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- HTML: تعريف هيكل البطاقة -->
  <div class="card">
    <h2 id="title">انقر الزر</h2>
    <button id="btn">انقرني</button>
  </div>

  <script>
    // JavaScript: يجعل الزر قابلاً للنقر
    const btn = document.getElementById('btn')
    const title = document.getElementById('title')

    btn.addEventListener('click', function() {
      title.textContent = 'تم النقر！'
      alert('تم تغيير العنوان')
    })
  </script>
</body>
</html>

6. ماذا تفعل عندما ترى كودًا لا تعرفه؟

6.1 اسأل الذكاء الاصطناعي

"ما معنى وسم <aside> في HTML؟ ومتى يستخدم؟"
"ما تأثير position: sticky في CSS؟"

6.2 ابحث في MDN

MDN Web Docs هو المرجع الأكثر موثوقية لتقنيات الويب. عندما ترى وسمًا أو خاصية أو دالة لا تعرفها، ابحث عنها مباشرة.

6.3 أدوات مطور المتصفح

انقر بزر الفأرة الأيمن على عنصر الصفحة → "فحص"
في لوحة Elements ترى هيكل HTML
في لوحة Styles ترى تنسيقات CSS
في لوحة Console يمكنك تنفيذ كود JS

6.4 مرجع سريع لخصائص CSS الشائعة

إذا رأيت هذا	ماذا يفعل
`display: flex`	تفعيل التخطيط المرن
`position: absolute`	تموضع مطلق
`z-index: 100`	المستوى، الرقم الأكبر في الأعلى
`overflow: hidden`	إخفاء الجزء الزائد
`cursor: pointer`	تحويل المؤشر إلى يد
`transition: all 0.3s`	تأثير انتقالي متحرك
`box-sizing: border-box`	جعل width يشمل padding و border

7. جدول مرجعي للمصطلحات

المصطلح	الإنجليزية	شرح بسيط
HTML	HyperText Markup Language	لغة ترميز النص الفائق، تستخدم الوسوم لوصف هيكل الصفحة
CSS	Cascading Style Sheets	أوراق الأنماط المتتالية، تتحكم بالألوان والتخطيط والحركة
JavaScript	JavaScript	لغة برمجة صفحات الويب، مسؤولة عن التفاعل والمنطق
DOM	Document Object Model	نموذج كائن المستند، يمثل الصفحة كشجرة كائنات
Flexbox	Flexible Box Layout	نظام تخطيط أحادي البعد، سهل للمحاذاة والتوزيع
نموذج الصندوق	CSS Box Model	طبقات العنصر من المحتوى إلى الهامش الخارجي
SCSS	Sassy CSS	معالج CSS مسبق، يدعم المتغيرات والتداخل و mixin
TypeScript	TypeScript	Superset من JavaScript، أضاف نظام الأنواع
ES6	ECMAScript 2015	إصدار مهم من JavaScript، أضاف العديد من الصيغ الجديدة
الدلالات	Semantic HTML	استخدام وسوم ذات معنى (مثل header) بدلاً من div
التجاوب	Responsive Design	تصميم يتكيف تلقائيًا مع أحجام الشاشات المختلفة

الخلاصة

الآن تعرف أن: HTML يحدد الهيكل العظمي، CSS مسؤول عن المظهر، JavaScript يمنح الروح.

هذه الثلاثة هي حجر الأساس لتطوير الويب. بفهمها، يمكنك:

قراءة الكود المصدري لأي صفحة ويب (زر الفأرة الأيمن → "عرض الكود المصدري للصفحة")
تعديل صفحات الآخرين (DevTools المتصفح → Elements)
البدء في تعلم أطر الواجهة الأمامية (Vue/React)، فهي كلها مبنية على هذه الثلاثة

اقتراحات للخطوة التالية:

إذا كنت تريد إنشاء صفحات ويب بسرعة، يمكنك تعلم إطار Vue أو React
إذا كنت تريد فهم CSS بعمق، يمكنك تعلم تخطيط Flexbox و Grid
إذا كنت تريد تحسين جودة الكود، يمكنك تعلم TypeScript

نظام تخطيط HTML / CSS ​

1. ما هي HTML و CSS و JavaScript؟ ​

1.1 من الصفحات الثابتة إلى التطبيقات الديناميكية ​

1.2 تشبيه: بناء منزل ​

1.3 جرب بنفسك ​

①Welcome to my website

2. HTML: الهيكل العظمي لصفحة الويب ​

2.1 لماذا نحتاج إلى HTML؟ ​

2.2 كيف يبدو كود HTML؟ ​

2.3 كيف تقرأ كود HTML؟ ​

2.4 مرجع سريع لوسوم HTML الشائعة ​

2.5 كيف تتذكر كل وسوم HTML هذه؟ ​

تذكرها حسب التصنيف الوظيفي ​

ماذا تفعل عندما ترى وسمًا لا تعرفه؟ ​

لا تحفظ الوسوم عن ظهر قلب ​

3. CSS: جلد صفحة الويب ​

3.1 لماذا نحتاج إلى CSS؟ ​

3.2 كيف يبدو كود CSS؟ ​

3.3 كيف تقرأ كود CSS؟ ​

3.4 أولوية المحددات ​

3.5 نموذج الصندوق: لماذا العرض لا يتطابق؟ ​

3.6 Flexbox: كيف تجعل العناصر تترتب تلقائيًا؟ ​

3.7 معالجات CSS المسبقة: SCSS/SASS و LESS ​

3.7.1 ما هي معالجات CSS المسبقة؟ ​

3.7.2 مقارنة المعالجات المسبقة الثلاثة ​

3.7.3 أمثلة مقارنة للميزات الأساسية ​

1. المتغيرات: تغيير واحد، تأثير عالمي ​

2. التداخل: العلاقات الهرمية واضحة ​

3. Mixin: إعادة استخدام أجزاء الكود ​

3.7.4 كيف تختار؟ ​

3.7.5 الاستخدام في المشاريع ​

3.7.6 مقارنة تنظيم الملفات حسب التقنيات المختلفة ​

3.8 كيف تتذكر كل خصائص CSS هذه؟ ​

تذكرها حسب التصنيف الوظيفي ​

ماذا تفعل عندما ترى خاصية لا تعرفها؟ ​

لا تحفظ الخصائص عن ظهر قلب ​

4. JavaScript: عقل صفحة الويب ​

4.1 لماذا نحتاج إلى JavaScript؟ ​

4.2 كيف يبدو كود JavaScript؟ ​

4.3 كيف تقرأ كود JavaScript؟ ​

4.4 DOM: كيف يتعامل JavaScript مع الصفحة؟ ​

Welcome to DOM

4.5 ECMAScript: تطور إصدارات JavaScript ​

لماذا توجد أرقام إصدارات؟ ​

نظرة على الإصدارات المهمة ​

أكثر صيغ ES6+ استخدامًا ​

4.6 TypeScript: إضافة قيود الأنواع إلى JavaScript ​

لماذا نحتاج إلى TypeScript؟ ​

مفاهيم TypeScript الأساسية ​

TypeScript مقابل JavaScript ​

TypeScript في التطوير الفعلي ​

4.7 سلسلة أدوات تطوير JavaScript الحديثة ​

5. علاقة التعاون بين الثلاثة ​

5.1 مقارنة تقسيم العمل ​

5.2 مثال تعاون كامل ​

6. ماذا تفعل عندما ترى كودًا لا تعرفه؟ ​

6.1 اسأل الذكاء الاصطناعي ​

6.2 ابحث في MDN ​

6.3 أدوات مطور المتصفح ​

6.4 مرجع سريع لخصائص CSS الشائعة ​

7. جدول مرجعي للمصطلحات ​

الخلاصة ​

نظام تخطيط HTML / CSS

1. ما هي HTML و CSS و JavaScript؟

1.1 من الصفحات الثابتة إلى التطبيقات الديناميكية

1.2 تشبيه: بناء منزل

1.3 جرب بنفسك

2. HTML: الهيكل العظمي لصفحة الويب

2.1 لماذا نحتاج إلى HTML؟

2.2 كيف يبدو كود HTML؟

2.3 كيف تقرأ كود HTML؟

2.4 مرجع سريع لوسوم HTML الشائعة

2.5 كيف تتذكر كل وسوم HTML هذه؟

تذكرها حسب التصنيف الوظيفي

ماذا تفعل عندما ترى وسمًا لا تعرفه؟

لا تحفظ الوسوم عن ظهر قلب

3. CSS: جلد صفحة الويب

3.1 لماذا نحتاج إلى CSS؟

3.2 كيف يبدو كود CSS؟

3.3 كيف تقرأ كود CSS؟

3.4 أولوية المحددات

3.5 نموذج الصندوق: لماذا العرض لا يتطابق؟

3.6 Flexbox: كيف تجعل العناصر تترتب تلقائيًا؟

3.7 معالجات CSS المسبقة: SCSS/SASS و LESS

3.7.1 ما هي معالجات CSS المسبقة؟

3.7.2 مقارنة المعالجات المسبقة الثلاثة

3.7.3 أمثلة مقارنة للميزات الأساسية

1. المتغيرات: تغيير واحد، تأثير عالمي

2. التداخل: العلاقات الهرمية واضحة

3. Mixin: إعادة استخدام أجزاء الكود

3.7.4 كيف تختار؟

3.7.5 الاستخدام في المشاريع

3.7.6 مقارنة تنظيم الملفات حسب التقنيات المختلفة

3.8 كيف تتذكر كل خصائص CSS هذه؟

تذكرها حسب التصنيف الوظيفي

ماذا تفعل عندما ترى خاصية لا تعرفها؟

لا تحفظ الخصائص عن ظهر قلب

4. JavaScript: عقل صفحة الويب

4.1 لماذا نحتاج إلى JavaScript؟

4.2 كيف يبدو كود JavaScript؟

4.3 كيف تقرأ كود JavaScript؟

4.4 DOM: كيف يتعامل JavaScript مع الصفحة؟

4.5 ECMAScript: تطور إصدارات JavaScript

لماذا توجد أرقام إصدارات؟

نظرة على الإصدارات المهمة

أكثر صيغ ES6+ استخدامًا

4.6 TypeScript: إضافة قيود الأنواع إلى JavaScript

لماذا نحتاج إلى TypeScript؟

مفاهيم TypeScript الأساسية

TypeScript مقابل JavaScript

TypeScript في التطوير الفعلي

4.7 سلسلة أدوات تطوير JavaScript الحديثة

5. علاقة التعاون بين الثلاثة

5.1 مقارنة تقسيم العمل

5.2 مثال تعاون كامل

6. ماذا تفعل عندما ترى كودًا لا تعرفه؟

6.1 اسأل الذكاء الاصطناعي

6.2 ابحث في MDN

6.3 أدوات مطور المتصفح

6.4 مرجع سريع لخصائص CSS الشائعة

7. جدول مرجعي للمصطلحات

الخلاصة