🟢 مقدمة: لماذا أول مشروع مهم جدًا؟

أول مشروع ويب تقوم ببنائه هو اللحظة التي تتحول فيها من “متعلم” إلى “مطور حقيقي”.
الفرق بين شخص يشاهد الدروس وشخص يصبح مبرمجًا هو: التطبيق العملي.

كثير من المبتدئين يظنون أن مشاهدة الفيديوهات أو قراءة الشروحات كافية، لكن الحقيقة هي:

❗ البرمجة لا تُتعلم بالمشاهدة فقط، بل بالتجربة والخطأ وبناء المشاريع.

أول مشروع لك لا يجب أن يكون معقدًا، بل بسيطًا وواضحًا، لأن الهدف ليس الإبهار، بل الفهم.

في هذا المقال سنبني معًا مشروعًا حقيقيًا خطوة بخطوة: 👉 موقع شخصي احترافي (Portfolio Beginner Level)

وسنتعلم معه:

HTML
CSS
تنظيم الملفات
التفكير كمطور
تحسين التصميم
كيفية تطوير المشروع لاحقًا

🧭 المرحلة 1: فهم فكرة المشروع قبل الكتابة

قبل كتابة أي كود، يجب أن تفهم ماذا ستبني.

🎯 هدف المشروع:

إنشاء صفحة ويب تعرض:

اسمك
نبذة عنك
مهاراتك
وسيلة تواصل
تصميم جميل وبسيط

🧠 لماذا هذا المشروع مناسب للمبتدئين؟

لأنه يحتوي على:

عناصر HTML الأساسية
تنسيق CSS
تصميم بسيط
بدون تعقيد JavaScript

💡 ماذا ستتعلم منه؟

بعد هذا المشروع ستفهم:

كيف تُبنى صفحات الويب
كيف يتم ربط CSS بـ HTML
كيف تفكر كمطور
كيف تنظم مشروعك

🗂️ المرحلة 2: تجهيز بيئة العمل

الأدوات المطلوبة:

1. المتصفح:

Google Chrome أو أي متصفح حديث

2. محرر الأكواد:

Visual Studio Code (VS Code)

📁 إنشاء المشروع

قم بإنشاء مجلد باسم:

my-first-website

ثم داخله أنشئ:

index.html
style.css

📌 لماذا هذا التنظيم مهم؟

تنظيم الملفات هو أول خطوة نحو الاحتراف.

في المشاريع الكبيرة ستجد:

مجلد HTML
مجلد CSS
مجلد JavaScript
صور
ملفات أخرى

🧱 المرحلة 3: بناء هيكل HTML

افتح ملف index.html واكتب:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>موقعي الشخصي</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>مرحبًا، أنا مطور ويب مبتدئ 👋</h1>
    <p>هذا أول مشروع ويب أقوم ببنائه</p>
  </header>

  <section class="about">
    <h2>من أنا</h2>
    <p>
      أنا شخص أتعلم تطوير الويب خطوة بخطوة، وأعمل على بناء مهاراتي في HTML وCSS وJavaScript.
    </p>
  </section>

  <section class="skills">
    <h2>مهاراتي</h2>
    <ul>
      <li>HTML - بناء الهيكل</li>
      <li>CSS - تصميم الصفحات</li>
      <li>JavaScript - التفاعل</li>
    </ul>
  </section>

  <section class="projects">
    <h2>مشاريعي</h2>
    <p>لا توجد مشاريع حاليًا، لكن سيتم إضافتها قريبًا 🚀</p>
  </section>

  <section class="contact">
    <h2>تواصل معي</h2>
    <button>إرسال رسالة</button>
  </section>

  <footer>
    <p>حقوق النشر © 2026</p>
  </footer>

</body>
</html>

🎨 المرحلة 4: تصميم الموقع باستخدام CSS

افتح ملف style.css:

✨ إعداد الصفحة العامة

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  text-align: center;
}

🟦 تصميم الهيدر

header {
  background-color: #2c3e50;
  color: white;
  padding: 40px 20px;
}

📦 تصميم الأقسام

section {
  background-color: white;
  margin: 20px auto;
  padding: 20px;
  width: 80%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

🧾 العناوين

h2 {
  color: #2c3e50;
}

🔘 تصميم الزر

button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

✨ تأثير عند المرور

button:hover {
  background-color: #2980b9;
  transform: scale(1.05);
}

🧾 الفوتر

footer {
  background-color: #222;
  color: white;
  padding: 15px;
  margin-top: 30px;
}

🧪 المرحلة 5: تشغيل المشروع

الطريقة:

افتح مجلد المشروع
اضغط على index.html
سيفتح في المتصفح

🎉 الآن لديك موقع حقيقي!

🧠 المرحلة 6: ماذا تعلمت فعليًا؟

أنت الآن تعلمت:

بناء صفحة HTML كاملة
تنظيم المحتوى
استخدام CSS للتصميم
التعامل مع الأقسام
إنشاء زر تفاعلي

🔥 المرحلة 7: تحسين المشروع (مستوى متوسط)

1. إضافة صورة شخصية

<img src="me.jpg" alt="صورتي الشخصية">

2. تحسين التصميم ليصبح متجاوب

@media (max-width: 768px) {
  section {
    width: 95%;
  }
}

3. إضافة روابط تواصل

<a href="mailto:test@gmail.com">راسلني</a>

🌍 المرحلة 8: نشر الموقع على الإنترنت

خيارات مجانية:

1. GitHub Pages

مجاني
مناسب للمبتدئين

2. Netlify

سهل جدًا
نشر سريع

3. Vercel

احترافي للمشاريع الكبيرة

⚠️ أخطاء شائعة يجب تجنبها

❌ عدم تنظيم الملفات
❌ نسخ الأكواد بدون فهم
❌ تجاهل التصميم
❌ عدم اختبار الموقع

🧭 المرحلة 9: كيف تطور المشروع لاحقًا؟

بعد هذا المشروع يمكنك إضافة:

JavaScript:

زر تغيير اللون
نموذج تواصل
قائمة تفاعلية

مشاريع أكبر:

مدونة شخصية
متجر إلكتروني
صفحة CV احترافية

🏆 المرحلة 10: كيف تفكر كمطور محترف؟

المطور المحترف لا يسأل:

كيف أكتب الكود؟

بل يسأل:

كيف أبني تجربة مستخدم جيدة؟

💡 قاعدة ذهبية:

“الكود سهل، لكن التفكير هو الاحتراف”

🚀 المرحلة 11: التحديات التالية لك

جرب أن تطور المشروع إلى:

تصميم احترافي كامل
إضافة JavaScript
نشره على الإنترنت
مشاركة الرابط مع الآخرين

🔚 الخلاصة

أول مشروع ويب هو أهم خطوة في رحلتك.

إذا أنجزت هذا المشروع بنفسك، فأنت الآن: 👉 لم تعد مبتدئًا تمامًا
👉 بل بدأت طريقك كمطور ويب حقيقي

🎯 نصيحة أخيرة:

لا تنتقل بسرعة إلى الدروس التالية.
كرر هذا المشروع، عدّله، حسّنه، واجعله أفضل كل مرة.

تعديل المقال

بناء أول مشروع ويب لك