كيف بدأت تعلم البرمجة؟ المصادر التي اعتمدت عليها في الأشهر الثلاثة الأولى

يعكس هذا المقال تجربة كاتبه Bret Cameron في تعلم البرمجة وتطوير واجهات مواقع الويب في خلال ثلاثة أشهر وكل ما فيه يعبر عن رأي الكاتب وتجربته فقط. (مترجم بتصرف)

تريد أن تتعلم البرمجة؟ سيكون هذا المقال دليلك في غابات التكنولوجيا والمصادر العديدة المتاحة، سيساعدك على الانتقال من حالة الصفر إلى بناء مواقع ويب سريعة، تفاعلية وحديثة.

أمضيت الأشهر الثلاثة الماضية في تعلم البرمجة، ورغم أنها كانت صعبة في بعض الأحيان فقد كانت تجربة مفيدة للغاية. أحد أصعب التحديات كان اختيار ما يجب تعلمه والمصدر لتعلمه. هناك العديد من اللغات وأُطُر العمل frameworks والمكتبات libraries والكثير من النصائح المتضاربة.

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

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

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

1- HTML, CSS, and JavaScript:

هذه هي اللغات الأساسية الثلاثة لجميع تطبيقات الويب، ومن المستحيل (تقريبًا) إنشاء أي شيء على الإنترنت دون استخدامها.

HTML

إنها ليست لغة برمجة؛ وإنما لغة تنسيق وهيكلة (Hyper Text Markup language) لإنشاء الوثائق الإلكترونية (الصفحات – pages) على الإنترنت. 

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

في البدء تعلمتُ أجزاء متقطعة ومتفرقة من HTML قبل أن أبدأ في أخذها على نحو أكثر جدية، لكن إذا اضطررت إلى اختيار مصدر واحد لتعلمها اليوم، سوف اختار موقع freeCodeCamp؛ إنه منظم وسريع للتعلم وبسيط – إضافة إلى أنه مجاني!

إذا كنت تبحث عن بيئة تتدرب فيها على ما تعلمته، فإنني أوصي بموقع CodePen، فهو مكان مثالي لممارسة اللغات الأساسية لبرمجة الويب (HTML و CSS و JavaScript).

CSS

تعد لغة CSS الرفيق الطبيعي لـلغة HTML. ظاهريا، تبدو بسيطة للغاية، على الرغم من وجود بعض المفاهيم – خاصة فيما يتعلق بالتصميم للموقع  layout وتحديد مواقع العناصر في الصفحة positioning – والتي يمكن أن تستغرق بعض الوقت لاستيعابها.

مرة أخرى، يعد موقع freeCodeCamp هو خيار جيد لـتعلم لغة CSS. لم أقضي الكثير من الوقت في تعلم CSS عن طريق الدورات، لأن  قواعد هذه اللغة syntax بسيطة جدًا، لذا فإن معظم تعليمي جاء من تجربة العديد من الخصائص والعناصر في مشاريعي الخاصة.

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

يحتوي التطوير الأخير CSS3 على أداتين تخطيطيتين قويتين، ويمكن أن يساعدنا في التعمق في هذه الأدوات: غالبًا ما أعود إلى دليل Flexbox Guide  و Grid Guide، من خلال موقع CSS Tricks، وقد تابعت ما يقرب من نصف CSS Grid Tutorial المجانية التي يقدمها Wes Bos قبل أن أشعر أنني مستعد للاستمرار.

ملاحظة: لا تعتبر HTML و CSS لغات برمجية حيث إنها تستخدم فقط لبناء صفحات الويب وتنسيقها ولا يمكن إطلاقًا كتابة برامج كاملة للقيام بوظائف معينة باستخدامها مثل لغات أخرى مثل Python  و Java Script وغيرها.

JavaScript

لما لم تكن HTML و CSS لغات برمجية، فلن تحصل على فهم كامل لماهية البرمجة حتى تبدأ في تعلم لغة JavaScript فهي لغة برمجة الويب.

وهذا يجعل لغة JavaScript خيارًا آمنًا للغاية للتعلم، إضافة إلى ذلك، تُستخدَم بشكل متزايد لأغراض أخرى، من خلال تقنيات مثل Node.js.

بالنسبة للمبتدئين، فإن JavaScript لا تعتبر لغة سهلة مثل HTML أو CSS، وبالتالي أوصيك بالتنقل بين مجموعة متنوعة من المصادر المختلفة لتعزيز المفاهيم الأساسية التي ستتعلمها.

المبتدئين: كما هي الحال مع  HTML و CSS، أوصي بشدة بمسار JavaScript الخاص بـموقع freeCodeCamp. كما درست عدة دورات أخرى، كان أكثرها فائدة هو موقع codecademy  إضافة إلى دورة تمهيدية مجانية من مدرسة Flatiron School.

الهواة: بمجرد حصولي على معرفة أفضل للغة جافا سكريبت، بدأت في حل بعض الأسئلة على موقع CodeWars حيث يعتبر من أفضل المواقع الموجودة؛ ولكن تدرج الصعوبة في الأسئلة والمُشكلات التي يعرضها غير منسق، إذ يمكن أن تبدو بعض المشكلات التي يفترض أنها للمبتدئين صعبة للغاية! أقترح عليك البدء مع العديد من المشكلات ذات المستوى الأدنى من الصعوبة، وإذا واجهتك مشكلة، فقد يكون البحث عن حلول في لغة JavaScript على موقع MDN مفيدًا جدًا.

2- مجموعة اخرى من البرمجيات وأُطُر العمل التي ينبغي لكل مطور معرفتها:

Git  و GitHub

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

عندما تكون في مرحلة التعلم، ولا تشعر بحاجة إلى استخدام برنامج Git، فقد تشعر أن تعلم كيفية استخدامه عمل شاق لا حاجة له. ولكن هذا غير صحيح إطلاقًا؛ لأن الغالبية العظمى من المطورين المحترفين يعتمدون على خدمات GitHub (أو خدمات مماثلة)، أضف أنه يوجد ملف شخصي نشط لـك على موقع GitHub يمكن أن يساعدك في تأمين عملك وحفظه.

متى ما أسرعت في استخدام موقع GitHub لحفظ البرامج التي أنشأتها، زادت الأدلة التي لديك والتي تدل على خبرتك كمطور. استخدمت  الدليل التعليمي على موقع codecademy لمساعدتي في البدء على تعلم العمل على Git.

Command Line

إن أفضل طريقة لاستخدام Git هي عبر برامج  “أسطر الأوامر” terminal أو command line، وهو أمر ضروري أيضًا لمطوري الويب العصريين، إذ يتيح لهم بسهولة إضافة حزم الطرف الثالث 3rd party packages إلى مواقع الويب الخاصة بهم عبر موقع NPM Node package Manager أو عبر موقع   Yarn. وكما ذكرت سابقًا، بدأت خطواتي الأولى هنا باستخدام Codecademy.

ملاحظة لمستخدمي نظام Windows: أوصي بشدة بتنزيل https://gitforwindows.org واستخدامه في كتابة أوامر Git و NPM / Yarn. لما يتيحه لك من استخدام أوامر مألوفة لمستخدمي Linux و Mac – وحسب ما أعرف – يعد برنامج Git لنظام Windows تحسينًا شاملًا في موجه الأوامر Command Prompt المدمج في نظام Windows نفسه.

3- بناء مجموعة المهارات الخاصة بك:

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

Sass

تتعامل Sass مع لغة CSS فتضيف على الأوامر الأساسية في لغة CSS العديد من الخصائص الجديدة التي تجعلها أفضل وأسهل في الكتابة ومراجعتها أسهل. تعتبر Sass سهلة التعلم، ببساطة اتبع الدليل الموجود على الموقع الرسمي Sass. وبمجرد أن بدأت في استخدام Sass، كان من الصعب جدًا العودة إلى الكتابة باستخدام CSS العادية!

Bootstrap

برمجية Bootstrap هي مكتبة مكونات، طورتها Twitter. تتيح للمطورين بناء النماذج الأولية بسرعة كبيرة بدلاً من كتابة الكود البرمجي الذي يمثل شريط التمرير slider أو شريط التنقل navigation bar من الصفر، يمكن لـ Bootstrap مساعدتك في بناء واحد في ثوانٍ.

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

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

jQuery

قد يكون عام 2019 نقطة تحول لـ jQuery، حين تزايد انتقال المطورين إلى أطر عمل مثل React.js و Vue.js، إذ يُنظر إلى أسلوب jQuery في التعامل مع DOM Document Object Module على أنه ممارسة سيئة.

ومع ذلك، ما زلت أنصحك بتعلم jQuery. لأن عددًا كبيرًا من المواقع على الإنترنت ما زالت تستخدم jQuery (واستطيع أن أؤكد لك أنك ستضطر إلى التعامل مع إحداها عندما تصير مطور ويب محترف)، لكنني وجدت أن تعلم jQuery ساعدني حقًا في تطوير معرفتي بـ JavaScript. بالنسبة لي، كان أفضل مكان لتعلم jQuery هو موقعها الرسمي.

حاليًا، عندما أحاول صنع تأثير معين باستخدام Vanilla JavaScript، والذي أعرف أن بإمكاني إنجازه أيضًا باستخدام jQuery، ألقِ نظرة على الكود المصدري لـ jQuery. الكود المصدري لـ jQuery مكتوب جيدًا وسريع ومتوافق للغاية، وقد ساعدني ذلك على فهم الكثير عما يمكن إنجازه باستخدام Vanilla JavaScript. لقد استفدت بالتأكيد من تعلم jQuery قبل المضي قدمًا وتعلم تقنية أكثر حداثة مثل React.

تستخدم المكتبات الأخرى، مثل Lodash و Underscore، مبادئ مماثلة لـ jQuery. غالبًا ما أفضّل محاولة فهم الكود المصدري لهذه التقنيات وكتابته في Vanilla JavaScript. مع ذلك، ليست هناك حاجة إلى إعادة اختراع العجلة؛ إذا وجدت نفسك في أماكن متعددة حيث يكون استخدام Lodash (على سبيل المثال) مفيدًا أكثر من غيرها، فاحرص على استخدامها.

ملاحظة: تعتبر كل من jQuery, Lodash، Underscore مكتبات libraries تحتوي على أكواد مصدرية سهلة التعامل و مختصرة للوقت للغة JavaScript. مصطلح Vanilla JavaScript يرمز إلى استخدام لغة JavaScript فقط دون استخدام أي مكتبات أخرى معها.

React

هناك العديد من مكتبات JavaScript الحديثة، بما في ذلك Ember و React و Vue و Angular. لا يوجد خيار واحد صحيح هنا، لكن بعد إجراء بعض الأبحاث، اخترت التركيز على React.

من بين كل هذه المكتبات وأطر العمل، يبدو أن React هي الأكثر شعبية وأسرعها نموًا. طوِّر بواسطة Facebook، ومنهجه في معالجة DOM يمنحه ميزة أكبر من Angular.

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

إن دورة البرمجة الوحيدة التي دفعت ثمنها هي دورة الخبير البرمجي Wes Bos   React for Beginners وذلك لأن البرمجة في React قد تشعرك بأنها مختلفة تمامًا عن البرمجة باستخدام لغة JavaScript التقليدية، فهي تستغل العديد من الميزات الخاصة بـ ES6 JavaScript، وهناك فرصة جيدة بأنك لن JavaScript’s class system قبل استخدام React.

أفضل مصدر مجاني لتعلم React كان الدليل التعليمي الخاص بالموقع نفسه React.

WordPress وPHP

إذا كانت لديك طموحات للعمل مطورَ ويب، سواء بشكل مستقل أو جزءًا من شركة أكبر، فمن المحتمل أن تتعامل مع WordPress.

قد يكون لدى المطورين آراء مختلفة عن موقع WordPress ولغة PHP  وهي اللغة التي تكمن وراءه، لكنها الحل الأمثل للعديد من الشركات وحيث أن ربع مواقع الويب تقريبًا تستخدمها.

سبب نجاح WordPress المستمر هو اعتياد الناس عليه. يتمتع العديد من الأشخاص بتجربة استخدامه كونه نظام إدارة محتوى CMS content management system ومع التحسينات الصحيحة يمكن أن يكون سريعًا ومتعدد الاستخدامات مثل العديد من أنظمة إدارة المحتوى الحديثة.

حللت العديد من أسئلة لغة PHP على موقع CodeWars طوال أسبوع أو نحو ذلك، لمجرد التعرّف إلى البنية الأساسية والأساليب، وكان ذلك كافيًا بالنسبة لي للتعمق في WordPress. على وجه الخصوص، أوصي بهذا البرنامج التعليمي الرائع للمبتدئين في WordPress، والذي يشرح كيفية البدء في استخدام السمات المخصصة custom themes. أقرأ أيضًا موضوع “Underscores Starter Theme“. اخيرًا عندما تواجه أي مشكلات في طريقك، يكون المكان المناسب هو https://developer.wordpress.org.

4- ما التالي؟

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

حدد ما ترغب وحدد مصادر تعلمك وانطلق في رحلتك!