2.2 إنشاء أول مشروع وفتحه في المتصفح

الشرح

الآن حان وقت كتابة أول كود حقيقي. أنشئ مجلداً جديداً لمشروعك (مثلاً باسم my-first-website)، ثم من داخل VS Code افتح هذا المجلد (File ← Open Folder)، وأنشئ بداخله ملفاً جديداً باسم index.html بالضبط — هذا الاسم ليس عشوائياً؛ المتصفحات والخوادم تبحث تلقائياً عن ملف باسم index.html كصفحة افتراضية لأي مجلد، ولهذا ستراه اسم الملف الرئيسي في كل مشروع ويب تقريباً.

هناك طريقتان لمعاينة عملك: الأولى بسيطة — انقر نقراً مزدوجاً على الملف ليفتح مباشرة في متصفحك الافتراضي، لكن عيبها أنك تحتاج تحديث الصفحة يدوياً (F5) بعد كل تعديل. الطريقة الثانية والأفضل هي Live Server: بعد تثبيت الإضافة، انقر بزر الفأرة الأيمن على ملف index.html واختر "Open with Live Server"، فيفتح المتصفح تلقائياً على عنوان محلي مثل 127.0.0.1:5500، وأي تعديل تحفظه في VS Code (Ctrl+S) سيظهر في المتصفح فوراً بلا أي تحديث يدوي — هذا "الحلقة السريعة" بين الكتابة والمشاهدة هي ما يجعل تعلّم الويب ممتعاً وسريعاً.

<!-- محتوى ملف index.html -->
مرحباً، هذا أول موقع لي!

💡 نقطة مهمة: إذا لم يظهر خيار "Open with Live Server" عند النقر بزر الفأرة الأيمن، تأكد أنك ثبّت الإضافة فعلاً من تبويب Extensions وأعدت تشغيل VS Code.

🎯 تمرين عملي

أنشئ ملف index.html واكتب بداخله الجملة ''مرحباً، هذا أول موقع لي!'' ثم افتحه بـ Live Server وشاهد النتيجة في المتصفح.

📚 لمزيد من التوسّع

أساسيات بناء المحتوى بـ HTML — MDN

✅ نموذج حل مقترح

<!-- محتوى index.html -->
مرحباً، هذا أول موقع لي!

بعد النقر يمين واختيار "Open with Live Server"، يجب أن يفتح متصفحك تلقائياً على عنوان يشبه 127.0.0.1:5500 ويعرض هذه الجملة. جرّب تعديل النص وحفظ الملف (Ctrl+S) — يجب أن يتحدث المتصفح فوراً بلا أي تحديث يدوي منك.