تعلّم البرمجة من الصفر بمشروع صفحة واحدة وموارد مجانية

من يبدأ البرمجة من مقارنة «أي لغة راتبُها أعلى» يتوقف عند التبويب العاشر. من يبدأ بصفحة يفتحها في متصفحه يرى سبب الوسم والقوس. هذا الدليل مسار واحد: صفحة شخصية قصيرة، ثم تنسيق، ثم تفاعل صغير، ثم نشر تستطيع أن ترسل رابطه. الموارد المذكورة لها بطاقات في كيف؟ وهي مجانية في أصلها التعليمي كما تصف نفسها على مواقعها. لا نعد بوظيفة ولا بمدة أيام تنطبق على كل شخص. إن أنجزت الصفحة في أسبوع أو في شهر فكلاهما تعلم.

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

المرحلة الأولى: صفحة تُقرأ من غير تنسيق

أنشئ ملفًا اسمه index.html على جهازك. اكتب عنوانًا باسمك، وفقرة من ثلاث جمل صحيحة عن شيء تعرفه، وقائمة بثلاث روابط لمواقع تزورها للتعلم. افتح الملف بالنقر المزدوج. إن ظهر النص، فقد عمل المتصفح. لا تثبّت إطار عمل، ولا بيئة معقدة، ولا «قالب احترافي». القالب يخفي الوسوم التي جئت لتتعلمها.

مرجع الوسوم عندما تنسى اسم الوسم: MDN. للخطو من الصفر داخل دروس متتابعة: freeCodeCamp وThe Odin Project. استخدم واحدًا كمنهج وMDN كقاموس، لا الثلاثة كمنهج في الليلة نفسها. W3Schools مناسب لتجربة وسم سريع في المتصفح عندما تريد أن ترى المثال يعمل. خارطة الطريق تريك أن الويب أوسع من صفحتك؛ لا تحاول إغلاق الخارطة هذا الشهر. صفحتك أصغر عن قصد.

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

المرحلة الثانية: تنسيق في ملف منفصل

أضف ملفًا اسمه style.css واربطه من الصفحة. غيّر خط العنوان، ومسافة بين الفقرات، ولون الرابط. توقف عند ثلاثة تغييرات تستطيع أن تشير إليها وتقول لماذا. التنسيق العشوائي لعشرين خاصية يعلم النسخ لا العلاقة بين القاعدة والعنصر. إن انكسر الربط ولم يتغير شيء، فالخطأ غالبًا في مسار الملف لا في «الكمبيوتر يكرهني». اقرأ المسار حرفًا حرفًا.

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

المرحلة الثالثة: زر واحد يفعل شيئًا مفهومًا

أضف زرًا يبدّل جملة الترحيب بين العربية والإنجليزية، أو يظهر الفقرة المخفية. سلوك واحد. اقرأ الخطأ في أداة المطور في المتصفح عندما يفشل الزر. الرسالة هناك جزء من المهنة، لا عطل شخصي. انسخ الرسالة إلى بحث أو إلى Stack Overflow بعد أن تحذف من السؤال أي مسار خاص بجهازك.

إن كتب المساعد الدالة كاملة، أغلقها واكتبها من الذاكرة بعد ساعة. ما لا تستطيع إعادة كتابته لم يدخل بعد. CodePen وReplit مفيدان عندما لا تريد تثبيت شيء، لكن احتفظ بنسخة على جهازك. الحساب السحابي ليس أرشيفك الوحيد.

المرحلة الرابعة: رابط تستطيع إرساله

ارفع الصفحة إلى مستودع كما في GitHub أو إلى استضافة ثابتة كما في بطاقة Vercel إن كان المسار أوضح لك. الهدف رابط يفتح الصفحة على جهاز غير جهازك. إن فشل الرفع، فاقرأ رسالة الأداة ولا تبدأ مشروعًا ثانيًا للهروب. مشروع واحد منشور يعلّم أكثر من ثلاثة مجلدات محلية باسم «جديد».

لا تضع في الصفحة رقم جوالك أو عنوان بيتك «حتى تبدو حقيقية». اسمك الأول وثلاث جمل كافية. الخصوصية هنا أبسط من أدلة الذكاء: الصفحة عامة بمجرد نشرها.

عندما تتوقف، وهذا سيحدث

1. اقرأ رسالة الخطأ من أول سطر لا من آخر كلمة حمراء فقط.
2. احذف آخر تغيير أضفته. إن صلح الأمر، فالتغيير هو المتهم.
3. صغّر المثال إلى صفحة فيها العنصر المعطوب وحده.
4. اشرح المشكلة بصوت عالٍ في جملتين قبل فتح المساعد.
5. إن بقي الغموض يومًا، ارجع درس المنهج الذي يغطي الوسم نفسه بدل جمع مقاطع عشوائية.

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

ماذا تمنع المساعد من فعله

امنعه من إنشاء مشروع React أو أي حزمة لا تستطيع نطق اسمها. امنعه من إضافة مكتبات «لتحسين الجودة». امنعه من إعادة كتابة ملفك كاملًا. اسمح له بشرح سطر تشير إليه أنت. صفحات البرمجة بالمساعد وCopilot أدوات أقوى من حاجتك الآن، وقد تخفي عنك الخطأ الذي تتعلم منه. ارجع إليها عندما تكتب أنت أصلًا وتريد اقتراحًا داخل السطر، لا عندما لا تعرف الوسم.

قسم البرمجة يجمع البطاقات. ادخل إليه بحثًا عن مرجع لا بحثًا عن مسار بديل كل مساء. مقارنة المساعدين في الصفحة المخصصة تفيد عندما تختار من يشرح لك فقرة طويلة من درس، لا لتوليد الموقع. دليل صياغة الأمر يفيد لصياغة سؤال الضيق: المهمة شرح سطر، والجمهور مبتدئ، والقيد عدم كتابة الملف، والمثال سطر من كودك، والفحص أن يعيد سؤالك إليك.

تعريف الانتهاء في هذا الدليل

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

ما الذي تكتبه بيدك في الملف الأول

لا نلصق هنا قالبًا تنسخه وتغلق الدرس. نصف العلاقات حتى تكتبها أنت. الصفحة تبدأ بإعلان نوع المستند، ثم عنصر الصفحة، ثم رأس فيه العنوان الذي يظهر في تبويب المتصفح، ثم جسم فيه عنوان ظاهر وفقرة وقائمة. ملف التنسيق يُذكر من الرأس بمسار نسبي، أي اسم الملف إن كان بجوار الصفحة لا رابطًا من الإنترنت. الزر يعيش في الجسم، وسلوكه في ملف ثالث أو في وسم صغير في أسفل الجسم. إن كتبت السلوك قبل أن تفتح الصفحة بلا سلوك، فلن تعرف إن كان العطل من الوسم أو من الدالة.

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

عندما لا يتغير التنسيق

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

عندما تقرأ صفحة في MDN، لا تحفظ الجدول. اقرأ فقرة «مثال» وجربها في ملفك، ثم اقرأ «انظر أيضًا» فقط إذا ظهر عندك السؤال. المقال الطويل على الجانب مرجع لا واجب ليلي. وإن نسخ المساعد خاصية لا تعرفها، فاسأل ماذا تفعل هذه الخاصية وحدها، وجربها على عنصر واحد. الخاصية التي لا تستطيع تعطيلها وترى الفرق ليست بعد في أدواتك.

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

عندما تنجح الصفحة، اكتب في أعلى الملف تعليقات قصيرة بلغتك تشرح المناطق لا كل سطر: أين العنوان، وأين الربط بملف التنسيق، وأين سلوك الزر. التعليق لك بعد أسبوعين عندما تنسى. لا تطلب من المساعد ملء الملف بتعليقات إنجليزية طويلة. وإن أردت أن تري شخصًا العمل، فأرسل الرابط المنشور لا لقطة من المحادثة. الرابط يثبت أن المتصفح فهم ملفاتك. لقطة المحادثة تثبت أن النموذج كتب شيئًا. الفرق هو تعريف هذا المسار كله. إن انكسر الرابط بعد أيام، فارجع إلى المستودع أو النسخة التي نسختها، ولا تبدأ مشروعًا باسم جديد. إصلاح النشر جزء من المهارة، والهروب إلى مجلد آخر يعيد العادة التي جاء هذا الدليل ليقطعها.

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