ما هي مدة دبلومة تطوير الويب؟

مدة الدبلومة 6 أشهر مقسمة على 3 مراحل: أساسيات البرمجة (شهرين)، تطوير الواجهات الأمامية (شهرين)، تطوير الواجهات الخلفية (شهرين).

هل توجد ضمان توظيف بعد التخرج؟

نعم، نقدم ضمان توظيف 100% للطلاب المتميزين مع متابعة شخصية ومساعدة في إعداد السيرة الذاتية ومقابلات العمل.

ما هي الشهادة المعتمدة التي أحصل عليها؟

تحصل على شهادة معتمدة من وزارة الخارجية المصرية بالإضافة إلى شهادة من أكاديمية Syntax Room مع إمكانية الحصول على شهادات دولية.

HTML وCSS للمبتدئين: دليل شامل لتعلم أساسيات تصميم صفحات الويب من الصفر | Syntax Room

HTML وCSS للمبتدئين: دليل شامل لتعلم أساسيات تصميم صفحات الويب من الصفر

لو بدأت تتعلم تصميم المواقع، غالبًا أول حاجتين هتقابلهم هما HTML وCSS. لكن بعد أول كام درس، هتبدأ تظهر أسئلة كتير: أستخدم div ولا section؟ إيه الفرق بين id وclass؟ ليه الـ CSS مش شغال؟ وإزاي أخلّي الموقع Responsive؟

المقال ده مرجع شامل هيجاوبك عن أهم 15 سؤال بيسألهم أي مبتدئ في HTML وCSS. من فهم الأساسيات، لحد بناء صفحة ويب كاملة ومتجاوبة. كل سؤال مشروح بأمثلة عملية وكود بسيط تقدر تجرّبه بنفسك.

سواء أنت لسه بادئ أو عندك أساسيات وعايز تثبّتها — المقال ده ليك.

⚡ الإجابة السريعة: ما الفرق بين HTML وCSS؟

HTML (HyperText Markup Language) هي اللغة المسؤولة عن هيكل الصفحة — العناوين، الفقرات، الصور، الروابط، والأزرار. CSS (Cascading Style Sheets) هي اللغة المسؤولة عن تصميم الصفحة وشكلها — الألوان، الخطوط، المسافات، التخطيط، والحركات. HTML تبني الهيكل، وCSS تديّه الشكل الجميل.

1. يعني إيه HTML؟

ما هي HTML؟

HTML (HyperText Markup Language) هي لغة توصيف (Markup Language) تُستخدم لبناء هيكل صفحات الويب. هي مش لغة برمجة — لأنها لا تحتوي على منطق أو شروط أو حلقات. وظيفتها إنها تقول للمتصفح: "هنا عنوان، هنا فقرة، هنا صورة، هنا رابط." المتصفح بيقرأ كود HTML ويعرض الصفحة بناءً عليه.

ما معنى HyperText Markup Language؟

HyperText: نص يحتوي على روابط تنقلك لصفحات أو أماكن تانية.
Markup: علامات (Tags) بتحدد نوع كل عنصر في الصفحة.
Language: لغة — لكنها لغة توصيف وليست لغة برمجة.

هل HTML لغة برمجة؟

لا. HTML هي لغة توصيف (Markup Language). الفرق إن لغات البرمجة (مثل JavaScript أو Python) فيها منطق وقرارات وحلقات، لكن HTML وظيفتها فقط وصف هيكل الصفحة.

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

المفهوم	المعنى	مثال
Tag	علامة بتحدد نوع العنصر	`<p>` ، `<h1>` ، `<img>`
Element	Tag الافتتاحي + المحتوى + Tag الختامي	`<p>مرحبًا</p>`
Attribute	معلومة إضافية داخل الـ Tag	`<img src="photo.jpg" alt="صورة">`

مثال بسيط على HTML

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>أول صفحة ويب</title>
</head>
<body>
  <h1>مرحبًا بالعالم!</h1>
  <p>دي أول صفحة ويب ليا.</p>
  <a href="https://example.com">اضغط هنا</a>
</body>
</html>

شرح الكود سطرًا بسطر

<!DOCTYPE html> — بيقول للمتصفح إن الصفحة بتستخدم HTML5.
<html lang="ar" dir="rtl"> — بداية الصفحة، باللغة العربية من اليمين لليسار.
<head> — معلومات عن الصفحة (مش ظاهرة للمستخدم).
<meta charset="UTF-8"> — لدعم الأحرف العربية.
<meta name="viewport"...> — للتوافق مع الموبايل.
<title> — عنوان الصفحة اللي بيظهر في تبويب المتصفح.
<body> — المحتوى المرئي للصفحة.
<h1> — عنوان رئيسي.
<p> — فقرة نصية.
<a href="..."> — رابط.

2. ما الفرق بين div وsection؟

الفرق بين div وsection في HTML

الفرق الأساسي أن div عنصر عام (Generic) يُستخدم لتجميع العناصر بدون أي معنى دلالي، بينما section عنصر دلالي (Semantic) يُستخدم لتمثيل قسم مستقل منطقيًا من محتوى الصفحة. استخدام العناصر الدلالية بيحسّن الـ SEO وAccessibility.

مقارنة بين div وsection

المعيار	`div`	`section`
المعنى الدلالي (Semantic)	❌ لا يوجد	✅ يمثل قسم منطقي
الاستخدام	تجميع عناصر للتنسيق فقط	تجميع محتوى مترابط يمثل قسم
SEO	لا يؤثر	يساعد محركات البحث في فهم الصفحة
Accessibility	لا يقدم معلومات إضافية	يساعد قارئات الشاشة
مثال	wrapper لتنسيق CSS	قسم "من نحن" أو "الخدمات"

متى تستخدم div؟

لما تحتاج container للتنسيق فقط (CSS styling).
لما العنصر مالوش معنى محتوى مستقل.
لتجميع عناصر لغرض Layout.

متى تستخدم section؟

لما يكون المحتوى يمثل قسم منطقي من الصفحة.
لما القسم يستحق عنوان خاص (h2, h3...).
أقسام زي: "من نحن"، "الخدمات"، "آراء العملاء".

مثال عملي

<!-- ✅ استخدام صحيح لـ section -->
<section>
  <h2>خدماتنا</h2>
  <p>نقدم خدمات تطوير الويب وتصميم المواقع.</p>
</section>

<!-- ✅ استخدام صحيح لـ div -->
<div class="card-wrapper">
  <div class="card">...</div>
  <div class="card">...</div>
</div>

💡 القاعدة البسيطة: لو المحتوى ليه عنوان ومعنى مستقل → استخدم section. لو محتاج container للتنسيق بس → استخدم div.

3. ما الفرق بين id وclass؟

الفرق بين id وclass في HTML وCSS

id هو معرّف فريد لعنصر واحد فقط في الصفحة، بينما class هو تصنيف يمكن استخدامه لأكثر من عنصر. في CSS، الـ id بيتكتب بـ # وليه Specificity أعلى، والـ class بيتكتب بـ . (نقطة) وممكن يتكرر.

مقارنة بين id وclass

المعيار	`id`	`class`
التكرار	❌ لا يتكرر — فريد في الصفحة	✅ يتكرر — لأكثر من عنصر
CSS Selector	`#header`	`.card`
Specificity	أعلى (100)	أقل (10)
JavaScript	`getElementById()`	`getElementsByClassName()` أو `querySelectorAll()`
الاستخدام الشائع	عناصر فريدة (Header, Footer)	عناصر متكررة (Cards, Buttons)

مثال عملي

<!-- id: معرّف فريد — مرة واحدة بس -->
<div id="header">...</div>

<!-- class: تصنيف — ممكن يتكرر -->
<div class="card">بطاقة 1</div>
<div class="card">بطاقة 2</div>
<div class="card">بطاقة 3</div>

CSS

/* id — بنستخدم # */
#header {
  background-color: #1a1a2e;
  color: #fff;
}

/* class — بنستخدم . */
.card {
  border: 1px solid #ddd;
  padding: 16px;
  border-radius: 8px;
}

💡 نصيحة عملية: في المشاريع الحقيقية، استخدم class في أغلب الحالات. خلّي id للعناصر الفريدة فعلًا أو للروابط الداخلية (Anchor Links).

4. إزاي أعمل Navbar بـ HTML وCSS؟

كيفية إنشاء شريط تنقل (Navbar) بـ HTML وCSS

لإنشاء Navbar بسيط، استخدم عنصر <nav> لتحديد منطقة التنقل، وعنصر <ul> لقائمة الروابط، وخاصية display: flex في CSS لترتيب العناصر أفقيًا. يمكن إضافة Logo وتأثيرات Hover وتصميم متجاوب لاحقًا.

HTML

<nav class="navbar">
  <div class="logo">
    <a href="#">MyWebsite</a>
  </div>
  <ul class="nav-links">
    <li><a href="#home">الرئيسية</a></li>
    <li><a href="#about">من نحن</a></li>
    <li><a href="#services">الخدمات</a></li>
    <li><a href="#contact">تواصل معنا</a></li>
  </ul>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background-color: #1a1a2e;
}

.logo a {
  color: #e94560;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #e94560;
}

شرح الكود

display: flex + justify-content: space-between — يرتب Logo والروابط على طرفي الـ Navbar.
align-items: center — يوسّط العناصر رأسيًا.
gap: 24px — مسافة بين كل رابط والتاني.
transition — تأثير سلس عند مرور الماوس.
list-style: none — إزالة النقاط من القائمة.

💡 الخطوة التالية: لتطوير الـ Navbar لشاشات الموبايل، هتحتاج JavaScript لعمل زر Hamburger Menu يفتح ويقفل القائمة. ده هيكون ممكن بعد ما تتعلم أساسيات JavaScript.

لجعل الـ Navbar متجاوب (Responsive)

@media (max-width: 768px) {
  .nav-links {
    display: none; /* إخفاء الروابط على الشاشات الصغيرة */
  }
  /* يمكن إظهارها لاحقًا بـ JavaScript عند الضغط على زر القائمة */
}

5. إزاي أعمل Form بـ HTML وCSS؟

كيفية إنشاء نموذج (Form) في HTML

لإنشاء Form، استخدم عنصر <form> كحاوية، وداخله <label> لعنوان كل حقل، و<input> لحقول الإدخال، و<textarea> لحقل الرسالة، و<button> لزر الإرسال. أضف Attributes مثل type وname وrequired لتحديد نوع البيانات والتأكد من إدخالها.

عناصر Form الأساسية

العنصر	الوظيفة	مثال
`<form>`	حاوية النموذج	`<form action="#">...</form>`
`<label>`	عنوان الحقل (مهم لـ Accessibility)	`<label for="name">الاسم</label>`
`<input>`	حقل إدخال (نص، إيميل، رقم...)	`<input type="email">`
`<textarea>`	حقل نص طويل (رسالة)	`<textarea rows="5"></textarea>`
`<select>`	قائمة منسدلة	`<select><option>...</option></select>`
`<button>`	زر إرسال	`<button type="submit">إرسال</button>`

مثال: Contact Form كامل

<form action="#" method="POST" class="contact-form">
  <label for="name">الاسم</label>
  <input type="text" id="name" name="name" placeholder="اكتب اسمك" required>

  <label for="email">البريد الإلكتروني</label>
  <input type="email" id="email" name="email" placeholder="[email protected]" required>

  <label for="phone">رقم الهاتف</label>
  <input type="tel" id="phone" name="phone" placeholder="01xxxxxxxxx">

  <label for="message">الرسالة</label>
  <textarea id="message" name="message" rows="5" placeholder="اكتب رسالتك هنا..." required></textarea>

  <button type="submit">إرسال</button>
</form>

أهم Attributes

type — نوع الحقل: text, email, tel, password, number.
name — اسم الحقل المُرسل مع البيانات.
placeholder — نص توضيحي داخل الحقل.
required — يمنع الإرسال لو الحقل فاضي.
for — يربط الـ label بالـ input (مهم جدًا لـ Accessibility).

6. إزاي أخلي الموقع Responsive؟

ما هو Responsive Web Design؟

Responsive Web Design هو أسلوب تصميم يخلّي الموقع يتكيف تلقائيًا مع حجم الشاشة المستخدمة — سواء كانت موبايل أو تابلت أو لابتوب أو شاشة كبيرة. يتم تحقيقه باستخدام Media Queries، وحدات قياس نسبية (مثل % وvw وrem)، وتقنيات التخطيط مثل Flexbox وGrid.

ليه الموقع لازم يكون Responsive؟

أكتر من 60% من زيارات المواقع بتيجي من الموبايل.
Google بيفضل المواقع المتجاوبة في نتائج البحث (Mobile-First Indexing).
تجربة المستخدم بتبقى أحسن بكتير لما الموقع يشتغل صح على كل الأجهزة.

أدوات الـ Responsive Design

الأداة	الوظيفة
Viewport Meta Tag	يخبر المتصفح بعرض الصفحة بشكل صحيح على الموبايل
Media Queries	تطبيق CSS مختلف حسب حجم الشاشة
وحدات نسبية (%، vw، rem)	مقاسات مرنة بدل الأرقام الثابتة
Flexbox	ترتيب العناصر بمرونة في اتجاه واحد
CSS Grid	بناء تخطيطات معقدة في اتجاهين
max-width على الصور	يمنع الصور من تجاوز حجم الحاوية

الخطوة الأولى: Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

هذا السطر ضروري جدًا في كل صفحة HTML. بدونه، الموبايل هيعرض الصفحة زي ما هي على الكمبيوتر (مصغّرة جدًا).

مثال على Media Query

/* التنسيق الأساسي — للشاشات الكبيرة */
.container {
  display: flex;
  gap: 24px;
}

/* لما عرض الشاشة يبقى أقل من 768px (تابلت وموبايل) */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

شرح المثال

على الشاشات الكبيرة: العناصر بتترتب أفقيًا (جنب بعض).
على الشاشات الصغيرة (أقل من 768px): العناصر بتترتب رأسيًا (فوق بعض).

Responsive Images

img {
  max-width: 100%;
  height: auto;
}

ده بيخلي أي صورة لا تتجاوز عرض الحاوية وتحافظ على نسبة الأبعاد.

7. إيه الفرق بين Flexbox وGrid؟

الفرق بين Flexbox وCSS Grid

Flexbox نظام تخطيط أحادي الاتجاه (One-Dimensional) — يرتب العناصر في صف (row) أو عمود (column) واحد. CSS Grid نظام تخطيط ثنائي الاتجاه (Two-Dimensional) — يرتب العناصر في صفوف وأعمدة معًا. Flexbox مناسب للتخطيطات البسيطة، وGrid مناسب للتخطيطات المعقدة.

مقارنة بين Flexbox وCSS Grid

المعيار	Flexbox	CSS Grid
الاتجاه	أحادي (Row أو Column)	ثنائي (Rows + Columns)
مناسب لـ	Navbar, Cards, بسيط	Page Layout, Dashboard, معقد
التحكم	في اتجاه واحد	في الاتجاهين معًا
سهولة التعلم	أسهل للمبتدئين	يحتاج فهم أكتر
الاستخدام الأشهر	توسيط عناصر، ترتيب أفقي	تقسيم الصفحة لأقسام

مثال Flexbox

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

مثال CSS Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* على الموبايل */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

متى تستخدم كل واحدة؟

Flexbox: لترتيب Navbar، توسيط عنصر، ترتيب أزرار جنب بعض.
Grid: لبناء Layout صفحة كاملة (Header + Sidebar + Content + Footer).
الاتنين مع بعض: ممكن تستخدم Grid للـ Layout الكبير، وFlexbox لترتيب العناصر داخل كل Grid Item.

8. إزاي أوسّط عنصر في الصفحة؟

كيفية توسيط عنصر في CSS

أسهل طريقة لتوسيط عنصر أفقيًا ورأسيًا هي استخدام Flexbox: display: flex; justify-content: center; align-items: center; على العنصر الأب. أو باستخدام Grid: display: grid; place-items: center;.

الطريقة الأولى: Flexbox (الأكثر استخدامًا)

.parent {
  display: flex;
  justify-content: center;  /* توسيط أفقي */
  align-items: center;      /* توسيط رأسي */
  height: 100vh;            /* ارتفاع الشاشة كلها */
}

الطريقة الثانية: CSS Grid (أبسط)

.parent {
  display: grid;
  place-items: center;  /* توسيط أفقي + رأسي في سطر واحد */
  height: 100vh;
}

الطريقة الثالثة: Position + Transform

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

هذه الطريقة مفيدة في حالات محددة (مثل Modals أو Overlays)، لكن Flexbox وGrid أسهل وأنظف في أغلب الحالات.

أنواع التوسيط

النوع	الكود المختصر
أفقي فقط (Horizontal)	`margin: 0 auto;` أو `text-align: center;` أو Flexbox `justify-content: center`
رأسي فقط (Vertical)	Flexbox `align-items: center`
أفقي + رأسي	Flexbox أو Grid `place-items: center`

9. إزاي أعمل Animation بـ CSS؟

كيفية عمل Animation في CSS

CSS تقدم طريقتين رئيسيتين للحركة: transition للتأثيرات البسيطة (مثل تغيير اللون عند Hover)، وanimation مع @keyframes للحركات المعقدة والمتكررة. الفرق إن Transition يحتاج حدث (Event) يشغّله، لكن Animation يشتغل تلقائيًا.

Transition — تأثير بسيط عند Hover

.button {
  background-color: #667eea;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #764ba2;
  transform: scale(1.05);
}

عند مرور الماوس، اللون بيتغير والزرار بيكبر قليلاً — بشكل سلس.

Animation + @keyframes — حركة مستقلة

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.element {
  animation: fadeIn 0.6s ease forwards;
}

العنصر بيظهر تدريجيًا وبيتحرك لفوق — بدون ما المستخدم يعمل حاجة.

الفرق بين Transition وAnimation

المعيار	Transition	Animation
يحتاج حدث (Event)؟	✅ نعم (hover, focus...)	❌ لا — يشتغل تلقائيًا
التكرار	مرة واحدة فقط	ممكن يتكرر (infinite)
التحكم	بداية ونهاية فقط	مراحل متعددة (@keyframes)
الاستخدام الشائع	Hover Effects, Color Changes	Loading Spinners, Fade In, Slide

Properties مهمة

transition — يحدد Property + Duration + Timing Function.
transform — يحرك أو يدور أو يكبّر العنصر (scale, rotate, translate).
animation — يربط العنصر بـ @keyframes.
@keyframes — يحدد مراحل الحركة (from/to أو نسب مئوية).

10. إيه هي Pseudo Classes؟

ما هي Pseudo Classes في CSS؟

Pseudo Classes هي محددات (Selectors) تُستخدم لتحديد حالة معينة للعنصر — مثل عندما يمر عليه الماوس (:hover)، أو عندما يكون في حالة Focus (:focus)، أو عندما يكون أول عنصر ابن (:first-child). تُكتب بنقطتين واحدة (:).

أشهر Pseudo Classes

Pseudo Class	الوظيفة	مثال
`:hover`	عند مرور الماوس	`a:hover { color: red; }`
`:focus`	عند التركيز على العنصر (مثل input)	`input:focus { border-color: blue; }`
`:active`	عند الضغط على العنصر	`button:active { transform: scale(0.95); }`
`:first-child`	أول عنصر ابن	`li:first-child { font-weight: bold; }`
`:last-child`	آخر عنصر ابن	`li:last-child { border: none; }`
`:nth-child(n)`	عنصر ابن بترتيب معين	`tr:nth-child(even) { background: #f5f5f5; }`

مثال عملي

/* تغيير لون الرابط عند مرور الماوس */
a:hover {
  color: #e94560;
  text-decoration: underline;
}

/* تمييز صفوف الجدول بالتبادل */
tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* إضافة إطار ملون عند التركيز على حقل إدخال */
input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
}

11. إيه هي Pseudo Elements؟

ما هي Pseudo Elements في CSS؟

Pseudo Elements هي محددات تسمح لك بتنسيق جزء معين من العنصر أو إضافة محتوى وهمي قبله أو بعده — مثل ::before و::after لإضافة محتوى، و::first-letter لتنسيق أول حرف. تُكتب بنقطتين مزدوجتين (::).

أشهر Pseudo Elements

Pseudo Element	الوظيفة	مثال
`::before`	إضافة محتوى قبل العنصر	إضافة أيقونة قبل عنوان
`::after`	إضافة محتوى بعد العنصر	إضافة خط تزييني بعد عنوان
`::first-letter`	تنسيق أول حرف	تكبير أول حرف في فقرة
`::first-line`	تنسيق أول سطر	تلوين أول سطر في فقرة
`::selection`	تنسيق النص المحدد (المظلل)	تغيير لون التحديد

مثال عملي — خط تزييني بعد عنوان

h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #e94560;
  margin-top: 8px;
  border-radius: 2px;
}

الفرق بين Pseudo Class وPseudo Element

المعيار	Pseudo Class	Pseudo Element
الكتابة	نقطتين واحدة `:`	نقطتين مزدوجتين `::`
الوظيفة	تحديد حالة العنصر	تنسيق جزء من العنصر أو إضافة محتوى
مثال	`:hover` ، `:focus`	`::before` ، `::after`

12. ليه الـ CSS مش شغال؟ (Troubleshooting Guide)

لماذا لا يعمل CSS؟

أشهر أسباب عدم عمل CSS: ملف CSS غير مربوط بالـ HTML بشكل صحيح، خطأ في مسار الملف (Path)، Selector غير صحيح، مشكلة Specificity (قاعدة CSS أخرى تتغلب عليها)، خطأ في الكتابة (Syntax Error)، أو Browser Cache يعرض نسخة قديمة. استخدم DevTools في المتصفح لاكتشاف المشكلة.

أشهر 10 أسباب لعدم عمل CSS

ملف CSS غير مربوط بالـ HTML: تأكد من وجود <link rel="stylesheet" href="style.css"> في <head>.
خطأ في المسار (Path): لو الملف في مجلد مختلف، المسار لازم يكون صح (مثلاً css/style.css).
Selector غير صحيح: تأكد إنك كاتب اسم الـ class أو id صح — الحالة (Case) مهمة.
Property مكتوبة غلط: مثلاً colour بدل color — CSS مش هيفهمها.
CSS Rule يتم Override عليها: قاعدة CSS تانية بـ Specificity أعلى بتتغلب عليها.
مشكلة Specificity: id أقوى من class، وclass أقوى من element.
Syntax Error: نسيان ; أو { أو }.
العنصر غير موجود: بتحاول تنسق عنصر مالوش مقابل في HTML.
Browser Cache: المتصفح بيعرض نسخة قديمة. جرّب Ctrl + Shift + R لتحديث حقيقي.
Property مش شغالة مع العنصر: مثلاً width مش بتشتغل على عناصر inline.

طريقة Debugging باستخدام DevTools

اضغط F12 أو Right-click → Inspect.
اختار العنصر اللي CSS مش شغال عليه.
شوف في تبويب Styles — هل القاعدة موجودة؟ هل فيه خط عليها (Overridden)؟
لو فيه خط → فيه قاعدة تانية بـ Specificity أعلى.
لو القاعدة مش موجودة أصلاً → المشكلة في الربط أو الـ Selector.

Checklist سريعة

☑️ هل ملف CSS مربوط بـ <link>؟
☑️ هل Path صحيح؟
☑️ هل Selector مكتوب صح؟
☑️ هل فيه قاعدة CSS تانية بتعمل Override؟
☑️ هل فيه Syntax Error (فاصلة منقوطة ناقصة)؟
☑️ هل القاعدة ظاهرة في DevTools؟
☑️ هل جرّبت Hard Refresh (Ctrl + Shift + R)؟

13. ليه margin مش شغال؟

لماذا لا يعمل margin في CSS؟

أشهر الأسباب: Margin Collapse (اندماج الهوامش بين عناصر متجاورة)، العنصر من نوع inline (لا يقبل margin-top وmargin-bottom)، أو أن Flexbox/Grid بيتحكم في المسافات بطريقة مختلفة. أيضًا، ممكن يكون فيه قاعدة CSS تانية بتعمل Override.

أشهر أسباب عدم عمل margin

Margin Collapse: لما عنصرين فوق بعض ليهم margin-bottom وmargin-top، المتصفح بيأخد الأكبر بس مش الاتنين. ده سلوك طبيعي في CSS.
العنصر Inline: عناصر مثل <span> و<a> لا تقبل margin-top وmargin-bottom. الحل: display: inline-block; أو display: block;.
Flexbox أو Grid: لما العنصر الأب display: flex أو grid، المسافات بتتأثر بخصائص زي gap وjustify-content.
overflow: hidden على الأب: ممكن يمنع الـ margin من الظهور.
Specificity: قاعدة CSS تانية بتعمل margin: 0 وبتتغلب على القاعدة بتاعتك.
عدم وجود مساحة كافية: لو العنصر عرضه 100% ومفيش مكان للـ margin الأفقي.

الفرق بين margin وpadding

المعيار	margin	padding
الموقع	مسافة خارج العنصر	مسافة داخل العنصر
الخلفية	لا تتأثر بـ background	تتأثر بـ background
القيم السالبة	✅ مسموحة	❌ غير مسموحة
Collapse	✅ يحدث	❌ لا يحدث
الاستخدام	إبعاد العنصر عن العناصر المجاورة	إبعاد المحتوى عن حدود العنصر

💡 قاعدة بسيطة: margin = مسافة بين العنصر والعالم الخارجي. padding = مسافة بين المحتوى وحدود العنصر.

14. إزاي أربط CSS بـ HTML؟

كيفية ربط CSS بـ HTML

هناك 3 طرق لربط CSS بـ HTML: (1) External CSS — ملف CSS منفصل مربوط بـ <link> (الطريقة المفضلة). (2) Internal CSS — كود CSS داخل <style> في <head>. (3) Inline CSS — تنسيق مباشر على العنصر بـ style="...". الطريقة الأولى هي الأفضل للمشاريع الحقيقية.

1. External CSS (الطريقة المفضلة ✅)

<!-- في <head> -->
<link rel="stylesheet" href="style.css">

ملف CSS منفصل (style.css) بيتم ربطه. هذه الطريقة الأفضل لأنها:

تفصل بين HTML وCSS (Separation of Concerns).
نفس ملف CSS يخدم أكثر من صفحة.
أسهل في الصيانة والتعديل.
المتصفح يقدر يعمل Cache للملف.

2. Internal CSS

<head>
  <style>
    body {
      background-color: #f5f5f5;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #1a1a2e;
    }
  </style>
</head>

مناسبة لصفحات صغيرة أو تجارب سريعة، لكن مش مثالية للمشاريع الكبيرة.

3. Inline CSS (تجنبها قدر الإمكان ❌)

<p style="color: red; font-size: 18px;">نص أحمر</p>

تُستخدم في حالات استثنائية فقط. مشاكلها:

لا يمكن إعادة استخدام التنسيق.
تخلط HTML بـ CSS.
Specificity عالية جدًا وبتسبب مشاكل Override.

تنظيم ملفات المشروع

project/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── images/
    └── logo.png

💡 نصيحة: من البداية، اتعوّد تنظّم ملفات المشروع في مجلدات. ده بيسهّل الشغل جدًا لما المشروع يكبر.

15. إزاي أستخدم Font Awesome؟

ما هو Font Awesome وكيفية استخدامه؟

Font Awesome هي مكتبة أيقونات (Icons) مجانية تحتوي على آلاف الأيقونات الجاهزة اللي تقدر تستخدمها في مواقعك. بتضيف المكتبة عن طريق CDN Link في <head>، وبعدين تستخدم الأيقونة بعنصر <i> مع Class محدد.

الخطوة 1: إضافة المكتبة (CDN)

أضف السطر ده في <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

الخطوة 2: استخدام أيقونة

<!-- أيقونة Home -->
<i class="fa-solid fa-house"></i>

<!-- أيقونة User -->
<i class="fa-solid fa-user"></i>

<!-- أيقونة Phone -->
<i class="fa-solid fa-phone"></i>

<!-- أيقونة WhatsApp -->
<i class="fa-brands fa-whatsapp"></i>

تغيير الحجم واللون

/* CSS */
.icon-large {
  font-size: 2rem;
  color: #e94560;
}

/* أو باستخدام Classes جاهزة */

<i class="fa-solid fa-heart fa-2x"></i>  <!-- ضعف الحجم -->
<i class="fa-solid fa-heart fa-3x"></i>  <!-- ثلاث أضعاف -->

إضافة أيقونة داخل زر

<button class="btn">
  <i class="fa-solid fa-paper-plane"></i> إرسال
</button>

إضافة أيقونات في Navbar

<nav>
  <ul>
    <li><a href="#"><i class="fa-solid fa-house"></i> الرئيسية</a></li>
    <li><a href="#"><i class="fa-solid fa-info-circle"></i> من نحن</a></li>
    <li><a href="#"><i class="fa-solid fa-phone"></i> تواصل معنا</a></li>
  </ul>
</nav>

💡 نصيحة: تقدر تبحث عن أي أيقونة محتاجها على الموقع الرسمي: fontawesome.com.

مشروع عملي يجمع HTML وCSS

بعد ما اتعلمت كل المفاهيم اللي فوق، حان الوقت تطبّقها كلها في مشروع واحد. أفضل طريقة لتثبيت المعلومات هي البناء الفعلي.

مشروع مقترح: Responsive Landing Page

ابني صفحة هبوط (Landing Page) متجاوبة لشركة وهمية، تحتوي على:

القسم	المفاهيم المستخدمة
Navbar	HTML `<nav>` + Flexbox + Hover Effects + Font Awesome Icons
Hero Section	Background Image/Gradient + Centering + Typography
About Section	`<section>` + Flexbox + Responsive Images
Services Cards	CSS Grid + `class` + Hover Animation + Pseudo Elements `::after`
Contact Form	`<form>` + `<label>` + `<input>` + `:focus` Pseudo Class
Footer	`<footer>` + Flexbox + Social Media Icons
Responsive Design	Media Queries + Flexible Units
CSS Animation	Transition on Buttons + @keyframes Fade In

🎯 الهدف: المشروع ده هيخليك تستخدم كل حاجة اتعلمتها في مكان واحد: HTML Semantic Elements، CSS Layout (Flexbox + Grid)، Responsive Design، Animations، Pseudo Classes وElements، Forms، وFont Awesome. كمان تقدر تضيفه لـ Portfolio بتاعك.

خلصت HTML وCSS.. أتعلم إيه بعد كده؟

ما الخطوة التالية بعد تعلم HTML وCSS؟

الخطوة التالية هي تعلم JavaScript لإضافة التفاعل والديناميكية للصفحات، ثم Git وGitHub لإدارة الكود، ثم اختيار Framework مثل React أو Angular، وبناء مشاريع عملية لـ Portfolio.

HTML + CSS ✅ (أنت هنا!)

⬇️

JavaScript — التفاعل والديناميكية

⬇️

Git & GitHub — إدارة الكود والتعاون

⬇️

Responsive Projects — مشاريع متجاوبة حقيقية

⬇️

Framework — React أو Angular أو Vue

⬇️

Back-End — Node.js أو Python أو C#

⬇️

Database — MySQL أو MongoDB

⬇️

Full Stack Development

⚠️ ملاحظة: المسار ده مناسب لمن يريد Web Development. لو هدفك مختلف (مثل Mobile أو Data Science)، المسار هيختلف. لكن HTML وCSS هما الأساس لأي حد عايز يدخل مجال الويب.

الخلاصة

HTML تبني هيكل الصفحة، وCSS تديّه الشكل — الاتنين لازم يتعلموا مع بعض.
استخدم عناصر HTML الدلالية (section, nav, footer) لتحسين SEO وAccessibility.
اتعلم Flexbox وGrid — هما أهم أدوات CSS للتخطيط.
Responsive Design مش اختيار — ده ضرورة. كل موقع لازم يشتغل على الموبايل.
لما CSS مش شغال — DevTools هي صديقك الأول للتشخيص.
أفضل طريقة للتعلم هي بناء مشاريع حقيقية مش مجرد مشاهدة كورسات.
بعد HTML وCSS، الخطوة التالية هي JavaScript.

🚀 ابدأ رحلتك في تعلم تصميم المواقع

لو بدأت HTML وCSS لكن محتار تكمل منين، أو عايز تتعلم Web Development بشكل عملي ومنظم من الصفر — فريق Syntax Room يقدر يساعدك ترسم خطة تعلم واضحة مبنية على هدفك ومستواك.

سواء كنت عايز تبدأ Front-End، أو محتار بين React وAngular، أو عايز Roadmap كاملة — تقدر تتواصل معنا.

اعرف المسار المناسب ليك

الأسئلة الشائعة (FAQ)

هل HTML وCSS كفاية لعمل موقع؟

نعم، تقدر تعمل موقع ثابت (Static Website) بـ HTML وCSS فقط — مثل Portfolio شخصي أو Landing Page أو صفحة تعريفية. لكن لو عايز الموقع يكون تفاعلي (مثل Form يشتغل أو بيانات متغيرة)، هتحتاج JavaScript وBack-End.

هل HTML لغة برمجة؟

لا. HTML هي لغة توصيف (Markup Language) وليست لغة برمجة. مفيش فيها منطق أو شروط أو حلقات. وظيفتها وصف هيكل الصفحة فقط — العناوين، الفقرات، الصور، والروابط.

هل CSS لغة برمجة؟

لا. CSS هي لغة تنسيق (Stylesheet Language). وظيفتها تحديد شكل العناصر — الألوان، الخطوط، المسافات، والتخطيط. هي مكمّلة لـ HTML لكن مش لغة برمجة.

هل أتعلم HTML قبل CSS؟

الأفضل تبدأ بأساسيات HTML الأول (التعرف على Tags والعناصر الأساسية)، ثم تتعلم CSS بالتوازي. في الواقع، الاتنين بيتعلموا مع بعض لأنك مش هتقدر تشوف نتيجة CSS بدون HTML، والعكس.

هل أحتاج JavaScript بعد CSS؟

نعم. لو هدفك Web Development، JavaScript هي الخطوة التالية الطبيعية بعد HTML وCSS. JavaScript بتضيف التفاعل — مثل القوائم اللي بتفتح وتقفل، والـ Forms اللي بتتحقق من البيانات، وجلب بيانات من APIs.

ما أفضل طريقة لتعلم CSS؟

أفضل طريقة هي التطبيق العملي. اتعلم مفهوم واحد (مثل Flexbox)، وطبّقه في مشروع صغير فورًا. لا تكتفي بالمشاهدة. جرّب تبني صفحات حقيقية وتجرّب تنسيقات مختلفة. استخدم DevTools لتفهم إيه بيحصل.

لماذا لا يعمل CSS معي؟

أشهر الأسباب: ملف CSS مش مربوط صح، Path غلط، Selector مش مطابق، Specificity أعلى من قاعدة تانية، Syntax Error، أو Browser Cache. استخدم DevTools (F12) لتشخيص المشكلة — شوف هل القاعدة موجودة وهل فيه Override.

كيف أتعلم Responsive Design؟

ابدأ بفهم Media Queries ووحدات القياس النسبية (%, rem, vw)، واتعلم Flexbox وGrid. بعد كده، جرّب تبني صفحة وتختبرها على أحجام شاشات مختلفة باستخدام DevTools. مع الممارسة، التصميم المتجاوب هيبقى طبيعي بالنسبالك.

هل Flexbox أفضل من Grid؟

لا واحدة "أفضل" من التانية — كل واحدة ليها استخدام. Flexbox مناسب للتخطيطات أحادية الاتجاه (صف أو عمود واحد) مثل Navbar. Grid مناسب للتخطيطات ثنائية الاتجاه (صفوف + أعمدة) مثل Page Layout. في المشاريع الحقيقية، بتستخدم الاتنين مع بعض.

هل يمكن بناء موقع كامل بـ HTML وCSS فقط؟

نعم، لو الموقع ثابت (Static). تقدر تبني Portfolio، صفحة تعريفية، أو Landing Page بـ HTML وCSS فقط. لكن لو محتاج تفاعل (مثل سلة شراء، تسجيل دخول، أو بيانات من سيرفر)، هتحتاج JavaScript وBack-End.

ما الفرق بين Front-End وWeb Design؟

Web Design يركز على الشكل والتصميم البصري (Colors, Typography, Layout, UX). Front-End Development يركز على تحويل التصميم لكود شغال (HTML, CSS, JavaScript). الاتنين مرتبطين، لكن Front-End أشمل لأنه يتضمن التفاعل والبرمجة.

كم من الوقت يحتاج تعلم HTML وCSS؟

بشكل تقريبي، 4–8 أسابيع لو بتتعلم 2–3 ساعات يوميًا بانتظام. في أول أسبوعين هتتعلم أساسيات HTML. في الأسبوعين التاليين هتتعلم أساسيات CSS. والشهر التاني هتتعمق في Flexbox وGrid وResponsive Design وتبني مشاريع. المدة بتختلف حسب الشخص والتطبيق العملي.