محرر الأكواد — HTML / CSS / JS
اكتب الأكواد وشغّلها فورًا، وشاهد النتيجة في المعاينة.
تلميح: استخدم console.log() لعرض الرسائل في “الكونسول” بالأسفل.
لماذا يتعلّم الناس الويب أسرع من غيره؟
لأن النتيجة مرئية فورًا. تكتب سطرًا فيظهر عنوان على الشاشة. تغيّر لونًا فيتغيّر أمام عينك. هذه الحلقة القصيرة بين الفعل والنتيجة هي أقوى محرّك تعلّم يعرفه الإنسان — ولهذا يتعلّم الطفل المشي ولا يتعلّم النحو بالسهولة نفسها: الأول يرى أثره فورًا، والثاني لا.
هذا المحرّر يستثمر تلك الحلقة: ثلاثة صناديق على اليمين — HTML وCSS وJavaScript — ومعاينة حيّة على اليسار، وكونسول في الأسفل يلتقط أخطاءك ورسائلك. اكتب، شغّل، شاهد. ولا تنتقل إلى الدرس التالي قبل أن ترى أثر الحالي بعينك.
ابنِ صفحتك على ثلاث دفعات — لا دفعة واحدة
أكثر ما يُرهق المبتدئ أنه يكتب الأكواد الثلاثة دفعة واحدة، ثم يضغط «تشغيل» فلا شيء يعمل — فلا يعرف أين الخلل: في البنية؟ في التنسيق؟ في السكربت؟ الحلّ عادة بسيطة:
1. اكتب HTML وحده وشغّل
صفحة بلا تنسيق وبلا حركة — لكنها تعمل. تأكّد أن كل ما تريده موجود.
2. أضف CSS وشغّل
الآن نسّق. إن اختفى شيء أو انزاح، فالسبب في CSS قطعًا — لأن HTML كان يعمل قبل قليل.
3. أضف JavaScript وشغّل
الحركة أخيرًا. وأي خطأ الآن يظهر في الكونسول بسطره ورقمه.
لماذا تنجح هذه الطريقة؟ لأنك تُدخل متغيّرًا واحدًا في كل مرة. وحين يظهر الخطأ تعرف مصدره فورًا لأنك تعرف ما الذي تغيّر آخر مرة. هذه ليست حيلة تعليمية — هي طريقة عمل المبرمجين المحترفين في تصحيح الأخطاء.
ستّة أخطاء تُوقف صفحتك — وحلّها
1. وسم لم يُغلق
كتبت <div> ونسيت </div> — فتبتلع الصفحة ما بعدها. أغلق كل وسم فتحته.
2. المحدّد لا يطابق
كتبت .box في CSS ولا يوجد class="box" في HTML. النقطة للـ class والمربّع # للـ id.
3. نسيان الفاصلة المنقوطة في CSS
كل خاصية تنتهي بـ ; — ونسيانها يُلغي ما بعدها بصمت.
4. استدعاء عنصر غير موجود في JS
getElementById("btn") تُرجع null إن لم يوجد id="btn". اقرأ رسالة الكونسول: ستقول لك ذلك حرفيًا.
5. خلط الاقتباسات
فتحت بـ " وأغلقت بـ ' — الكود ينكسر. وحّد النوع.
6. ملف خارجي على جهازك
ربطتَ style.css أو صورة من مجلّدك — لن تعمل هنا. الصق CSS في صندوقه، واستعمل روابط صور مباشرة.
خمسة تمارين — اكتبها بيدك في المحرّر أعلاه
وقبل كل «تشغيل»، توقّع ما سيحدث. الفرق بين من يتعلّم ومن ينسخ هو هذه الثانية الواحدة.
1. بطاقة تعريف
عنوان باسمك، فقرة عنك، وصورة برابط من الإنترنت. HTML وحده — بلا تنسيق.
2. نسّقها
لون خلفية، خط أكبر للعنوان، وحواف دائرية للصورة. CSS فقط.
3. زر يغيّر النص
زر عند الضغط عليه يتغيّر عنوان الصفحة. أول شعور حقيقي بالقدرة.
4. الوضع الليلي
زر يبدّل لون خلفية الصفحة بين الفاتح والداكن.
5. تحقّق من نموذج
حقل إدخال وزر — إن كان الحقل فارغًا أظهر رسالة، وإلا رحّب بالاسم.
أنجزت الخمسة؟ إذن أنت جاهز لمسار مرتّب ينتهي بموقع شخصي منشور باسمك: مسار تطوير الويب ←
ما الذي لا يفعله هذا المحرّر؟
- ▪ لا يقرأ ملفاتك المحلية — الصق CSS وJS في صناديقها، واستعمل روابط صور مباشرة.
- ▪ صفحة واحدة فقط — لا مشاريع متعدّدة الصفحات.
- ▪ لا ينشر موقعك على الإنترنت — لكنه يُنزّله لك ملف HTML جاهزًا للنشر بزر «تحميل».
وهذا كافٍ تمامًا لتعلّم الأساسيات كلها. حين تحتاج أكثر، ستكون قد صرت جاهزًا لأكثر.
🔒 كودك لا يغادر جهازك. المعاينة تُبنى داخل متصفّحك، والحفظ التلقائي في ذاكرة المتصفّح المحلية. لا يُرسل شيء إلى خوادمنا، ولا يُشترط تسجيل دخول.