قراءة درس تعليمي في جافا سكريبت (JavaScript) وإنهاؤه تجربتان مختلفتان تماماً.
الأولى تمنحك شعوراً بالإنتاجية، أما الثانية فهي المكان الذي تتعلم فيه حقاً. هل قضيت وقتاً طويلاً في دراسة دروس جافا سكريبت وما زالت شيفرتك البرمجية حبيسة تمارين الآخرين؟ حسناً، لن يطول هذا الأمر بعد الآن.
معرفة الحلقات التكرارية (loops) لا قيمة لها ما لم تستخدمها لبناء شيء يعمل بالفعل. الدروس التعليمية تعلمك الكلمات، أما المشاريع فتجعلك تتحدث اللغة بطلاقة.
إليك إذن 18 مشروع جافا سكريبت للمبتدئين، مع دليل مبسط لكل منها لتعرف من أين تبدأ. اختر مشروعاً، وابنهِ، ثم انتقل إلى التالي.
أمر ممل ولكنه غاية في الأهمية: الأساسيات. اتقنها جيداً حتى لا تتحول مشاريعك إلى جدار من علامات تبويب موقع Stack Overflow المفتوحة بلا نهاية!

ابنِ أساسيات جافا سكريبت أولاً
تعتمد جميع مشاريع جافا سكريبت للمبتدئين على المتغيرات (variables)، والدوال (functions)، والجمل الشرطية (conditionals)، والحلقات التكرارية (loops)، والمصفوفات (arrays)، والكائنات (objects)، وبعض دوال الـ DOM. إذا لم تكن هذه المفاهيم بديهية بالنسبة لك بعد، فستقضي وقتاً أطول في محاربة الأخطاء الإملائية للغة (syntax) بدلاً من البناء الفعلي.
تم تصميم دورة جافا سكريبت من كودي (Coddy) خصيصاً لهذا الغرض. دروس مدتها خمس دقائق تأخذك عبر أساسيات اللغة خطوة بخطوة. ستكتب وتنفذ الأكواد البرمجية مباشرة في المتصفح أثناء التعلم. لا حاجة لإعدادات معقدة، ولا لتهيئة بيئة العمل، ولا داعي لـ "تثبيت Node أولاً".
يتواجد "باغزي" (Bugsy)، مساعدنا الذكي المدمج، في كل درس لمساعدتك عندما يصعب عليك فهم أي نقطة.
إذا كنت تستطيع قراءة وكتابة وشرح المفاهيم التالية بثقة ودون تردد، فأنت مستعد تماماً. وإلا، فراجع أساسيات جافا سكريبت على منصة كودي حتى تتقنها:
- المتغيرات والأنواع الأساسية (string، number، boolean)
- جمل if/else و switch
- حلقات for، while، و for...of التكرارية
- الدوال (Functions) والدوال السهمية (Arrow functions)
- المصفوفات (Arrays) والدوال الشائعة الخاصة بها (push، pop، map، filter، find)
- الكائنات (Objects) وطرق الوصول لعناصرها (dot/bracket notation)
- الوصول الأساسي لعناصر DOM (مثل querySelector، addEventListener، textContent)
هل أتقنتها؟ ممتاز. لنبدأ البناء إذن!
تأخذك منصة كودي عبر الأساسيات في دروس مدتها خمس دقائق داخل المتصفح مباشرة، مع وجود "باغزي" لمساعدتك في اللحظة التي تواجه فيها أي عقبة.
مشاريع البداية: مرحباً بك في عالم DOM
هذه المشاريع صغيرة الحجم عمداً. فهي تعتمد على مفهوم أو اثنين فقط، بحيث إذا حدث خطأ ما، يمكنك العثور على السبب بسرعة. ولا تتجاهلها لمجرد أنها تبدو بسيطة!
1. العداد الكلاسيكي (The Classic Counter)
ما هو المشروع: رقم يظهر على الشاشة مع زر لزيادته (+) وزر لإنقاصه (-).
لماذا هو مفيد: إنه أصغر تطبيق ممكن يجمع بين HTML و CSS وجافا سكريبت معاً. ستتعامل فيه مع الحالة (state - متغير تتغير قيمته)، وتحديثات DOM، ومستمعي الأحداث (event listeners). يتطلب الأمر حوالي عشرين سطرًا من الكود تقريباً.
كيفية بنائه: عنصر span واحد لعرض الرقم، وزران. أضف متغيراً باسم let count = 0. اربط مستمعي أحداث النقر (click listeners) بكل زر لزيادة العداد أو إنقاصه، ثم حدّث خاصية textContent لعنصر الـ span. تحدي إضافي: أضف زراً لإعادة الضبط (reset) واجعل الصفر هو الحد الأدنى للعداد فلا يقل عنه.
2. حاسبة البقشيش (Tip Calculator)
ما هو المشروع: إدخال قيمة الفاتورة ونسبة البقشيش، لتقوم الحاسبة بعرض قيمة البقشيش والمبلغ الإجمالي.
لماذا هو مفيد: يعرفك على حقول إدخال النماذج (form inputs) ودالة parseFloat التي يقع في فخها الجميع تقريباً في المرة الأولى. ستدرك أيضاً مدى سهولة حدوث أخطاء حسابية إذا نسيت التعامل مع القيمة غير الرقمية NaN.
كيفية بنائه: حقلان لإدخال الأرقام (الفاتورة، ونسبة البقشيش)، وزر واحد، وعنصرا span للمخرجات. عند النقر على الزر، قم بتحليل المدخلات (parse)، وإجراء العملية الحسابية، وتقريب الناتج لخانة عشرية ثنائية باستخدام .toFixed(2)، ثم عرض النتيجة. تحدي إضافي: أضف خياراً لتقسيم الفاتورة بين عدة أشخاص.
3. مولد لوحة الألوان
ما هو المشروع: تنقر على زر، فتحصل على لون عشوائي جديد يظهر كعينة لونية مع رمز الـ hex الخاص به.
لماذا هو مفيد: يجمع بين الأرقام العشوائية، والنصوص البرمجية (template literals)، والأنماط المضمنة (inline styles) في تطبيق واحد صغير. النتيجة بصرية وتفاعلية، مما يجعل العمل ممتعاً.
كيفية بنائه: دالة ترجع عدداً صحيحاً عشوائياً بين 0 و 255 ثلاث مرات، ثم تُنشئ نصاً مثل rgb(${r}, ${g}, ${b}). عيّن هذا النص كخلفية لعينة اللون. تحدي إضافي: توليد لوحة كاملة من خمسة ألوان بدلاً من لون واحد فقط.
4. مولد الاقتباسات العشوائية (Random Quote Generator)
ما هو المشروع: زر يقوم بتغيير الاقتباس المعروض على الشاشة باقتباس آخر عشوائي من مصفوفة قمت بإعدادها مسبقاً.
لماذا هو مفيد: تدريب رائع على التعامل مع المصفوفات ودالة Math.random، بالإضافة إلى أنه مشروع سريع ومميز يمكنك مشاركته مع الآخرين.
كيفية بنائه: عرّف مصفوفة تحتوي على كائنات للاقتباسات، بحيث يحتوي كل كائن على النص text والكاتب author. عند النقر، اختر مؤشراً عشوائياً (random index) وحدّث العنصرين على الشاشة. تحدي إضافي: أضف رابطاً لمشاركة الاقتباس على منصة إكس (تويتر سابقاً) يفتح تغريدة جاهزة بالنص.
5. الساعة الرقمية (Digital Clock)
ما هو المشروع: عرض الوقت الحالي على الشاشة وتحديثه كل ثانية.
لماذا هو مفيد: هنا ستتعرف على دالة setInterval وكائن التاريخ Date اللذين ستستخدمهما كثيراً في مسيرتك. كما أن إضافة صفر في البداية للدقائق والثواني المكونة من خانة واحدة يمثل لغزاً برمجياً صغيراً وممتعاً.
كيفية بنائه: دالة تقرأ الوقت الحالي عبر new Date()، وتنسق الساعات والدقائق والثواني، ثم تكتبها داخل عنصر span. ضع هذه الدالة داخل setInterval(updateClock, 1000). تحدي إضافي: أضف زراً للتحويل بين نظام 12 ساعة ونظام 24 ساعة.
6. حاسبة مؤشر كتلة الجسم (BMI Calculator)
ما هو المشروع: إدخال الطول والوزن للحصول على قيمة مؤشر كتلة الجسم (BMI) وتصنيف الحالة الصحية.
لماذا هو مفيد: تطبيق عملي واقعي لاستخدام الجمل الشرطية لتحديد التصنيف المناسب لعرضه. كما أنها فرصة جيدة للتدرب على تصميم النماذج بشكل منسق وجذاب.
كيفية بنائه: حقول إدخال أرقام للطول (بالسنتيمتر) والوزن (بالكيلوغرام). عند الإرسال، احسب مؤشر كتلة الجسم باستخدام الصيغة القياسية، ثم استخدم سلسلة جمل شرطية if/else لاختيار التصنيف المناسب، واعرض القيمتين. تحدي إضافي: أضف زراً للتحويل إلى الوحدات الإمبراطورية (الرطل والبوصة).
مشاريع المستوى المتوسط: تفاصيل برمجية أكثر
بعد إنجاز بضعة مشاريع، ستلاحظ أن الأنماط تتكرر؛ النقر على زر يغير قيمة متغير، ودالة تقوم بتحديث واجهة المستخدم بناءً على هذا المتغير، وهكذا دواليك. هذا هو جوهر تطوير الواجهات الأمامية (Frontend Development) تقريباً. تتطلب منك هذه المشاريع إدارة حالات متعددة (state) في نفس الوقت.
7. قائمة المهام اليومية (To-do List)
ما هو المشروع: كتابة مهمة، والضغط على زر الإدخال لتظهر في القائمة. النقر على المهمة لتمييزها كمكتملة، والنقر على علامة (X) لحذفها.
لماذا هو مفيد: يُعتبر هذا المشروع بمثابة "مرحباً بالعالم" في إطارات عمل الواجهات الأمامية لسبب وجيه. ستتعامل فيه مع مصفوفة، وتعرضها في الـ DOM، وتدير حدثين أو ثلاثة. إذا تمكنت من بناء قائمة مهام من الصفر، فقد تخرجت رسمياً من مرحلة المبتدئ تماماً.
كيفية بنائه: احتفظ بمصفوفة من كائنات المهام التي تحتوي على المعرف id والنص text وحالة الاكتمال done. أعد رندرة (عرض) القائمة كعنصر <ul> بعد كل تغيير. عند الضغط على Enter، أضف مهمة جديدة للمصفوفة. وعند النقر، قم بتغيير حالة الاكتمال أو حذف العنصر من المصفوفة باستخدام splice. تحدي إضافي: احفظ البيانات في التخزين المحلي localStorage حتى لا تختفي المهام عند تحديث الصفحة.
8. ساعة إيقاف مع تسجيل الدورات (Stopwatch with Lap Times)
ما هو المشروع: ساعة إيقاف تحتوي على أزرار للبدء، والإيقاف، وإعادة الضبط، وتسجيل وقت الدورة (lap).
لماذا هو مفيد: هذا المشروع أكثر تعقيداً من الساعة العادية، لأنك ستدير متغير الوقت المنقضي بنفسك بدلاً من الاعتماد على وقت النظام. ستتعامل هنا مع Date.now()، والفترات الزمنية (intervals)، ومنطق الإيقاف المؤقت.
كيفية بنائه: خزّن وقت البدء startTime ومتغير تجميع الوقت المنقضي elapsed. عند البدء، عيّن startTime = Date.now() وشغّل الـ interval. عند الإيقاف، احسب elapsed += Date.now() - startTime. وعند تسجيل الدورة، أضف القراءة الحالية إلى مصفوفة واعرضها. تحدي إضافي: نسّق عرض الأجزاء من الثانية بشكل جذاب.
9. مؤقت البومودورو (Pomodoro Timer)
ما هو المشروع: 25 دقيقة للعمل، تليها 5 دقائق للاستراحة، ثم التكرار. يصدر المؤقت صوتاً عند حان وقت التبديل.
لماذا هو مفيد: بمثابة مقدمة مبسطة لمفهوم "آلات الحالة" (state machines) للمبتدئين. ستكون في حالة "عمل" أو "استراحة" أو "إيقاف مؤقت"، وتتغير واجهة المستخدم بناءً على الحالة الحالية.
كيفية بنائه: استخدم نفس نمط الـ interval المستخدم في ساعة الإيقاف، ولكن مع العد التنازلي. تتبع الحالة التي تتواجد فيها حالياً. عندما يصل المؤقت إلى الصفر، بدّل الحالة وشغّل صوتاً قصيراً باستخدام new Audio('beep.mp3').play(). تحدي إضافي: أضف عداداً لجلسات العمل المكتملة خلال اليوم.
تبني منصة كودي الأساسيات من خلال دروس يومية قصيرة ونظام حوافز متتابع، لتصبح المشاريع الأكثر صعوبة في متناول يدك.
10. تطبيق الاختبارات (Quiz App)
ما هو المشروع: اختبار من متعدد يعرض لك النتيجة النهائية في النهاية.
لماذا هو مفيد: يجمع بين تكرار المصفوفات، والجمل الشرطية، وفكرة بسيطة عن "حالة الشاشة" (السؤال الحالي، شاشة النتائج).
كيفية بنائه: عرّف مصفوفة من كائنات الأسئلة تحتوي على النص text والخيارات options والمؤشر الصحيح correctIndex. اعرض سؤالاً واحداً في كل مرة. عند النقر على الإجابة، قارنها بـ correctIndex وزد النتيجة، ثم انتقل للسؤال التالي. عند انتهاء الأسئلة، اعرض شاشة النتائج. تحدي إضافي: أضف مؤقتاً زمنياً لكل سؤال.
11. مولد كلمات المرور
ما هو المشروع: تحديد طول كلمة المرور وأنواع الحروف المراد تضمينها، للحصول على كلمة مرور عشوائية قوية.
لماذا هو مفيد: يجمع بين معالجة النصوص، والعشوائية، وحقول الاختيار (checkboxes) في مكان واحد. بالإضافة إلى أنه مشروع مفيد وعملي للغاية في الحياة الواقعية.
كيفية بنائه: أنشئ أربع مجموعات من الحروف (حروف صغيرة، حروف كبيرة، أرقام، رموز). ادمج المجموعات النشطة بناءً على الخيارات المحددة. قم بعمل حلقة تكرارية لعدد n من المرات لاختيار حرف عشوائي من المجموعة المدمجة. تحدي إضافي: أضف مؤشراً يقيس مدى قوة كلمة المرور الناتجة.
12. مدقق صحة البيانات في النماذج (Form Validator)
ما هو المشروع: نموذج تسجيل يبرز الحقول غير الصالحة باللون الأحمر ويعرض رسالة خطأ أسفل كل منها.
لماذا هو مفيد: هذا ما تفعله لغة جافا سكريبت في المشاريع الحقيقية طوال الوقت. ستتعلم التعبيرات النمطية (Regex)، وأحداث التركيز (focus events)، والتلاعب بعناصر DOM، وكل ذلك في إطار نموذج تسجيل مألوف.
كيفية بنائه: اكتب دالات تحقق صغيرة لكل حقل (صيغة البريد الإلكتروني، طول كلمة المرور، تطابق كلمتي المرور). عند مغادرة الحقل (on blur)، شغّل دالة التحقق وغيّر فئة التنسيق (class) للحقل، وحدّث نص الخطأ الخاص به. عند الإرسال، لا تسمح بالمرور إلا إذا نجحت جميع عمليات التحقق. تحدي إضافي: تفعيل التحقق الفوري والمباشر (live validation) بعد أول مغادرة للحقل.
الألعاب المصغرة: حيث تبدأ المتعة الحقيقية
تدفع الألعاب مهاراتك إلى آفاق جديدة لأنها تتطلب إدارة مستمرة للحالة، والتوقيت، والتفاعل. في المرة الأولى التي تجعل فيها البكسلات تتحرك على لوحة الرسم (canvas)، ستدرك المعنى الحقيقي لقوة جافا سكريبت.
13. حجر ورقة مقص (Rock Paper Scissors)
ما هو المشروع: تختار حجر أو ورقة أو مقص، ويقوم الكمبيوتر بالاختيار أيضاً، ثم يتم تحديد الفائز.
لماذا هو مفيد: تمرين ممتاز ومباشر على الجمل الشرطية والعشوائية، مع لحظة فوز أو خسارة ممتعة.
كيفية بنائه: ثلاثة أزرار لاختيارات اللاعب. عند النقر، يختار الكمبيوتر عشوائياً من بين الخيارات الثلاثة نفسها. استخدم مصفوفة بحث بسيطة (أو جمل if/else متداخلة) لتحديد النتيجة. تتبع عدد مرات الفوز والخسارة عبر الجولات. تحدي إضافي: اجعل اللعبة من خمس جولات مع شاشة خاصة لإعلان الفائز النهائي.
14. إكس-أو (Tic-Tac-Toe)
ما هو المشروع: لعبة الشبكة الكلاسيكية 3x3، حيث يتناوب لاعبان اللعب على نفس الشاشة.
لماذا هو مفيد: يعرفك على كيفية استخدام مصفوفة بطول 9 كشبكة ثنائية الأبعاد مسطحة، وفكرة التحقق من شروط الفوز. من الرائع إنجاز لعبة شهيرة كهذه.
كيفية بنائه: اعرض تسع خلايا على الشاشة. تتبع دور من الآن. عند النقر على خلية، ضع علامة اللاعب الحالي وتحقق من خطوط الفوز الثمانية المحتملة. اعرض لافتة الفائز عند تحقق الشرط. تحدي إضافي: صمم ذكاءً اصطناعياً بسيطاً يختار أي خلية فارغة عشوائياً ليلعب ضدك.
15. لعبة مطابقة الذاكرة (Memory Match)
ما هو المشروع: شبكة من البطاقات المقلوبة. تنقر على بطاقتين؛ إذا تطابقتا تظلان مكشوفتين، وإذا لم تتطابقا تعودان للوضع المقلوب.
لماذا هو مفيد: يعلمك خلط المصفوفات، والمؤقتات، وتحديد شروط الفوز بوضوح. في المرة الأولى التي تبرمج فيها منطق "إعادة قلب البطاقة بعد ثانية واحدة"، ستفهم آلية عمل setTimeout بشكل حقيقي.
كيفية بنائه: ضاعف مصفوفة من القيم لإنشاء أزواج متطابقة، ثم اخلطها باستخدام خوارزمية (Fisher-Yates). اعرض البطاقات مقلوبة. عند النقر، اكشف البطاقة. عند كشف بطاقتين، قارن بينهما؛ إذا تطابقتا ثبّتهما، وإلا فاقلبهما مجدداً بعد فترة تأخير قصيرة. تنتهي اللعبة عند مطابقة جميع الأزواج. تحدي إضافي: أضف عداداً للحركات ومتتبعاً لأفضل نتيجة يُحفظ في localStorage.
16. لعبة تخمين الأرقام (Number Guessing Game)
ما هو المشروع: يختار الكمبيوتر رقماً عشوائياً بين 1 و 100، وعليك تخمينه. يخبرك الكمبيوتر بـ "أعلى" أو "أقل" حتى تصل للرقم الصحيح.
لماذا هو مفيد: مشروع بسيط ومباشر ولكنه يعلمك كيفية التعامل مع المدخلات، والمقارنات، ونمط "التكرار حتى الوصول للحل الصحيح" الذي ستواجهه كثيراً في البرمجة.
كيفية بنائه: قم بتوليد الرقم المستهدف مرة واحدة. تتبع عدد التخمينات. مع كل تخمين، قارنه بالرقم المستهدف وحدّث رسالة التوجيه. توقف عن استقبال المدخلات بمجرد التخمين الصحيح. تحدي إضافي: حدد عدد المحاولات بسبع محاولات فقط، مع عرض شاشة "انتهت اللعبة" إذا نفدت المحاولات.
17. لعبة الرجل المشنوق (Hangman)
ما هو المشروع: يختار الكمبيوتر كلمة سرية، وتقوم بتخمين الحروف واحداً تلو الآخر. التخمينات الخاطئة تساهم في إكمال رسمة الرجل المشنوق.
لماذا هو مفيد: إنه المشروع الذي سيكسر حاجز الخوف لديك من معالجة النصوص (string manipulation). بناء شاشة عرض "الحروف المخمنة" سيعلمك دوال split و map و join دفعة واحدة.
كيفية بنائه: اختر كلمة عشوائية من مصفوفة. اعرض شرطة سفلية (underscore) لكل حرف. عندما يختار اللاعب حرفاً، اكشف عن المواضع المتطابقة أو سجل تخميناً خاطئاً. ارسم الرجل المشنوق على مراحل (يُسمح عادةً بـ 6 أخطاء) باستخدام CSS أو canvas. تحدي إضافي: جلب الكلمات من واجهة برمجة تطبيقات (API) لقاموس عام.
18. لعبة الثعبان الكلاسيكية (Snake)
ما هو المشروع: لعبة الثعبان الشهيرة؛ تناول الطعام لتكبر، وتخسر إذا اصطدمت بجسدك أو بالجدار.
لماذا هو مفيد: هذا هو مشروع "مستوى الوحش" بالنسبة للمبتدئين. ستتعامل فيه مع الشبكة (عبر canvas أو CSS)، وأحداث لوحة المفاتيح، وحلقة اللعبة (game loop)، واكتشاف التصادم (collision detection)، وآلية نمو الثعبان.
كيفية بنائه: اعرض شبكة باستخدام CSS أو عنصر <canvas>. خزّن الثعبان كمصفوفة من كائنات الإحداثيات. مع كل حركة (tick)، انقل الثعبان خلية واحدة في الاتجاه الحالي. إذا تطابق موضع الرأس الجديد مع موضع الطعام، اجعل الثعبان ينمو وولّد طعاماً جديداً. إذا اصطدم الرأس بالجدار أو بجزء من جسم الثعبان، تنتهي اللعبة. استمع لمفاتيح الأسهم لتغيير الاتجاه. تحدي إضافي: زيادة سرعة اللعبة تدريجياً كلما زادت النتيجة.
مشروع إضافي: تطبيق الطقس (Weather App)
ما هو المشروع: إدخال اسم مدينة للحصول على درجة الحرارة الحالية ووصف لحالة الطقس.
لماذا هو مفيد: أول تجربة حقيقية لك مع واجهات برمجة التطبيقات العامة (APIs) والأكواد غير المتزامنة (async code). أي واجهة طقس مجانية ستكون كافية للبدء.
كيفية بنائه: احصل على مفتاح API مجاني. عند الإرسال، استخدم دالة fetch مع تضمين اسم المدينة في الرابط. انتظر الاستجابة (Await)، وحلل بيانات الـ JSON، ثم حدّث الـ DOM بالحقول المطلوبة. ضع الكود داخل كتلة try/catch حتى لا تتسبب أسماء المدن الخاطئة في تعطل واجهة المستخدم. تحدي إضافي: عرض توقعات الطقس لخمسة أيام قادمة.
كيف تنهي المشاريع التي تبدأها؟
القائمة أعلاه لن تفيدك بشيء إذا بدأت في نصفها وتخليت عن الباقي. إليك بعض النصائح التي ستساعدك على الاستمرار والإنهاء:
- اختر أصغر مشروع يثير حماسك: الحماس يجعلك تبدأ، وصغر حجم المشروع يضمن لك إنهاءه. ثم كرر العملية.
- حدد وقتاً زمنياً ولا تحدد نطاقاً مفتوحاً: امنح نفسك ساعة أو ساعتين من التركيز التام لإنجاز مشروع مبتدئ. إذا لم تنتهِ، فهذه مجرد معلومة توضح لك أين تعثرت، وليست فشلاً.
- ابنِ أولاً، ثم جمّل لاحقاً: احصل على نسخة تعمل أولاً حتى لو كانت غير منسقة قبل أن تلمس الـ CSS. فالمشروع الأنيق والمعطل أسوأ بكثير من المشروع البسيط الذي يعمل بكفاءة.
- تجنب التنقل المستمر بين الدروس (Tutorial-hopping): مشاهدة ثلاثة دروس مختلفة لنفس المشروع تعني أنك أضعت وقتك دون كتابة سطر برمجى واحد. ابنِ بطريقتك حتى لو لم تكن مثالية، ثم ابحث عن الأجزاء المحددة التي لا تعرفها.
- تدرب على الأساسيات في الأيام التي لا يمكنك البناء فيها: خمس دقائق على منصة كودي أثناء ركوب الحافلة تعتبر جلسة تعليمية حقيقية. الاستمرارية اليومية تصنع الفارق.
هذه النصيحة الأخيرة هي ما يربط كل شيء معاً. المشاريع تجعل ما تعلمته يبدو حقيقياً وملموساً، لكنها تعتمد كلياً على الأساسيات. الدروس اليومية القصيرة هي ما يحول دون شعورك بأن هذه المشاريع صعبة المنال.
أين يأتي دور منصة كودي (Coddy)؟
هذا ليس ترويجاً لأداة معينة لبناء هذه المشاريع. استخدم أي محرر نصوص تفضله، وشغّل مشاريعك في المتصفح، واستضفها أينما تريد.
الدور الذي تلعبه منصة كودي يأتي في مرحلة تسبق ذلك: تمكينك من أساسيات جافا سكريبت بشكل قوي بحيث لا يعني "بناء تطبيق اختبار" قضاء ساعتين في البحث على جوجل لمعرفة ماذا تفعل دالة .map.
لقد علمت منصة كودي لغة جافا سكريبت لملايين المتعلمين عبر الويب، ونظامي iOS وأندرويد. نفس الدروس، ونفس التقدم، ومساعدك "باغزي" معك أينما فتحت التطبيق.
تغطي الخطة المجانية كل دروس جافا سكريبت دون الحاجة لأي إعدادات مسبقة. العائق الوحيد هو نظام الطاقة الذي يعاد شحنه بعد بضع ساعات.
هل تريد جلسات غير محدودة ومساعدة "باغزي" في كل استفسار؟ تتوفر الخطط المدفوعة بنصف سعر المنصات المنافسة تقريباً. وفي كلتا الحالتين: الأساسيات أولاً، والمشاريع ثانياً.
تساعدك منصة كودي على دمج تعلم جافا سكريبت في أوقات فراغك اليومية من خلال دروس قصيرة داخل المتصفح، ونقاط خبرة (XP)، ونظام حوافز متتابع يحفزك على العودة يومياً.
Share this article
About the Author
Coddy Team
Editorial Team
Frequently Asked Questions
ما هو أفضل مشروع JavaScript أول لشخص لم يسبق له بناء أي شيء؟
العداد (counter). قد يبدو الأمر بسيطًا، لكنه يغطي دورة HTML و CSS و JS الكاملة في عشرين سطرًا من الكود. بمجرد أن تتمكن من بنائه دون نسخ ولصق، فإن كل مشروع آخر في هذه القائمة هو مجرد تنويع على نفس النمط.
هل أحتاج إلى معرفة HTML و CSS قبل بناء هذه المشاريع؟
قليل من كل منهما. لا تحتاج إلى أن تكون بارعًا في CSS لإنشاء عداد (counter) أو قائمة مهام (todo list) تعمل بشكل جيد. أنت بحاجة إلى أساسيات HTML (مثل divs و buttons و inputs) واستخدام IDs و classes حتى يتمكن كود JS الخاص بك من العثور على العناصر. أما الباقي فستتعلمه أثناء الممارسة.
كم من الوقت يجب أن يستغرق مشروع JavaScript للمبتدئين؟
المشاريع المبتدئة مثل العداد (counter) أو حاسبة الإكراميات (tip calculator) تستغرق أمسية أو اثنتين. أما المشاريع متوسطة المستوى مثل قائمة المهام (todo list) أو البومودورو (pomodoro)، فقد تستغرق عطلة نهاية الأسبوع. قضاء أكثر من أسبوع في مشروع مبتدئ واحد يعني عادةً أن هناك شيئًا مفقودًا في الأساسيات.
أين يمكنني تعلم أساسيات JavaScript قبل البدء في المشاريع؟
دورة JavaScript من Coddy مصممة خصيصًا لهذا الغرض. دروس مدتها خمس دقائق تنتقل بك من variables و loops إلى arrays و objects وأساسيات DOM. هناك نسخة مجانية، ولا تتطلب أي إعدادات، وتحتوي على بيئة تجريبية داخل المتصفح. اجمع بين الدروس ومشروع واحد من هذه القائمة وستتقدم بشكل أسرع بكثير مما لو قمت بأحدهما منفردًا.
ما الفرق بين التدرب على منصة وبناء المشاريع؟
التدريب يبني الأساسيات بسرعة: الـ syntax، والـ patterns، والـ methods الشائعة. بينما تجبرك المشاريع على ربط هذه الأجزاء معًا والتعامل مع الواقع الفوضوي لتطبيق حقيقي. الطريق الأسرع هو القيام بالأمرين معًا.
أستمر في بدء المشاريع ولا أنهيها. ما الذي أفعله بشكل خاطئ؟
من المؤكد تقريبًا أنك تختار مشاريع كبيرة جدًا بالنسبة للوقت المتاح لديك. تراجع خطوة إلى الوراء: إذا كنت قد تخليت عن ثلاثة تطبيقات todo، فجرب العداد (counter) أو الـ color palette أولاً. إنهاء شيئين صغيرين يمنحك قوة دفع أكبر بكثير من إنجاز نصف شيء كبير. وحافظ على تحديث أساسياتك في الأيام التي لا تبني فيها مشاريع، حتى لا تضطر إلى إعادة تعلم الـ syntax عندما تجلس للعمل فعليًا.



