اذا كنت ممن يحبون البرمجة والتعامل مع الكواد فا انت في المكان الصحيح, ولكن أريدك ان تعرف عزيزي القارئ ان هذا المقال بالكامل قد كتب خصيصا لمن يحبون تطوير الواجهات الامامية للمستخدم, وجميع الروابط المذكورة في هذا الشرح قد جمعتها بعد فترة بحث طويلة جدا, ولكن فائدة هذا المقال بالكامل هو توجيهك إلي المسار الصحيح حتي أسهل عليك الأمر في عملية البحث عن مصدر موثوق تبدأ منه رحلة بداية تعلمك للبرمجة.
اولا عزيزي القارئ يجب ان تعرف بعض المعلومات عن الإنترنت, وكيف يعمل بشكل عام, وماذا يعني كلمو دومين او Domain, ومتصفح وغيرها من المصطلحات التي سوف تتعامل معها في مجال الويب هذا الشرح كافي جدا ليعطيك فكرة عامة عن هذه المواضيع : تعلم البرمجة | كيف يعمل الانترنت ؟
أساسيات تعلم لغات HTML, CSS & Javascript
ثانيا يجب ان تتعلم اللغات الأساسية للمجال وهم لغات HTML & CSS & JAVASCRIPT وسأقوم بإعطائك بعض المعلومات البسيطة عن هذه اللغات قبل التعمق فيها :
HTML هي اللغة الوصفية لبناء هيكل الموقع بالكامل, تخيل معي عزيزي القارئ انك تريد بناء بيت جديد, أساس البيت سيكون لغة اتش تي ام ال.
CSS هي لغة وصيفة لتحديد شكل وتصميم الموقع, كما ذكرت سابقا ان HTML هي أساس البيت فا CSS تقوم بعمل شكل جمالي للمنزل (التشطيب يعني 😂).
Javascript هي لغة برمجة تقوم بإعطاء الروح والتفاعلية للموقع بعد التصميم, وهذه بعض الفيديوهات البسيطة لبدأ تعلم أساسيات الثلاث لغات في فترة بسيطة ولكن كل ماعليك فقط هو التركيز وتطبيق كل ماسوف تتعلمه في هذه الفيديوهات.
تعلم أساسيات HTML فى ساعة ونصف : من هنا
تعلم أساسيات CSS فى ساعتين : من هنا
تعلم أساسيات Javascript فى ساعة : من هنا
التعمق في تعلم لغات البرمجة HTML, CSS & Javascript
الأن بعد ان أخذنا فكرة عن كيفية عمل الويب وأيضا فكرة عن لغات البرمجة المستخدمة في بناء هيكل المواقع نبدأ في التعمق في كل منهم علي حدا وسأترك لكم بعض القنوات العربية الموثوقه للتعمق في لغات البرمجة المستخدمة في هذا الشرح :
تعلم لغة HTML باللغة العربية 2021 - Learn HTML In Arabic 2021 : من هنا
تعلم لغة CSS باللغة العربية 2021 - Learn CSS In Arabic 2021 : من هنا
تعلم لغة JavaScript بالعربية - Learn JavaScript In Arabic : من هنا
الادوات والمكتبات الخاصة بلغات البرمجة
من أهم ادوات الـ CSS : مكتبة SASS وتعطيك مجموعه من المميزات والخواص لتحسين طريقة كتابة الكود داخل CSS وهي مطلوبة جدا في سوق العمل.
مكتبة jQuery من أهم مكتبات لغة JavaScript, وينبغي عليك ان تأخد ولو نظره عامة عنها, وإستخدام هذه المكتبة بدأ يقل في السنوات الأخيرة لكنها مازالت مطلوبة في سوق العمل.
تعلم الاضافات والتحديثات الجديدة فى اللغة المعروفة بإسم ES6+.
قم بإختيار واحدة من هذه المكتبات وقم بتعلمها Angular or React.js or Vue.js فهذه المكتبات أصبحت ضرورية ومطلوبة بشكل كبير فى سوق العمل, وهذا الفيديو يوضح لك كيف تختار بين هذه اللغات : مقارنة مفصلة React Vue Angular + كيف تختار الفريم ورك الأنسب لك ؟
وأيضا هذا الفيديو يشرح أساسيات react.js : كورس تعلم React
وهناك الكثير من المكتبات الجاهزة للعمل وهي عبارة عن أكواد جاهزة للإستخدام لتسريع عملية تطوير الموقع ومن أشهر هذه المكتبات Bootstrap وهي مكتبة اكواد للـ Css & javascript ويوجد مكتبات أخري ولكن هذه أشهرهم وبتعلهما سيكون من السهل عليك تعلم أي مكتبة أخري.
أدوات بيئة العمل في لغات البرمجة
- Command Line
- version control system : GIT
- Task runners : NPM scripts or Gulp
- Modules Bundlers : webpack or parcel
بناء المشاريع
أكب خطأ يقوم به المبتدأين هو الشرح النظري دون تطبيق عملي مع انتهاء كل شرح, يجب أن تبني مشروح واحد علي الأقل بما تعلمته, وحين تصل إلي النهاية سيكون معك مجموعه من المشاريع التي تستطيع ان تبني بها معرض اعمالك, وكلما زادت قوة اعمالك زادت فرصتك في الحصول علي وظيفة مناسبة لك.
وهذا تلخيص كامل بالمسار والترتيب الذي يجب ان تتبعه او تبدأ من خلاله :
- HTML
- CSS & SASS
- Command line , Npm Scripts
- javascript , jquery , ES6+
- Bootstrap
- GIT & Github
- Vue or React
- Webpack & Parcel
هذا هو المسار الكامل بالترتيب الصحيح, وانا أعرف ان البعض سيقول انا تعلم CSS اولا ثم HTML - عزيزي الأمر يعود إليك لتبدأ في تعلم ما سوف تختاره من هذه اللغات, والمهم هو أن تبدأ فقط, وفي نهاية هذا الشرح سأترك لك رابط مسار Front-End Developer لأستاذي الفاضل اسامة الزيرو حيث سيكون هذا المسار مرشدك الكامل الي ان تصبح مطور واجهات مستخدم.