مهارات سوريامن الصفر حتى أول دولار
الدرس 1 من 8 · آخر تحقق: 2 تشرين الأول 2026

جهّز بيئة التطوير من سوريا: محرر VS Code والمتصفح وسطر الأوامر دون إنترنت دائم

بتطلع من هالدرس وأنت قادر على: تثبيت وإعداد Visual Studio Code، تشغيل أول ملف كود محلياً بمتصفحك بلا إنترنت، وتنظيم مجلدات مشاريعك باحتراف.

الدرس 1 من 8

المدة التقديرية: فيديو 14:12 + تطبيق وتمرين 40 دقيقة · ضمن منهج البرمجة وتطوير الويب

ليش هالدرس مهم

لأن نصف الوقت يضيع في حل مشاكل الأدوات والكهرباء بدلاً من كتابة الكود

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

المبرمج المحترف يدرك أن المتصفح (Chrome أو Firefox) ومحرر نصوص خفيف وسريع (VS Code) كافيان لإنتاج مواقع تجارية تباع بمئات الدولارات. كل ما تحتاجه هو إعداد بيئتك لتعمل محلياً (Offline) بنسبة 100%، بحيث تكتب وتعدل وتختبر حتى أثناء غياب الشبكة أو انقطاع التيار الكهربائي.

في هذا الدرس سنؤسس محطة عملك الصلبة خطوة بخطوة، ونضبط اختصارات المحرر، ونتعلم كيف تنظم مجلدات عملك لحماية كل سطر كود تكتبه من الضياع.

الفيديو التوضيحي الموثّق

شاهد الشرح المباشر ثم نفّذ خطوة بخطوة

القناة: ILearn · المدة: 14:12 · ركز على تثبيت إضافات Live Server وAuto Rename Tag، وطريقة فتح المجلد مباشرة في المحرر.

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

الشرح المكتوب بالتفصيل الممل

خطوات التطبيق العملي على حاسوبك

  1. نزّل وثبّت محرر Visual Studio Code من موقعه الرسمي (أو انسخه من صديق عبر فلاشة إن كان النت ضعيفاً). شو رح تشوف على الشاشة: نافذة تثبيت قياسية، اختر 'Add to PATH' و'Add Open with Code action' لتسهيل فتح المجلدات. إذا ما ظهرلك: إذا تعذر التحميل، يمكنك استخدام محررات خفيفة بديلة تعمل بنسخ محمولة (Portable) مثل Sublime Text.
  2. افتح VS Code وأنشئ مجلداً رئيساً على القرص D أو C باسم 'projects' ومجلداً فرعياً باسم 'web-basics'. شو رح تشوف على الشاشة: شريط جانبي رمادي داكن يظهر هيكل المجلد فارغاً مع خيار 'New File'. إذا ما ظهرلك: إذا لم يظهر الشريط الجانبي، اضغط Ctrl + B لإظهاره أو إخفائه.
  3. ثبّت إضافة Live Server من قسم الإضافات (Extensions) بالضغط على أيقونة المربعات الأربعة على اليسار. شو رح تشوف على الشاشة: حقل بحث للإضافات وقائمة بنتائج التثبيت، وزر أزرق مكتوب عليه 'Install'. إذا ما ظهرلك: إذا كنت أوفلاين، يمكنك فتح ملف HTML مباشرة بالنقر المزدوج عليه ليفتح في المتصفح وتحديث الصفحة بـ F5.
  4. أنشئ ملفاً جديداً باسم 'index.html' داخل المجلد واكتب علامة التعجب (!) ثم اضغط Tab. شو رح تشوف على الشاشة: يظهر هيكل صفحة HTML الأساسي تلقائياً في ثانية واحدة (Emmet Abbreviation). إذا ما ظهرلك: إذا لم يعمل الاختصار، تأكد أن لغة الملف المكتوبة بأسفل الشاشة على اليمين هي HTML.
  5. غيّر محتوى وسم العنوان إلى 'موقعي الأول | تدريب'، واكتب داخل <body> وسماً بسيطاً <h1>أهلاً بالعالم</h1>.</strong> <span class="screen">شو رح تشوف على الشاشة: نص عربي واضح داخل محرر الأكواد مع تلوين دلالي مميز للوسوم.</span> <span class="fix">إذا ما ظهرلك: إذا ظهرت الحروف العربية مقطعة أو غير مفهومة، تأكد أن ترميز الملف في الأسفل هو UTF-8.</span> </li> <li> <strong>انقر بالزر الأيمن داخل المحرر واختر 'Open with Live Server' أو افتح الملف مباشرة بالمتصفح.</strong> <span class="screen">شو رح تشوف على الشاشة: المتصفح يفتح نافذة بيضاء فيها العنوان العريض 'أهلاً بالعالم' وعنوان التبويب المخصص.</span> <span class="fix">إذا ما ظهرلك: إذا لم يفتح المتصفح، افتح المتصفح يدوياً واضغط Ctrl + O واختر ملف index.html من جهازك.</span> </li> <li> <strong>افتح أدوات المطور (Developer Tools) بالضغط على زر F12 في المتصفح وتفقد تبويبي Elements وConsole.</strong> <span class="screen">شو رح تشوف على الشاشة: نافذة جانبية أو سفلية تعرض كود الصفحة وشجرة العناصر وأي رسائل أخطاء برمجية.</span> <span class="fix">إذا ما ظهرلك: إذا لم تظهر، انقر بالزر الأيمن بأي مكان فارغ بالصفحة واختر 'Inspect' أو 'فحص العنصر'.</span> </li> <li> <strong>أنشئ مجلداً باسم 'assets' وداخله مجلدين: 'css' و'js' لتعتاد على تنظيم المشروعات الاحترافية منذ اليوم الأول.</strong> <span class="screen">شو رح تشوف على الشاشة: هيكل شجري مرتب يظهر index.html وبجانبه مجلد assets ومجلداته الفرعية.</span> <span class="fix">إذا ما ظهرلك: الترتيب المنظم يمنع تشابك المسارات وتكسر روابط الصور والملفات عند رفع الموقع للإنترنت لاحقاً.</span> </li> </ol> </div> </section> <section class="section section-deep" id="task"> <div class="container-text"> <div class="section-head"> <span class="eyebrow">جرّب بنفسك</span> <h2>التمرين العملي للدرس 1</h2> </div> <section class="lesson-task"> <p>أنشئ مجلد مشروعك البرمجي الأول، وثبّت المحرر، واكتب أول صفحة HTML مع تغيير العنوان ووسم H1، وافتحها في المتصفح، ثم التقط لقطة شاشة تظهر شاشة VS Code وبجانبها المتصفح مفتوحاً على صفحتك، واكتب سجلاً بسطر واحد عن وقت الإنجاز.</p> <h3>معيار النجاح والتسليم</h3> <ul> <li>ملف index.html مكتوب بترميز UTF-8 سليم والعربية تظهر دون تقطيع.</li> <li>المحرر مجهز بإضافة Live Server أو قادر على فتح الملف بالمتصفح محلياً بلا إنترنت.</li> <li>مجلد assets منظم وجاهز لاحتواء ملفات التنسيق والبرمجة اللاحقة.</li> </ul> </section> </div> </section> <section class="section" id="check"> <div class="container-text"> <div class="section-head"> <span class="eyebrow">فحص سريع</span> <h2>ثلاثة أسئلة للتأكد من استيعاب المفاهيم</h2> </div> <div class="faq"> <details> <summary>لماذا يفضل المبرمج المحترف استخدام UTF-8 دائماً؟</summary> <p>لأن ترميز UTF-8 يدعم كافة حروف اللغة العربية وجميع لغات العالم المعاصرة، ويمنع ظهور الحروف كرموز مشوهة أو علامات استفهام.</p> </details> <details> <summary>هل أحتاج اتصالاً بالإنترنت لتشغيل وبرمجة صفحات الويب الأساسية؟</summary> <p>لا، صفحات HTML وCSS وJavaScript تترجم وتعمل بالكامل داخل محرك المتصفح على جهازك دون الحاجة لأي اتصال خارجي.</p> </details> <details> <summary>ما وظيفة أدوات المطور (Developer Tools / F12) في المتصفح؟</summary> <p>تسمح لك بمعاينة كود الصفحة مباشرة، تجربة التعديلات البصرية فوراً، فحص استجابة التصميم على الموبايل، واكتشاف الأخطاء البرمجية.</p> </details> </div> </div> </section> <section class="section section-deep" id="notes"> <div class="container-text"> <div class="section-head"> <span class="eyebrow">مستند الدرس</span> <h2>انسخه لملاحظاتك</h2> </div> <div class="lesson-notes">- بيئة التطوير: محرر نصوص خفيف (VS Code) + متصفح حديث (Chrome/Firefox) + أدوات المطور (F12). - لا حاجة لإنترنت دائم: تطوير الواجهات يعمل محلياً 100% دون أي خوادم خارجية. - الترميز الإلزامي: UTF-8 في وسم meta لتأكيد سلامة الخط العربي. - التنظيم المجلداتي: index.html في الجذر، وملفات التنسيق والسكربت والصور داخل assets. - اختصار Emmet: كتابة علامة (!) ثم Tab لإنشاء هيكل الصفحة القياسي في لحظة. - أدوات المطور: F12 هي رفيقك اليومي لمعاينة وتصحيح الكود وتجربة التنسيقات. - النسخ الاحتياطي: حفظ الكود على فلاشة أو قرص إضافي يحميك من أعطال الكهرباء المفاجئة. - مخرج الدرس: صفحة أولى تعمل محلياً وهيكل مجلد احترافي جاهز.</div> </div> </section> <section class="section"> <div class="container-text"> <div class="lesson-nav"> <a class="btn btn-olive btn-lg" href="/learn/programming/course/lesson-02/">الدرس التالي (2) ←</a> <a class="btn btn-ghost btn-lg" href="/learn/programming/course/">فهرس دروس المنهج</a> </div> </div> </section> <section class="section tg-cta" data-tg-src="course"> <div class="container-text"> <div class="tg-cta-box"> <span class="eyebrow">المتابعة والتطبيق</span> <h2 class="tg-cta-title">قناة وتطبيقات مهارات سوريا</h2> <p>شارك إنجازك في مجموعتنا التفاعلية وتابع فرص العمل الحر البرمجية عبر تيليغرام.</p> <div class="tg-cta-actions"> <a class="btn btn-olive" href="https://t.me/maharaatsyria" target="_blank" rel="noopener">انضم لقناة مهارات المجانية</a> <a class="btn btn-ghost" href="/learn/programming/course/notes/">المستند الكامل للطباعة</a> </div> </div> </div> </section> </main> <footer class="site-footer"> <div class="container"> <div class="footer-grid"> <div> <div class="brand"> <img src="/assets/logo.svg" alt="" width="36" height="36"> <span><b>مهارات سوريا</b></span> </div> <p class="sub">بوابة تعليمية سورية مجانية لمساعدتك على إتقان البرمجة والعمل الحر وتحقيق أول دخل بأمان.</p> </div> <div> <h4>أقسام البوابة</h4> <ul class="footer-links"> <li><a href="/#tracks">المسارات التعليمية</a></li> <li><a href="/tools/">الأدوات الذاتية</a></li> <li><a href="/guides/get-paid-in-syria/">دليل القبض من سوريا</a></li> <li><a href="/store/">الأدلة بالدعوات</a></li> </ul> </div> <div> <h4>قنوات الدعم</h4> <ul class="footer-links"> <li><a href="https://t.me/maharaatsyria" target="_blank" rel="noopener">قناة تلغرام المجانية</a></li> <li><a href="https://t.me/MaharatSyriaBot" target="_blank" rel="noopener">بوت الدعم والتسليم</a></li> <li><a href="/faq/">الأسئلة الشائعة</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2026 مهارات سوريا. جميع الحقوق محفوظة لشباب وشابات سوريا.</p> </div> </div> </footer> <script src="/assets/maharat.js?v=20261002"></script> </body> </html>