أكاديمية الويب | تعلم HTML CSS JavaScript

الأساس

🏗️ وسوم HTML

HTML هي لغة هيكل صفحات الويب — تخبر المتصفح بماذا يعرض وأين

    💡 ما هو HTML؟

    HTML = HyperText Markup Language — لغة الترميز الفائقة. كل صفحة ويب تبدأ بها. المتصفح يقرأ وسوم HTML ويحوّلها إلى محتوى مرئي. كل وسم يبدأ بـ <tag> وينتهي بـ </tag>

الهيكل الأساسي لأي صفحة

    
<!-- هذا هو الهيكل الأساسي لأي صفحة HTML -->
<!DOCTYPE html>            <!-- يخبر المتصفح نوع المستند -->
<html lang="ar" dir="rtl">   <!-- جذر الصفحة + تحديد اللغة والاتجاه -->
<head>                        <!-- معلومات الصفحة (لا تظهر للمستخدم) -->
  <meta charset="UTF-8">        <!-- ترميز الحروف (يدعم العربية) -->
  <meta name="viewport" content="width=device-width">
  <title>عنوان الصفحة</title>  <!-- ظاهر في تبويب المتصفح -->
  <link rel="stylesheet" href="style.css">
</head>
<body>                        <!-- محتوى الصفحة المرئي يوضع هنا -->

  <h1>مرحباً بالعالم!</h1>
  <p>هذه أول صفحة ويب لي</p>

</body>
</html>
  

هيكل

عناوين الصفحة من الأكبر (h1) إلى الأصغر (h6). استخدم h1 مرة واحدة فقط في الصفحة.

<h1>العنوان الرئيسي</h1>
<h2>عنوان فرعي</h2>

نص

<p>

فقرة نصية — الوسم الأكثر استخداماً لعرض النصوص والمحتوى.

تنسيق

strong = نص غامق مهم. em = نص مائل مؤكد.

<strong>مهم!</strong> <em>تأكيد</em>

قوائم

ul = قائمة غير مرتبة (نقاط). ol = قائمة مرتبة (أرقام). li = عنصر القائمة.

حاوية

<div>

صندوق تقسيم عام (Block). يُستخدم كثيراً لتجميع العناصر وتطبيق التنسيق عليها.

حاوية

<span>

حاوية مضمّنة (Inline). لتنسيق جزء من النص بدون كسر السطر.

جدول

<table>

جدول بيانات. يحتوي على tr (صف) و td (خلية) و th (عنوان خلية).

<table><tr><td>بيانات</td></tr></table>

خط فاصل

br = سطر جديد. hr = خط أفقي فاصل. كلاهما وسوم مغلقة ذاتياً.

      ⚠️ النماذج مهمة جداً: كل موقع تواصل أو متجر يعتمد على النماذج لتسجيل الدخول والبيانات والمدفوعات.
    

نموذج

<form>

حاوية النموذج. الخاصية action تحدد أين ترسل البيانات، method تحدد طريقة الإرسال (GET/POST).

إدخال

<input>

حقل إدخال. النوع يتغير بالخاصية type: text, password, email, number, checkbox, radio, file...

نص طويل

منطقة نص متعدد الأسطر. مناسب للرسائل والتعليقات والأوصاف.

قائمة منسدلة

قائمة اختيار منسدلة. تحتوي على عناصر option.

<select>
<option>مصر</option>
<option>السعودية</option>
</select>

زر

زر قابل للنقر. الأفضل عن input type=button لأنه يدعم HTML بداخله.

<button type="submit">إرسال</button>
<button onclick="...">اضغط</button>

تسمية

<label>

تسمية لحقل إدخال. اربطها بالحقل عبر for="id_الحقل" لتحسين إمكانية الوصول.

<label for="email">البريد:</label>
<input id="email" type="email">

مثال: نموذج تسجيل دخول كامل

      
<form action="/login" method="post">
  <div class="form-group">
    <label for="email">البريد الإلكتروني</label>
    <input type="email" id="email" name="email"
           placeholder="user@example.com" required>
  </div>
  <div class="form-group">
    <label for="pass">كلمة المرور</label>
    <input type="password" id="pass" minlength="8" required>
  </div>
  <button type="submit">تسجيل الدخول</button>
</form>
    

صورة

<img>

عرض صورة. src = مصدر الصورة. alt = نص بديل (مهم لـ SEO وإمكانية الوصول).

رابط

<a>

رابط تشعبي. href = الوجهة. target="_blank" يفتح في تبويب جديد.

فيديو

<video>

عرض فيديو محلي أو من الإنترنت. controls تظهر أدوات التشغيل. autoplay لتشغيل تلقائي.

صوت

<audio>

مشغل صوت. يدعم mp3, ogg, wav.

إطار

تضمين صفحة أو محتوى خارجي. يُستخدم لتضمين يوتيوب وخرائط جوجل.

رسم

منطقة رسم برمجية بالـ JavaScript. يُستخدم للألعاب والرسوم البيانية.

      🔍 لماذا الوسوم الدلالية مهمة؟

      تساعد محركات البحث (SEO) على فهم محتوى صفحتك بشكل أفضل وترفع ترتيبها في النتائج.

هيكل

رأس الصفحة أو القسم. يحتوي عادةً الشعار وقائمة التنقل.

هيكل

<nav>

شريط التنقل والروابط الرئيسية للموقع.

هيكل

<main>

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

هيكل

قسم موضوعي في الصفحة له عنوان خاص.

هيكل

مقال أو محتوى مستقل كمنشور مدونة أو تغريدة.

هيكل

<aside>

محتوى جانبي كقائمة المواضيع المشابهة أو الإعلانات.

هيكل

تذييل الصفحة. يحتوي حقوق النشر والروابط الإضافية.

نص

<time>

تمثيل التواريخ والأوقات بشكل دلالي.

<time datetime="2024-01-01">1 يناير</time>

التصميم

🎨 خصائص CSS

CSS تحوّل صفحتك من نص جاف إلى تصميم احترافي جميل

    💡 كيف تربط CSS بـ HTML؟

    ثلاث طرق: 1. خارجي (ملف .css منفصل — الأفضل) | 2. داخلي (وسم <style> في <head>) | 3. مضمّن (style="..." في الوسم مباشرة)

نص

color / font-size

لون النص وحجمه. يمكن استخدام px, rem, em, vw لتحديد الحجم.

color: #333; font-size: 16px; font-size: 1rem;

خلفية

background

خلفية العنصر — لون، صورة، أو تدرج لوني.

background: #fff;
background: linear-gradient(to right, blue, pink);
background: url('img.jpg') center/cover;

مسافات

margin / padding

margin = مسافة خارج العنصر. padding = مسافة داخل العنصر. القيم: أعلى يمين أسفل يسار.

margin: 10px 20px;
padding: 16px;
margin-top: 8px;

حجم

width / height

عرض وارتفاع العنصر. يمكن تحديدها بـ px أو % أو vw/vh.

width: 100%; height: 50vh;
max-width: 1200px; min-height: 100vh;

حدود

border / border-radius

حدود العنصر وتدوير زواياه. border-radius: 50% تصنع دائرة.

border: 1px solid #ccc;
border-radius: 8px;
border-radius: 50%;

ظل

box-shadow / text-shadow

ظل للعنصر أو النص. القيم: x y blur spread color.

box-shadow: 0 4px 20px rgba(0,0,0,0.2);
text-shadow: 2px 2px 4px #000;

موضع

position

static (افتراضي) | relative (نسبي) | absolute (مطلق) | fixed (ثابت) | sticky (لاصق)

position: absolute;
top: 0; left: 0; right: 0; bottom: 0;

عرض

display

طريقة عرض العنصر. block, inline, inline-block, flex, grid, none.

display: flex;
display: grid;
display: none;

      ✅ Flexbox هو الأكثر استخداماً لتوزيع العناصر في صف أو عمود. 90% من التصاميم الحديثة تعتمد عليه.
    

      
/* الحاوية الأم */
.container {
  display: flex;
  flex-direction: row;         /* الاتجاه: row | column | row-reverse */
  justify-content: center;     /* توزيع أفقي: flex-start | center | space-between | space-around */
  align-items: center;        /* توزيع رأسي: flex-start | center | stretch */
  flex-wrap: wrap;           /* للالتفاف إذا ضاق المكان */
  gap: 20px;                /* مسافة بين العناصر */
}

/* العناصر الأبناء */
.item {
  flex: 1;                  /* يتوسع بالتساوي */
  flex-grow: 2;             /* ينمو بمعدل ضعف الآخرين */
  order: -1;               /* يتقدم في الترتيب */
}
    

      ✅ CSS Grid الأفضل لإنشاء تصاميم شبكية معقدة. مثالي للمتاجر والبوابات.
    

      
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 أعمدة متساوية */
  grid-template-columns: 200px 1fr 1fr;    /* عمود ثابت + عمودان متساويان */
  grid-template-rows: auto;
  gap: 20px;
}

/* جعل عنصر يمتد على عدة أعمدة */
.hero-element {
  grid-column: 1 / -1;   /* يمتد على كل العرض */
  grid-row: 1 / 3;       /* يمتد على صفين */
}

/* تصميم صفحة كاملة بـ grid */
body {
  display: grid;
  grid-template-areas: "header header"
                         "sidebar main"
                         "footer footer";
}
    

      📱 التصميم المتجاوب (Responsive) يجعل موقعك يعمل على جميع الأجهزة: موبايل، تابلت، كمبيوتر.
    

      
/* Mobile First: ابدأ بالموبايل ثم اكبر */

/* الافتراضي = موبايل */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;   /* عمود واحد */
}

/* تابلت — أكبر من 768px */
@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);  /* عمودان */
  }
}

/* كمبيوتر — أكبر من 1024px */
@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);  /* 3 أعمدة */
  }
}

/* وحدات متجاوبة مفيدة */
font-size: clamp(1rem, 2.5vw, 2rem);   /* حجم مرن بحدود */
width: min(100%, 1200px);              /* لا تتجاوز 1200px */
    

      
/* Transition: تأثير انتقال بسيط */
.btn {
  background: blue;
  transition: all 0.3s ease;  /* الخاصية المدة منحنى-التسارع */
}
.btn:hover {
  background: darkblue;
  transform: translateY(-3px);  /* تحريك للأعلى */
  box-shadow: 0 10px 20px rgba(0,0,255,0.3);
}

/* Keyframes: أنيميشن كامل */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated-element {
  animation: fadeSlideUp 0.6s ease forwards;
  animation-delay: 0.2s;   /* تأخير البدء */
}

/* دوران مستمر */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 1s linear infinite; }
    

التفاعل

⚡ JavaScript

JS تضيف الحياة والتفاعل لموقعك — بدونها الموقع جامد كصورة

      
// ====== المتغيرات ======
let   name = "محمد";          // يتغير لاحقاً
const age  = 25;             // ثابت لا يتغير — استخدمه دائماً
var   old  = "قديم";         // تجنب استخدامه

// ====== أنواع البيانات ======
const str  = "نص";           // String
const num  = 42;             // Number
const bool = true;           // Boolean
const arr  = ["أحمد", "سارة", "مصطفى"];  // Array
const obj  = { name: "علي", age: 30 };    // Object

// ====== الدوال ======
function greet(name) {
  return `مرحباً يا ${name}!`;
}

const add = (a, b) => a + b;   // Arrow Function

// ====== الشروط ======
if (age >= 18) {
  console.log("بالغ");
} else if (age >= 13) {
  console.log("مراهق");
} else {
  console.log("طفل");
}

// ====== الحلقات ======
for (let i = 0; i < 5; i++) {
  console.log(i);
}

arr.forEach(item => console.log(item));
const doubled = arr.map(x => x + "!");
const adults  = arr.filter(x => x.startsWith("أ"));
    

      🌳 DOM = Document Object Model. JavaScript يرى HTML كشجرة عناصر ويستطيع تعديلها.
    

      
// ====== اختيار العناصر ======
const el1 = document.getElementById("myId");
const el2 = document.querySelector(".myClass");       // أول عنصر
const all = document.querySelectorAll("p");            // كل العناصر

// ====== تعديل المحتوى ======
el1.textContent = "نص جديد";         // تغيير النص
el1.innerHTML   = "<b>نص مميز</b>";  // تغيير HTML داخل العنصر

// ====== تعديل التنسيق ======
el1.style.color      = "red";
el1.style.display    = "none";   // إخفاء
el1.style.display    = "block";  // إظهار

// ====== الكلاسات ======
el1.classList.add("active");
el1.classList.remove("hidden");
el1.classList.toggle("open");    // يضيف أو يزيل
el1.classList.contains("active"); // true أو false

// ====== إنشاء عناصر ======
const newEl = document.createElement("div");
newEl.textContent = "عنصر جديد";
newEl.className   = "card";
document.body.appendChild(newEl);

// ====== قراءة البيانات ======
const inputVal = document.querySelector("#email").value;
    

      
// ====== إضافة حدث ======
element.addEventListener("click", function(event) {
  console.log("تم النقر!");
  event.preventDefault();  // منع السلوك الافتراضي (مهم في forms)
});

// ====== أنواع الأحداث ======
// click          — نقر بالماوس
// dblclick       — نقر مزدوج
// mouseover      — مرور الماوس
// keydown/keyup  — ضغط مفتاح
// input/change   — تغيير قيمة حقل
// submit         — إرسال نموذج
// scroll         — تمرير الصفحة
// resize         — تغيير حجم النافذة
// DOMContentLoaded — بعد تحميل DOM

// ====== مثال: نموذج تسجيل ======
document.querySelector("#loginForm").addEventListener("submit", (e) => {
  e.preventDefault();
  const email = document.querySelector("#email").value;
  const pass  = document.querySelector("#pass").value;

  if (!email || !pass) {
    alert("يرجى ملء جميع الحقول");
    return;
  }
  // إرسال للسيرفر...
  console.log("تسجيل الدخول...", email);
});

// ====== Local Storage (حفظ بيانات) ======
localStorage.setItem("user", "محمد");
const user = localStorage.getItem("user");
localStorage.removeItem("user");
    

      ⚡ البرمجة الغير متزامنة (Async) ضرورية لأي موقع حقيقي — تجلب البيانات من السيرفر بدون تجميد الصفحة.
    

      
// ====== Fetch API: جلب بيانات من السيرفر ======
async function getPosts() {
  try {
    const response = await fetch("https://api.example.com/posts");
    const data     = await response.json();  // تحويل لـ JSON

    data.forEach(post => {
      const card = document.createElement("div");
      card.innerHTML = `<h3>${post.title}</h3><p>${post.body}</p>`;
      document.querySelector("#feed").appendChild(card);
    });

  } catch (error) {
    console.error("خطأ في جلب البيانات:", error);
  }
}

// ====== POST: إرسال بيانات للسيرفر ======
async function createPost(title, body) {
  const response = await fetch("/api/posts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title, body })
  });
  return response.json();
}
    

تطبيق عملي

🚀 كيف تبني مشاريع حقيقية

فيسبوك، يوتيوب، واتساب، متجر إلكتروني — نشرح لك الطريق

📘

موقع تواصل اجتماعي

مثل فيسبوك / إنستجرام

ReactNode.jsMongoDBSocket.io

تسجيل الدخول والتسجيل (JWT)
الجدار الزمني (Timeline)
رفع الصور والفيديو (Cloudinary)
الإعجاب والتعليق والمشاركة
نظام المتابعة والأصدقاء
الإشعارات اللحظية (WebSocket)
الرسائل المباشرة (Chat)
البحث عن الأصدقاء

🎥

منصة فيديو

مثل يوتيوب / تيك توك

ReactNode.jsFFmpegAWS S3

رفع الفيديو وضغطه (FFmpeg)
تخزين الفيديو (AWS S3)
مشغل فيديو مخصص
خوارزمية التوصيات
قسم التعليقات
نظام القنوات والاشتراكات
البحث والتصفية
مشاهدات وإحصائيات

💬

تطبيق تراسل

مثل واتساب / تيليجرام

ReactSocket.ioRedisPostgreSQL

التحقق برقم الهاتف (OTP)
محادثات فردية وجماعية
الرسائل اللحظية (WebSocket)
حالة المشاهدة (Seen)
رفع الصور والملفات
الرسائل الصوتية
تشفير الرسائل (E2E)
تطبيق موبايل (React Native)

🛒

متجر إلكتروني

مثل أمازون / نون

Next.jsStripePostgreSQLRedis

صفحات المنتجات (SSR/SEO)
سلة التسوق (Cart)
بوابة دفع (Stripe/Paymob)
نظام إدارة الطلبات
لوحة تحكم البائع
نظام التقييمات
كوبونات الخصم
تتبع الشحن

📰

منصة مدونة / أخبار

مثل Medium / مدونة شخصية

Next.jsMDXSanity CMSTailwind

محرر نصوص غني (Rich Text)
تحسين SEO تلقائي
تصفية بالتصنيفات والوسوم
نظام تعليقات
مشاركة اجتماعية
اشتراك البريد الإلكتروني
لوحة إدارة المحتوى
قراءة تقديرية للوقت

مقارنة التقنيات المطلوبة

المشروع	Front-end	Back-end	قاعدة بيانات	صعوبة	مناسب للمبتدئ
📰 مدونة	HTML/CSS/JS	Node.js	MongoDB	⭐⭐	✓
🛒 متجر	Next.js	Node.js	PostgreSQL	⭐⭐⭐	✓
📘 تواصل	React	Node.js	MongoDB	⭐⭐⭐⭐	✗
🎥 فيديو	React	Node.js	PostgreSQL+S3	⭐⭐⭐⭐⭐	✗
💬 تراسل	React	Node.js+WebSocket	PostgreSQL+Redis	⭐⭐⭐⭐⭐	✗

خارطة الطريق

🗺️ رحلتك من المبتدئ للمحترف

خطوات واضحة ومرتبة للوصول للاحتراف

المرحلة 1

الأساسيات — HTML وCSS

تعلم وسوم HTML الأساسية، CSS، التصميم المتجاوب، Flexbox وGrid. ابنِ 3 صفحات ثابتة (Landing page، CV، موقع بسيط).

⏱️ المدة: 4-6 أسابيع

🏗️

المرحلة 2

JavaScript الأساسي

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

⏱️ المدة: 6-8 أسابيع

⚡

المرحلة 3

JavaScript المتقدم + APIs

Fetch API، Async/Await، Promises، الـ REST APIs، تخزين البيانات (LocalStorage). اعمل: تطبيق طقس، قائمة أفلام.

⏱️ المدة: 4-6 أسابيع

🌐

المرحلة 4

React.js

Components، Props، State، Hooks، React Router، Context API. اعمل: تطبيق تسوق، مدونة، لوحة إدارة.

⏱️ المدة: 8-10 أسابيع

⚛️

المرحلة 5

Back-end: Node.js + قواعد البيانات

Node.js، Express.js، REST API، MongoDB أو PostgreSQL، JWT للمصادقة. اعمل: API كاملة مع قاعدة بيانات.

⏱️ المدة: 10-12 أسبوع

🗄️

المرحلة 6

Full-Stack + النشر

Next.js، Git، Docker، الاستضافة (Vercel، Railway، AWS)، CI/CD. ابنِ مشروع كامل وانشره على الإنترنت.

⏱️ المدة: مستمر

🚀

أسئلة شائعة من المبتدئين

من أين أبدأ تعلم البرمجة؟ +

ابدأ بـ HTML وCSS أولاً لأنك ترى نتائجك فوراً في المتصفح. بعد أسبوعين، ابدأ JavaScript. لا تحاول تعلم كل شيء دفعة واحدة. تعلم، طبق، ابنِ شيئاً صغيراً، ثم انتقل للتالي.

كم من الوقت أحتاج لأصبح مطور ويب؟ +

مع تعلم يومي منتظم (2-3 ساعات)، يمكنك البدء بالعمل الحر (Freelance) خلال 6-9 أشهر. للوصول لوظيفة في شركة احتاج 12-18 شهراً. المفتاح هو البناء المستمر وليس الحفظ.

هل أحتاج شهادة جامعية لأعمل مطور؟ +

لا، الغالبية العظمى من الشركات تنظر للـ Portfolio (مشاريعك) أكثر من الشهادة. ابنِ 3-5 مشاريع حقيقية على GitHub وستجد فرصاً. بعض الشركات الكبرى (جوجل، ميتا) أزالت شرط الشهادة.

ما الفرق بين Front-end وBack-end وFull-Stack؟ +

Front-end = ما يراه المستخدم (HTML, CSS, JS, React). Back-end = السيرفر وقاعدة البيانات والمنطق (Node.js, Python, PHP). Full-Stack = كلاهما. ابدأ بـ Front-end لأنه أسهل وأسرع ترى نتائجه.

هل أستطيع بناء مثل فيسبوك أو يوتيوب وأنا مبتدئ؟ +

مباشرة؟ لا. هذه المنصات بنيت بفرق من آلاف المهندسين. لكن يمكنك بناء نسخة مبسطة بعد 12-18 شهر من التعلم المنظم. الهدف الأفضل الآن هو تعلم الأساسيات وبناء مشاريع أصغر تدريجياً.

تعلَّم HTML, CSS
و JavaScript

🏗️ وسوم HTML

الهيكل الأساسي لأي صفحة

مثال: نموذج تسجيل دخول كامل

🎨 خصائص CSS

⚡ JavaScript

🎯 اختبار شامل

🚀 كيف تبني مشاريع حقيقية

مقارنة التقنيات المطلوبة

🗺️ رحلتك من المبتدئ للمحترف

الأساسيات — HTML وCSS

JavaScript الأساسي

JavaScript المتقدم + APIs

React.js

Back-end: Node.js + قواعد البيانات

Full-Stack + النشر

أسئلة شائعة من المبتدئين

تعلَّم HTML, CSSو JavaScript

🏗️ وسوم HTML

الهيكل الأساسي لأي صفحة

مثال: نموذج تسجيل دخول كامل

🎨 خصائص CSS

⚡ JavaScript

🎯 اختبار شامل

🚀 كيف تبني مشاريع حقيقية

مقارنة التقنيات المطلوبة

🗺️ رحلتك من المبتدئ للمحترف

الأساسيات — HTML وCSS

JavaScript الأساسي

JavaScript المتقدم + APIs

React.js

Back-end: Node.js + قواعد البيانات

Full-Stack + النشر

أسئلة شائعة من المبتدئين

تعلَّم HTML, CSS
و JavaScript