مرجع تطوير واجهات المستخدم الشامل (Front-End)

دليل كامِل يغطي التقنيات واللغات الأساسية لبناء تطبيقات وصفحات الويب الحديثة.

1. لغة HTML5 (الهيكل والبنية)

تُشكل HTML الهيكل العظمي لصفحات الويب، وتضمن إمكانية وصول محركات البحث ومقنيات الشاشة للمحتوى بشكل صحيح.

الهيكل القياسي والعناصر الدلالية (Semantic Tags)

<!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>
  <header>
    <nav><!-- روابط التنقل --></nav>
  </header>
  <main>
    <article>
      <section><!-- محتوى فرعي --></section>
    </article>
    <aside><!-- شريط جانبي --></aside>
  </main>
  <footer><!-- تذييل الصفحة --></footer>
</body>
</html>

2. لغة CSS3 (التنسيق والأنماط)

تُستخدم CSS للتحكم في مظهر العناصر، الألوان، الخطوط، والاستجابة لمختلف الشاشات.

المتغيرات ونموذج الصندوق (Box Model)

/* تعريف المتغيرات وبنية العناصر */
:root {
  --bg-color: #0a0a0a;
  --text-color: #ffffff;
}

* {
  box-sizing: border-box; /* شمول البادينج والحدود ضمن العرض الإجمالي */
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

3. تخطيط الصفحات (Flexbox & CSS Grid)

أنظمة الحديثة لتوزيع العناصر وإنشاء واجهات متجاوبة (Responsive Design).

استخدام Flexbox و Grid

/* Flexbox للتنسيق أفقياً أو رأسياً في اتجاه واحد */
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* CSS Grid للتخطيطات ثنائية الأبعاد */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

4. أساسيات JavaScript (ES6+)

اللغة البرمجية المسؤولة عن إضافة التفاعلية والديناميكية لصفحات الويب.

المتغيرات، الدوال الحديثة، والمصفوفات

// المتغيرات الثابتة والمتحولة
const apiUrl = "https://api.example.com/data";
let userScore = 10;

// الدوال السهمية (Arrow Functions)
const calculateTotal = (price, tax) => price + (price * tax);

// التفكيك (Destructuring) والوعاء الممتد (Spread Operator)
const user = { name: "أحمد", role: "Developer" };
const { name, role } = user;

const numbers = [1, 2, 3];
const updatedNumbers = [...numbers, 4, 5];

5. التعامل مع الشجرة (DOM) والأحداث

ربط منطق JavaScript بعناصر HTML واستجابة الصفحة لتفاعلات المستخدم.

// تحديد العناصر
const button = document.querySelector("#submit-btn");
const output = document.querySelector(".output-container");

// الاستماع للحدث (Event Listener)
button.addEventListener("click", (event) => {
  event.preventDefault();
  output.textContent = "تم النقر على الزر بنجاح!";
  output.classList.toggle("active");
});

6. البرمجة غير المتزامنة (Async/Await & Fetch)

جلب البيانات من الخوادم (APIs) دون الحاجة لإعادة تحميل الصفحة.

// استخدام Async / Await لجلب البيانات
async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) throw new Error("فشل في جلب البيانات");
    
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("حدث خطأ:", error.message);
  }
}

7. لغة TypeScript (فوقية لـ JavaScript)

تضيف ميزة الأنواع الثابتة (Static Typing) لمنع الأخطاء أثناء تطوير المشاريع الكبيرة.

// تحديد أنواع البيانات للمتغيرات والدوال
interface User {
  id: number;
  name: string;
  isAdmin?: boolean; // خاصية اختيارية
}

function getUserInfo(user: User): string {
  return `المستخدم: ${user.name} (ID: ${user.id})`;
}

8. أطر ومكتبات عمل الواجهات (Frameworks & Libraries)

تُستخدم لبناء تطبيقات الصفحة الواحدة (SPA) وإدارة الحالة بشكل كفء.

أبرز المكتبات وأطر العمل:

مثال على مكون React (JSX):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  );
}

9. أدوات التطوير والحزم (Build Tools & Ecosystem)

أدوات ضرورية لتحسين، تجميع، وإدارة بيئة تطوير الويب الحديثة.