تقنيو
English

كيف تنشئ موقعك الخاص من الصفر بدون خبرة: دليل خطوة بخطوة

دليل عملي للمبتدئين لبناء أول موقع إلكتروني باستخدام HTML وCSS، وتجربته على جهازك، ثم نشره على الإنترنت مجاناً وربطه بدومين خاص.

نُشر في 5 دقائق قراءة

نافذة متصفح يُبنى فيها تصميم موقع جزءاً بعد جزء بجانب أيقونة كود
محتويات المقال
  1. أولاً: اختر طريقك، منصة جاهزة أم كود؟
  2. ما الذي تحتاجه قبل البدء؟
  3. الخطوة 1: خطط لموقعك على الورق
  4. الخطوة 2: اكتب هيكل الصفحة بـ HTML
  5. الخطوة 3: أضف التصميم بـ CSS
  6. الخطوة 4: جرّب الموقع على جهازك
  7. الخطوة 5: انشر موقعك مجاناً
  8. أخطاء شائعة عند المبتدئين

لتنشئ موقعاً من الصفر بدون خبرة تحتاج إلى ثلاثة أشياء: محرر أكواد، وفهم أساسي لـ HTML (هيكل الصفحة) وCSS (تصميمها)، ومكان مجاني لنشر الملفات. تكتب الصفحة على جهازك، وتفتحها في المتصفح لتجربها، ثم ترفعها إلى استضافة مجانية للمواقع الثابتة ليراها الجميع.

باختصار: خطط لصفحاتك، اكتب ملف index.html، صمّمه بملف style.css، جرّبه في المتصفح، ثم انشره مجاناً واربطه بدومين إذا أردت.

أولاً: اختر طريقك، منصة جاهزة أم كود؟

هناك طريقتان رئيسيتان لإنشاء موقع، وكلتاهما صحيحة لكن لكل منهما هدف مختلف.

منصة بناء مواقع HTML وCSS (هذا الشرح)
المهارات المطلوبة لا شيء، سحب وإفلات أساسيات HTML وCSS
سرعة إطلاق أول موقع سريعة جداً بضع ساعات
التحكم في التصميم محدود بخيارات المنصة تحكم كامل
التكلفة الخطط المجانية محدودة، والمدفوعة شهرية غالباً يمكن أن يكون مجانياً بالكامل ما عدا الدومين
ماذا تتعلم؟ استخدام أداة واحدة مهارات تنفعك في أي مشروع ويب

سنسلك في هذا الشرح طريق الكود، لأنه يعلّمك كيف تعمل المواقع فعلاً ولا يكلّف شيئاً تقريباً. وإذا أردت أن تفهم مكان HTML وCSS في الصورة الكاملة، اقرأ شرحنا عن الفرق بين الفرونت إند والباك إند.

ما الذي تحتاجه قبل البدء؟

لن تحتاج إلى تثبيت أي شيء معقد:

  • محرر أكواد: برنامج Visual Studio Code مجاني ويعمل على Windows وmacOS وLinux. شرحنا عن إعداد VS Code يوضح أهم الإعدادات والإضافات.
  • متصفح: Chrome أو Firefox أو Edge أو Safari، وكلها تحتوي على أدوات المطور.
  • مجلد للمشروع: أنشئ مجلداً باسم my-website في مكان يسهل الوصول إليه.

هذا كل شيء. ملفات HTML وCSS تعمل مباشرة في المتصفح، فلا حاجة لإعداد خادم أو مترجم.

الخطوة 1: خطط لموقعك على الورق

قبل كتابة الكود، حدد هدف الموقع وما سيحتويه. في أول مشروع، اكتفِ بصفحة واحدة فيها بضعة أقسام، مثل:

  1. رأس الصفحة (Header) باسمك أو اسم مشروعك.
  2. قسم "من أنا" بفقرة قصيرة.
  3. قسم لأعمالك أو خدماتك أو مشاريعك.
  4. قسم للتواصل فيه رابط بريدك الإلكتروني.

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

الخطوة 2: اكتب هيكل الصفحة بـ HTML

داخل المجلد، أنشئ ملفاً باسم index.html. الاسم مهم، لأن خوادم الويب تبحث عن index.html كصفحة رئيسية بشكل افتراضي. الصق هذا الكود كبداية:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sara Ahmed | Web Designer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Sara Ahmed</h1>
    <p>Learning web design, one page at a time.</p>
  </header>

  <main>
    <section>
      <h2>About me</h2>
      <p>I build simple, fast websites for small businesses.</p>
    </section>

    <section>
      <h2>Contact</h2>
      <p><a href="mailto:hello@example.com">hello@example.com</a></p>
    </section>
  </main>

  <footer>
    <p>&copy; 2026 Sara Ahmed</p>
  </footer>
</body>
</html>

لاحظ هذه النقاط:

  • وسم <head> يحتوي معلومات عن الصفحة، و<title> هو ما يظهر في تبويب المتصفح وفي نتائج البحث.
  • وسم viewport يجعل الصفحة تظهر بشكل صحيح على الجوال، فلا تحذفه.
  • الوسوم <header> و<main> و<section> و<footer> تصف معنى كل جزء، وهذا يفيد إمكانية الوصول ومحركات البحث.
  • استخدم عنوان <h1> واحداً في الصفحة، ثم عناوين <h2> للأقسام.

إذا كان موقعك بالعربية، اكتب <html lang="ar" dir="rtl"> بدلاً من السطر الثاني، ليعرف المتصفح أن اللغة عربية ويعرض الصفحة من اليمين إلى اليسار.

الخطوة 3: أضف التصميم بـ CSS

أنشئ الآن ملف style.css في المجلد نفسه. وسم <link> في ملف HTML يشير إليه بالفعل.

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1f2937;
}

header {
  background: #0f766e;
  color: #ffffff;
  text-align: center;
  padding: 48px 20px;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

a {
  color: #0f766e;
}

footer {
  text-align: center;
  padding: 20px;
  color: #6b7280;
}

الخاصية max-width مع margin: 0 auto تُبقي النص في عمود مريح للقراءة على الشاشات الكبيرة، مع قدرته على التصغير في الشاشات الصغيرة. غيّر الألوان وقيم المسافات ثم حدّث الصفحة لترى أثر كل سطر، فالتجربة أسرع طريقة لتعلّم CSS.

مراحل البناء: كتابة index.html، ثم تصميمه بملف style.css، ثم معاينة الصفحة في المتصفح، ثم نشرها على الإنترنت

الخطوة 4: جرّب الموقع على جهازك

انقر مرتين على index.html ليفتح في المتصفح، ثم افحص هذه الأمور:

  • عرض الجوال: افتح أدوات المطور (غالباً بزر F12 أو بالنقر بالزر الأيمن ثم Inspect)، وفعّل شريط الأجهزة لمعاينة مقاسات الجوال.
  • الروابط: اضغط كل رابط وتأكد أنه يذهب إلى المكان الصحيح.
  • الأخطاء: تبويب Console في أدوات المطور يعرض الأخطاء إذا فشل تحميل شيء، مثل خطأ في اسم ملف.

اجعل أسماء الملفات والمجلدات بأحرف صغيرة وبدون مسافات (مثل about.html وليس About Me.html). كثير من خوادم الويب تفرّق بين الأحرف الكبيرة والصغيرة، فقد يعمل رابط على جهازك ثم يتعطل بعد النشر.

الخطوة 5: انشر موقعك مجاناً

الموقع المكوّن من ملفات HTML وCSS يسمى موقعاً ثابتاً (Static Site)، وهناك خدمات عديدة تستضيفه ضمن خطط مجانية، منها GitHub Pages وCloudflare Pages وNetlify وVercel. الخطوات متشابهة في جميعها:

  1. أنشئ حساباً مجانياً.
  2. ارفع مجلد الموقع، أو اربط مستودع GitHub يحتوي عليه.
  3. تحصل على عنوان مجاني على نطاق فرعي تابع للخدمة.

شرحنا عن أفضل استضافة مواقع مجانية يقارن بين هذه الخيارات. وعندما تريد اسماً خاصاً بك، يمكنك حجز دومين من Namecheap وربطه بالاستضافة.

أخطاء شائعة عند المبتدئين

  • البدء بمشروع كبير: أنهِ صفحة واحدة جيدة قبل إضافة المزيد.
  • نسيان وسم viewport: بدونه يظهر موقعك صغيراً جداً على الجوال.
  • استخدام صور الكاميرا مباشرة: الصور الكبيرة تبطئ الموقع، فصغّرها واضغطها قبل إضافتها.
  • نسخ كود لا تفهمه: غيّر شيئاً واحداً في كل مرة لتعرف وظيفة كل سطر.
  • إهمال خاصية alt للصور: نص alt يصف الصورة لقارئات الشاشة ولمحركات البحث.

بعد نشر صفحتك الأولى، أضف صفحة ثانية، وتعلّم قليلاً من تخطيط الصفحات في CSS (خاصية Flexbox خطوة ممتازة بعدها)، واستمر في البناء. كل موقع تنشره يعلّمك شيئاً لم يعلّمك إياه الموقع الذي قبله.

أسئلة شائعة

كم يستغرق بناء موقع بسيط لشخص بدون خبرة؟

يمكنك بناء موقع شخصي بسيط من صفحة واحدة خلال يوم أو عطلة نهاية أسبوع إذا اتبعت شرحاً واضحاً. أما تعلّم HTML وCSS بدرجة تسمح لك ببناء مواقع أكبر وحدك فيحتاج عادة بضعة أسابيع من التدريب المنتظم.

هل أستخدم منصة لبناء المواقع أم أتعلم HTML وCSS؟

إذا كنت تريد موقعاً سريعاً ولا ترغب في تعلّم البرمجة، فمنصات بناء المواقع خيار مناسب. أما إذا أردت تحكماً كاملاً وتكلفة أقل على المدى الطويل ومهارة تنمو معك، فتعلّم أساسيات HTML وCSS يستحق الجهد.

هل أحتاج شراء استضافة لنشر موقعي؟

ليس للموقع الثابت البسيط. خدمات مثل GitHub Pages وCloudflare Pages وNetlify تستضيف مواقع HTML وCSS ضمن خططها المجانية. تدفع فقط إذا أردت دوميناً خاصاً باسمك أو احتجت ميزات متقدمة.

لماذا يبدو موقعي جيداً على الكمبيوتر لكنه مكسور على الجوال؟

السبب غالباً غياب وسم viewport أو استخدام عرض ثابت بالبكسل للعناصر. أضف وسم viewport داخل head، واستخدم max-width بدلاً من width الثابت، وجرّب الموقع بوضع الأجهزة في أدوات المطور.