Category: FrontEnd Development
مبرمج تصميمات صفحات الويب (FrontEnd Developer) هو الشخص المسؤول عن برمجة الشكل الظاهري لموقع الويب الذي يراه المستخدم حين فتحه من متصفح الويب وتتم برمجة تصميم صفحات الموقع باستخدام لغات HTML, CSS, JavaScript. فى هذا المسار يبدأ معك من البداية وحتى الجاهزية لسوق العمل مع دراسة مكتبة ReactJs في نهاية المسار اﻷكثر طلبا فى سوق
11 Topics
الـ HTML هي اللغة الام لاى موقع الكتروني ولا تعتبر الـ HTML لغة برمجة وانما هي لغة ترميز (Markup Language) وتستخدم في بناء البنية التحتية لأي صفحة ويب من حيث بناء عناصرها من قوائم وفقرات وصور وعناوين وغيرها و كلمه HTML هي اختصار لـ HyperText Markup Language وتعمل لغة HTML بنظام الوسوم (tags) وهي لغه سهله جدا يمكن لأي شخص تعلمها بدون سابق خبره.
الـ CSS هي اللغة المستخدمة في تنسيق وزخرفة صفحات الويب بعد ان تم تأسيسها بلغة HTML وهي اللغة الوحيدة المسؤولة لفعل هذا على جميع مواقع الويب وتعتبر لغة CSS لغة تنسيق وليس برمجه وكلمة CSS اختصار لـ Cascading Style Sheet وتعتبر لغة CSS أكثر اللغات سهولة في التعلم بعد HTML.
هذا الكورس تطبيق عملى على ما تم تعلمه فى لغتى HTML و CSS كما يتم تنفيذه فى سوق العمل وذلك من خلال تحميل تصميم لقالب جاهز PSD ثم العمل ملف القالب خطوة بخطوة لتحوبله من تصميم (صورة) الى موقع ويب باستخدام لغات HTML و CSS
جافا سكريبت هي لغة برمجة لها قدره كبيره على التحكم في متصفحات الانترنت وبالتالي صفحات الويب وتُستخدم في مجال برمجة واجهات صفحات الويب لتضفي عليها الكثير من التفاعلية والمرونة والتحكم في طريقة عرض عناصر صفحة الويب و لهذه الوظائف تم ابتكارها، اما الان اصبح للغة JavaScript باع كبير جدا في كل شيء يعرض على الانترنت وتتميز بكثرة المكتبات والإطارات التي تعتمد عليها لتفعل كل شيء تقريبا.
الـ JQuery هى مكتبة تم تطويرها باستخدام لغة الجافا سكريبت لتسهيل الاستفادة بقدرات لغه الجافا سكريبت ولكن بطريقه ابسط واسهل واسرع في كتابه الكود فلك ان تتخيل ان ما تكتبه في سطور بلغة JavaScript لعمل شيء يمكنك كتابته في كلمات باستخدام مكتبة JQuery وكلمة JQuery هي اختصار لـ JavaScript Query.
الـ BootStrap هو إطار عمل (مكتبة برمجية جاهزة) من إنتاج شركة تويتر مبنى على لغات HTML و CSS و JavaScript يشمل مجموعة من المكونات الجاهزة التى يستخدمها مبرمجوا واجهات صفحات الويب (UI) مما يُسهل مرحلة انشاء تصميم صفحات الويب ويجعلها أسرع وأدق ومن أهم هذه المكونات هو Grid System الذي يُتيح لك برمجة صفحات ويب متجاوبة (التحكم فى طريقة عرض الصفحة حسب حجم الشاشة كمبيوتر او موبايل او تابلت).
الـ SASS هي إمتداد للغة CSS يتيح لك استخدام العديد من الخصائص البرمجية في كتابه شفرات CSS مما يسهل عملية التنسيق (Styling) بشكل كبير وجعلها اسرع وكلمة SASS اختصار لـ Syntactically Awesome Style Sheets وتعني كتابه CSS بشكل أفضل. ويستخدم SASS غالبها في المشاريع الكبيرة التي تحتوي ملف CSS كبير حيث يمكنك من تجزئته إلى ملفات أصغر و استخدام المتغيرات لتوحيد عملية التغيير في جميع الملفات باﻷضافة الى ميزات اخرى كثيرة ستتعرف عليها فى كورس SASS.
تطبيق عملى بإستخدام بوتستراب ضمن دبلومة FrontEnd وذلك بإستخدام لغات HTML و CSS و JavaScript واطار عمل Bootstrap حيث سيتم تصميم قالب من البداية الى ان يكون جاهز للعمل على جميع احجام الشاشات (Responsive) ويبدأ المشروع بملف PSD لتصميم القالب ثم تحويله خطوة بخطوة الى صفحة ويب جاهز كاملة كما يتم فى سوق العمل لـ FrontEnd Developers
هي تقنية يستخدمها المبرمجون أثناء برمجة المشاريع لتسهيل مرحلة برمجة المشروع من خلال حفظ نسخ من المشروع بعد كل تعديل يتم عليه وبالتالي إمكانية الرجوع الى اى نسخة منه وامكانية دمج شغل المبرمجين مع بعضهم البعض دون تضارب اﻷكواد حتى وان كان مستوى التعديل لأكثر من مبرمج على نفس الملف، ويتم تنصيب برنامج الـ Git على الكمبيوتر واستخدامه في أكثر من مشروع ويتبع كل مشروع على حدة. ويمكنك باستخدام تقنيه git حفظ المشاريع وكل التعديلات التي أجريت عليها على مستودعات الويب لمشاركتها مع اى شخص واشهرها Github و Bi
ES6 بدايتاً هي اختصار لكلمتي (Ecma Script) و 6 هو رقم الاصدار، وهي عباره عن مجموعه من المعايير تضّمن طريقة كتابة موحدة لتطوير لغه الجافا سكريبت وبالتالي طريقه استخدامها من قبل المبرمجين. لغه الجافا سكريبت هي لغة مفتوحة المصدر يستخدمها العديد من الشركات وتقوم كل شركة بالاضافه والتطوير عليها لذا وجب توحيد منهجية آلية التعديل حتى يسهل استخدام لغة JavaScript من قبل المبرمجين واشهر اصدار هو ES6 وهو السائد بين اكبر شركات.
ReactJs هي مكتبه مبنية على لغة الجافا سكريبت من انتاج شركة الفيسبوك (Meta)، تعمل على تبسيط إمكانيات لغه الجافا سكربت فى التعامل مع واجهة صفحات الويب (UI) ويعتبر من أكثر المنافسين لإطار عمل Angular Js المُنتج من قبل شركة جوجل وتتميز React Js بخفتها وسهولة استخدامها مقارنة بالانجلر ويتم استخدامها بشكل واسع من طرف مطوري واجهات صفحات الويب (Frontend Developers) واكثر في برمجة تطبيقات الموبايل باستخدام React Native.