أول ملف ومجلد لموقعك · البرمجة مع مارتن

سنُعدّ المجلد الذي سيعيش فيه موقعك، ونتأكد أن كل شيء يعمل.

الموقع يعيش في مجلد

كل موقع في العالم هو في الحقيقة مجرد مجموعة ملفات في مجلد. لنُعدّ مجلدك.

أنشئ مجلداً اسمه my-website. على سطح المكتب، اضغط بزر الماوس الأيمن → New Folder (على Mac أيضاً New Folder، على Windows New → Folder) وسمّه my-website.
افتح المجلد في VS Code. شغّل VS Code ومن القائمة اختر File → Open Folder… وابحث عن مجلد my-website. إذا سألك VS Code إن كنت تثق بمؤلفي هذا المجلد، اضغط Yes, I trust the authors – أنت المؤلف في النهاية!
أنشئ ملفاً اسمه index.html. في اللوحة اليسرى، مرّر المؤشر فوق اسم المجلد واضغط أيقونة New File (صفحة مع علامة زائد). اكتب بالضبط: index.html واضغط Enter.

💡

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

اكتب أول كود لك

في ملف index.html، اكتب هذا (أو انسخه باستخدام الزر في أعلى اليمين):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My website</title>
  </head>
  <body>
    <h1>It works!</h1>
    <p>This is my very first file. From here I'll build a whole website.</p>
  </body>
</html>

احفظ الملف: Ctrl+S (على Mac، Cmd+S). احفظ كثيراً – الملف غير المحفوظ له نقطة صغيرة بجانب اسمه في VS Code.

افتح صفحتك في المتصفح

ابحث عن ملف index.html في مجلدك (على سطح المكتب → my-website) واضغط عليه مرتين لفتحه. سيفتح متصفح يعرض صفحتك بكلمات “It works!”.

✅

تحقق من نفسك: ترى عنواناً كبيراً يقول “It works!” في المتصفح. إذا كان كذلك – لديك الآن ورشة ويب تعمل، ويمكنك التوجه مباشرة إلى المستوى 1!

💡

حيلة مفيدة: أبقِ VS Code والمتصفح مفتوحين جنباً إلى جنب. كلما غيّرت شيئاً في الكود، احفظه (Ctrl+S) واضغط F5 في المتصفح للتحديث. التغيير يظهر فوراً.

ما ستخرج به من هذا الفصل

الموقع هو مجلد مليء بالملفات. مجلدك يسمى my-website.
الصفحة الرئيسية للموقع تُسمى دائماً index.html.
حلقة العمل: اكتب الكود → احفظ (Ctrl+S) → حدّث المتصفح (F5). ستفعل هذا مراراً وتكراراً.