خطة كورسور لتعلم تطوير مواقع وتطبيقات الويب من الصفر
في البداية يجب ان تعلم ان لتطوير موقع او تطبيق معين فالموضوع لايقتصر الامر علي مجرد تطوير الواجهه فقط كما يعتقد الكثير من المبتدئين بعد تعلمهم لل HTML , CSS , JavaScript ولكن هناك ايضا الاهم من هذا بكثير..
سنبدأ بسرد الخطوات بشكل سريع قبل البدء بشرح كل خطوة شرح مفصل ان شاء الله ::
الخطوة الأولي : واجهة الموقع front-end , وهو الجزء الذي تراه من اي موقع علي الانترنت .. فمثلا عند تصفحك لموقع مثل الفيسبوك فكل ما تراه امامك من مقالات وصفحات وجروبات هو عبارة عن واجهة فقط لما خفي .. وما خفي كان اعظم بكثير ...
الخطوة الثانية :: بعد ان تقوم بتصميم الموقع وتكويد هذا التصميم لتنتهي خطوة تطوير الواجهة بشكل كامل تبدأ بعد ذلك في تطوير نظام إدارة خاص بالموقع - back-end - وهو ما سنشرحه لك بالتفصيل ان شاء الله ...
في خلال الشرح هايكون معانا صديقنا ( توني ) - اسم الباتشينو في scarface بما اني باتفرج عليه دلوقتي 😂 - هايساعدنا نفهم أجزاء الموقع بشكل كويس ان شاء الله ..
محتوي المقالة :
واجهة الموقع :
عقل ونظام إدارة الموقع :
الخطوة الأولي : واجهة الموقع ( Front-End)
لربما تكون علي دراية بالمقصود بمصطلح واجهة الموقع .. لكن دعني اختصره لك في تعريف واحد , هو كل ما تراه من اي موقع علي الانترنت . اي شيء تراه علي الانترنت هو عبارة عن واجهة لمواقع مختلفة ...
الأدوات اللي بتستخدم في تطوير واجهة الموقع كثيرة لكن هاسردلك الأهم منها :
اولا: HTML :
وهي ليست لغة برمجية - ودي أهم معلومه لازم تكون عارفها كويس - هي لغة هيكيلية ... لو تخيلنا ان صديقنا توني هو الموقع فالعظام هاتكون HTML زي ماظاهر عندك في الصورة كده ..
مصادر تعلم HTML هتلاقيها هنا بإذن الله , سواء الكورسات المصورة او الكتب العربية والانجليزية ...
ثانيا :: CSS ::
وهي لغة تصميمية يعني بتستخدم في تعديل وتصميم الشكل الخاص بالموقع والالوان والاحجام الخاصه , وتقدر تعتبرها البشرة الخاصة بصديقنا توني , يعني الجلد الخارجي ... وبكده انت عن طريق ال HTML و CSS بتقدر انك تصنع توني كامل - موقع كامل - وطبعا زي ما اتفقنا ان كل اللي بتعملها هنا في الخطوة دي هو الواجهة الخاصة بالموقع يعني ما سيراه المستخدم ...
مصادر تعلم CSS هتلاقيها هنا بإذن الله ..
ثالثا :: JavaScript ::
انت دلوقتي عندك توني خاص بيك ومحتاج تعطية امكانية الحركة , فلو حد حاول يسلم عليه يقدر يرد السلام علي سبيل المثال يعني بإختصار الجافا سكريبت بتضيف الروح في توني علشان يتحول من كائن ساكن لكائن بروح وبيتحرك ...وهنا بتكون مهمة JS وعند الخطوة دي انت هاتبدأ في تعلم البرمجة فعليا , وده بيتطلب منك بعض التركيز والكثير والكثير من التدريب .. الجافاسكريبت لغة قوية جدا وليها استخدامات كتير لكن في الوقت الحالي يكفي انك تتعلم فقط الاساسيات الخاصه بيها لانك مش هاتستخدمها بشكلها الحقيقي , في معظم الاوقات هاتستخدم frameworks خاصة بيها ..
ثانية بس , يعني ايه framework ؟! بالمختصر تقدر تعتبره مكتبة منسقة بطريقة معينة بتوفر عليك مجموعة كبيره من الخطوات يعني مثلا انت لو محتاج شخص يتحرك مسافة مربعين للامام وبعدها يتحرك لليمين اربع مربعات فهاتضطر تقوله بالطريقة دي ::
**********************************
**********************************
انظر للامام
تحرك عدد اثنين من المربعات
قف
اتجه لليمين
تحرك عدد اربع مربعات
قف
*********************************
لكن تخيل ان ممكن أداة تساعدك وتوفرلك سطر واحد بس تقدر عن طريقة تنفذ نفس الأكواد السابقة بالكود التالي ::
** تحرك اثنين للامام وبعدها اربعة لليمين **
من المؤكد انك هاتختار الاختيار التاني علي الاقل في بداية طريقة التعلم ..
ملحوظة لغير المبتدئين :: بالتأكيد ان فيه فرق بين framework , library لكن انت مش هتحتاج تعرف عنهم حاليا اكتر من اللي انا كاتبه ليك فوق ..
ملحوظة 2 لغير المبتدئين :: اكيد افضل ليك كتير انك تكتب pure javascript لكن علشان توصل للدرجة اللي تقدر فيها انك تكتب كود من غير مكتبات بيحتاج سنين خبره ومش في الجافاسكريبت فقط لان المكتبات بتوفرلك مميزات زي الامان واللي هتحتاج انك تدرس Cyber security مثلا علشان تقدر تفهم ازاي تأمن الكود اللي هاتكتبه .. تأمن الكود من ايه ؟! ده هانتكلم عليه في الخطوات الأخيره ان شاء الله ...
ودي اول مكتبة خاصة بالجافاسكريبت هاتتعلمها .. وهي الأهم علي الإطلاق لانك هاتستخدمها لفترة مش قليلة في خلال الفترة اللي هاتتعلم فيها ان شاء الله ولغاية لما تتعلم بناء موقع بشكل كامل وبعد كده هاتبدأ تتعلم مكتبات أحدث منها ... وظيفتها هاتكون نفس وظيفة الجافاسكريبت وهي إضافة الروح للموقع فحاول انك تتدرب عليها بشكل كبير ..
تقدر تبدأ في طريق تعلم الجي كويري من هنا
تمام ؟! انت دلوقتي عندك توني ذي الصورة كده : الجسم اكتمل من حيث العظام والجلد والمظهر الخارجي وكمان بيتحرك زي البني ادمين لكن للاسف مش بيفكر لانك لسه مش صنعت العقل الخاص بيه ولسه مش بيتذكر اي شيء لانك لسه ماصنعتش الذاكرة الخاصة بيه .. والأغرب من كده ان اي حد بينفخ فيه بيقع لانه لسه مش اتعلم ازاي يدافع عن نفسه ... هانتعلم بإذن الله كل حاجه لكن خطوة خطوة .
*********************************
لكن تخيل ان ممكن أداة تساعدك وتوفرلك سطر واحد بس تقدر عن طريقة تنفذ نفس الأكواد السابقة بالكود التالي ::
** تحرك اثنين للامام وبعدها اربعة لليمين **
من المؤكد انك هاتختار الاختيار التاني علي الاقل في بداية طريقة التعلم ..
ملحوظة لغير المبتدئين :: بالتأكيد ان فيه فرق بين framework , library لكن انت مش هتحتاج تعرف عنهم حاليا اكتر من اللي انا كاتبه ليك فوق ..
ملحوظة 2 لغير المبتدئين :: اكيد افضل ليك كتير انك تكتب pure javascript لكن علشان توصل للدرجة اللي تقدر فيها انك تكتب كود من غير مكتبات بيحتاج سنين خبره ومش في الجافاسكريبت فقط لان المكتبات بتوفرلك مميزات زي الامان واللي هتحتاج انك تدرس Cyber security مثلا علشان تقدر تفهم ازاي تأمن الكود اللي هاتكتبه .. تأمن الكود من ايه ؟! ده هانتكلم عليه في الخطوات الأخيره ان شاء الله ...
رابعا :: JQUERY ::
ودي اول مكتبة خاصة بالجافاسكريبت هاتتعلمها .. وهي الأهم علي الإطلاق لانك هاتستخدمها لفترة مش قليلة في خلال الفترة اللي هاتتعلم فيها ان شاء الله ولغاية لما تتعلم بناء موقع بشكل كامل وبعد كده هاتبدأ تتعلم مكتبات أحدث منها ... وظيفتها هاتكون نفس وظيفة الجافاسكريبت وهي إضافة الروح للموقع فحاول انك تتدرب عليها بشكل كبير ..
تقدر تبدأ في طريق تعلم الجي كويري من هنا
تمام ؟! انت دلوقتي عندك توني ذي الصورة كده : الجسم اكتمل من حيث العظام والجلد والمظهر الخارجي وكمان بيتحرك زي البني ادمين لكن للاسف مش بيفكر لانك لسه مش صنعت العقل الخاص بيه ولسه مش بيتذكر اي شيء لانك لسه ماصنعتش الذاكرة الخاصة بيه .. والأغرب من كده ان اي حد بينفخ فيه بيقع لانه لسه مش اتعلم ازاي يدافع عن نفسه ... هانتعلم بإذن الله كل حاجه لكن خطوة خطوة .
فهرس المصادر اللي هاتتعلم من خلالها ان شاء الله بنفس الترتيب ::
1/ HTML
2/ CSS
3/ التطبيق العملي الأول علي HTML , CSS
4/ JQuery
5/ التطبيق العملي الثاني علي HTML , CSS , JQuery
6/ التطبيق العملي الثالث علي HTML , CSS , JQuery
7/ التدريب العملي الرابع علي HTML , CSS
8/ Bootstrap 3
9/ التطبيق العملي الرابع علي HTML , CSS , Bootstrap
عند النقطة دي انت كده تمام جدا .. بقيت front end web developer تقدر تبدأ تشتغل فعليا .. لكن هتحتاج تطور مجموعة من المهارات اللي عندك علشان تقدر تنفذ الوظايف في وقت اقل وبقوة اكبر ف تقدر تنافس علي الوظايف والعملاء يختاروك انت ...
10/ HTML 5
11/ CSS 3
12/ Bootstap 4 ::
ودي النسخة الحديثة من البوتستراب , مختلفة كتير عن النسخه القديمة منه خاصة في اعتمادها علي flex box تقدر تبدأ في الكورس من هنا
13/ JQuery ::
دي مجموعة من الأمثلة والتدريبات علي JQuery هاتساعدك جدا تطور من مستواك تقدر تبدأ فيها من هنا
14/ SASS ::
دي أداة تصميمة بتضيف لل CSS مجموعة كبيرة من المميزات وبتوفر عليك وقت ومجهود كبير ...
تقدر تبدأ فيها من هنا
عند الخطوة دي انت مستعد بنسبة 100 % تشتغل ك front end developer ...
بعض المهارات المتبقية ليك هاتكون انك تتعلم تتعامل مع برنامج الفوتوشوب وبرنامج adobe xd و مجموعه من المهارات المتقدمة في web design هتلاقيها هنا و مجموعة تانية من الفيديوهات المتقدمة في HTML , CSS هتلاقيها هنا
الخطوة الثانية : عقل ونظام إدارة الموقع ( Back-end )
اتقنت المقصود بمصطلح واجهة الموقع !؟ اذا لما تتقن هذا المصطلح نظريا وعمليا فأنصحك بالعودة للخطوة الأولي ..
في برمجة وتطوير عقل ونظام إدارة خاص بالموقع ستحتاج للكثير من الأدوات واللغات البرمجة سأسرد لك أهمها ::
1/ PHP ::
احدي اهم لغات البرمجة المستخدمة في مجال الويب .. توني ( مثال للموقع الذي نعمل عليه ) حاليا كامل الجسد ويستطيع الحركة والتفاعل ولكنه بلا عقل .. وهنا نفهم دور ال PHP وانها مسؤولة عن صناعة عقل للموقع .. عقل يستطيع التواصل مع الزوار , وعقل يستطيع عرض انواع معينة من المقالات للزوار في حالة دخوله علي نوع معين من الصفحات .. عقل يستطيع ان يوفر طريقة يستطيع من خلالها مدير الموقع ان يضيف مقالات جديدة .. وكمثال :: لما بتكتب علي الفيسبوك بوست جديد تتخيل ايه اللي بيحصل ؟! عقل الفيسبوك بياخد البوست ده وينشره علي الصفحة الرئيسية ليك وعلي الصفحة الرئيسية لكل الاصدقاء عندك .. لكن ازاي لما بتدخل علي صفحتك الشخصية مره تانية بيكون موجود لسه !؟ لان العقل بيكون مرتبط بالذاكرة .. ولكن php عقل بلا ذاكرة !! ف ازاي البوست اتحفظ ؟! هانعرف في الأداة التانية ...
مصادر تعلم ال php هاتكون في اخر شرح الخطوة التانية بإذن الله ...
2/ SQL ::
دي لغة برمجية بتستخدم في التعامل مع قواعد البيانات .. يعني ايه ؟! ... اولا خلينا متفقين ان توني محتاج ذاكرة جنب العقل ! .. علشان يفتكر مثلا الايميل والباسوورد اللي PHP هاتبعتهم ليه ! .. او يفتكر البوست اللي اتكلمنا عنه قبل كده , واللي php هاتبعته لل ذاكرة علشان يتحفظ بحيث ان المستخدم لما يدخل علي صفحته الشخصية يقدر يشوف البوست ... هي دي مهمة قواعد البيانات واللي بتعمل عمل الذاكرة في اي موقع الكتروني , او في اي ابليكيشن بشكل عام ...
3/ CMS ::
وهي ملخص لكلمة control management system ويعني نظام الادارة والتحكم في الموقع .. بعد لما صنعنا موقع كامل هانحتاج اننا نتحكم فيه ونعمل نظام لاستقبال البيانات من الزائر او لأرسال معلومات محدده للزائر او لإضافة زيادات معينة للموقع الخ .. ده بيتبني بال php , sql وانت هاتتعلمهم بشكل كامل فالموضوع ان شاء الله مش هايكون صعب ..
دلوقتي هانبدأ في المصادر اللي ممكن تتعلم عن طريقها ازاي تبرمج عقل الموقع :
1/ php ::
اساسيات ال php ممكن تتعلمها من قناة الزيرو برضو من هنا لكن الحقيقة انا اعجبت جدا جدا بكورس علي موقع يودمي بيشرح php , oop , mysql, cms بطريقة جميلة جدا لكن بالانجلش تقدر تدخل عليه من هنا ...
انت ممكن تختار ايهما افضل ليك وتبدأ بيه او تعمل زيي وتاخد الاتنين ...
2/ SQL ::
ازاي هاتتعلم برمجة قواعد البيانات ؟!
برضو فيه كورس علي قناة الزيرو بيشرحلك الموضوع ده من هنا ..
وفيه كورس تاني بالانجلش علي يودمي هتلاقي اللينك بتاعه هنا ..
ولو مش تقدر تشتريه اطلبه علي جروبنا علي الفيسبوك واحنا هانجيبهولك بإذن الله ..
3/ CMS ::
الكورس الوحيد اللي برشحه ليك في بناء نظام ادارة كامل من الصفر بال php و sql هو نفس الكورس اللي قولتلك عليه فوق علي منصة يودمي تقدر تشوفه من هنا ..
الكورس مش غالي لكن لو مش هاتقدر تدفع تمنه اتواصل معانا وهانجيبلك لينك لتحميله بالمجان بإذن الله ..
انا ماقولتش ليك علي فترات تتعلم فيها اللغات اللي فوق دي لاني شخصيا اخدت فيها سنه ونص تقريبا ولسه باتعلم وفيه ناس اعرفهم اخدوا فيها شهور قليلة .. لغات البرمجة في العموم مالهاش قاعدة معينة في التعلم او الوقت اللي انت هاتستهلكه في طريقك فمش تقلق لو اتأخرت شوية .. لكن ماتنساش ان اهم حاجه التدريب وانك تغلط كتيير علشان تتعلم ... ربنا معاك ...
دلوقتي انت عندك توني ( موقع ) كامل الجسد والعقل والذاكرة وخواص الحركة والتفاعل مع الاخرين ... المشكله انه ضعيف و علي رأي حمو بيكا : ( جسمك ضعيف قويه ) فلازم نعمل حسابنا في اننا لسه ماتطرقناش لخطوات الحماية ... وكمان فيه حاجه تانية انت مش واخد بالك منها .. وهي نظام للتحكم ب توني .. لانك هتحتاج تبعتله أوامر ينفذها وتستقبل منه معلومات بطريقة منظمه .. نظام التحكم اللي هايكون اشبه بريموت الكونترول بتاع التليفزيون لسه فيه كلام كتيير وفيه انظمة تحكم جاهزة هاتساعدك كتير بإذن الله هاكلمك عنهم في مقالة تانية ... يبقي كده علشان مانتلخبطش :: كل اللي باقي هو نظام الحماية ونظام التحكم وأدوات إضافية هاتساعدك في انك تختصر طرق كتير خاصة في صناعتك لعقل الموقع ( backend ).
كل اللي باقي هانتعلمه بإذن الله لكن في خطة تانية لمجال ال CYBER SECURITY ومقاله هاتكلم فيها عن ال CMS وفيه أدوات ماتطرقناش ليها زي REACT JS , ANGULAR JS , VUE JS , NODE JS و laravel .. ولسه كمان انا عايز اعلمك ازاي تعمل chatbot ومقالة عن الووردبريس هاتتضمن حاجات ماتشرحتش باللغة العربية قبل كده بإذن الله .. ويعني ايه seo optimized theme ؟! وايه هو السيو اساسا اللي المفروض تكون عندك ولو علم بسيط عنه علشان تقدر تعمل موقع قوي من كل الجوانب ؟! .. هاشرحلك ايه الأدوات دي كلها بإذن الله في مقالات تانية كل اللي عليك انك تعمل متابعة للموقع وتفعيل للإشعارات من الصفحة الرئيسية للموقع علشان تكون متابع كل جديد ... وماتنساش تتابع جروبنا علي الفيسبوك من هنا علشان يوصلك كل المقالات والخطط الجديدة ..
** لو استفدت من المقالة اعمل شير علي السوشال ميديا ولو عندك إضافة او تعديل اكتبه في التعليقات , ولو عندك اسئلة كلمنا علي صفحة الفيسبوك او انشر سؤالك علي جروبنا من هنا ...