أطلِقه: من شاشتك إلى العالم

beginner~12 د0/4 خطوات

أطلِقه: من شاشتك إلى العالم

إليك حقيقة قاسية: صفحة موجودة على حاسوبك فقط ليست مُطلَقة. لا أحد يستطيع رؤيتها، ولا أحد يستطيع استخدامها، ولا أحد يستطيع إخبارك بأنها رائعة. الإطلاق يعني شيئًا واحدًا — رابط URL يستطيع أي شخص في العالم فتحه. هذا هو الخط الفاصل بين "أنا أتعلم البرمجة" و "أنا بنيت شيئًا".

الخبر السار؟ الحصول على رابط هو الجزء السهل الآن. خدمات مجانية تفعل ذلك في ثوانٍ:

Netlify Drop — افتح الموقع، اسحب ملف الـ HTML إلى الصفحة، واحصل على رابط مباشر. هذه هي العملية كلها.
Vercel — اربط مجلدًا أو مستودع GitHub، انقر على Deploy، وانتهى الأمر. (هذه الأكاديمية نفسها تعمل عليه.)

وإن علقت يومًا؟ أنت vibe coder — اسأل الـ AI. عبارة "خذني خطوة بخطوة في نشر ملف HTML هذا على Netlify" تعمل بشكل ممتاز. كان النشر هو الجزء المخيف من البرمجة. الآن صار محادثة.

لكن قبل أن تسحب ذلك الملف إلى أي مكان، هناك فرق بين صفحة تعمل وصفحة جاهزة للإطلاق. للمواقع الحقيقية لمسات احترافية: عنوان حقيقي في تبويب المتصفح، ووصف تستطيع محركات البحث ومعاينات الروابط عرضه، ووسوم اجتماعية تجعل رابطك يبدو جيدًا عندما يشاركه أحدهم على WhatsApp أو X، وتذييل يقول "إنسان حقيقي صنع هذا — تفضّل، شاركه". في هذا الدرس الأخير ستأخذ لوحة الأفكار من الوحدة 4 وتمنحها هذه اللمسات بالضبط.

ما التالي في مسارك

هذا هو الدرس الأخير في أساسيات الـ Vibe Coding — لكنه الخطوة الأولى في مسار "من الصفر إلى الاحتراف". من هنا ستلتقي بـ Claude Code في المتصفح (ذكاء اصطناعي يبني مشاريع كاملة من محادثة)، ثم تثبّت الأداة الحقيقية على جهازك، وفي النهاية تبني وكيل AI خاصًا بك. أنت الآن تعرف كيف يُصنع الويب. حان الوقت لتصنع المزيد منه.

هيا نُطلق.

التعليمات

أعطِ صفحتك وسم <title> حقيقيًا — استبدل "Untitled" باسم يليق بتبويب المتصفح. هذا أول ما تعرضه محركات البحث والإشارات المرجعية.

تلميح: ابحث عن `<title>Untitled</title>` داخل <head> وغيّره إلى شيء مثل `<title>Idea Board — Never Lose a Spark</title>`. بضعة أحرف على الأقل — اجعله ملكك.

أضف وسم <meta name="description"> داخل <head> — جملة واحدة تخبر محركات البحث (والبشر الفضوليين) بما يفعله تطبيقك.

أضف وسوم Open Graph — <meta property="og:title"> و <meta property="og:description">. هذه تتحكم في شكل رابطك عند مشاركته على WhatsApp أو X أو LinkedIn.

أضف <footer> في أسفل البطاقة مع عبارة "Built with vibes" ورابط <a id="share-link"> — كل منتج مُطلَق يوقّع على عمله.

الكود الخاص بك

html

44 أسطر

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Untitled</title>
  <script src="https://cdn.tailwindcss.com"></script>
  
  
  
</head>
<body class="bg-gradient-to-br from-violet-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">
  <div class="max-w-md w-full">

<h1 class="text-3xl font-bold text-center mb-2">💡 Idea Board</h1>
    <p class="text-indigo-300 text-sm text-center mb-6">Catch your ideas before they fly away</p>

</div>

addBtn.addEventListener('click', function () {
      const text = input.value.trim();
      if (!text) return;
      const li = document.createElement('li');
      li.className = 'bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm';
      li.textContent = text;
      list.appendChild(li);
      input.value = '';
    });
  </script>
</body>
</html>

أطلِقه: من شاشتك إلى العالم

أطلِقه: من شاشتك إلى العالم

ما التالي في مسارك

التعليمات

الكود الخاص بك

معاينة مباشرة