 |
| كيف تصبح مطور ويب فروند ايند Front - End Web Development - المسار الشامل |
كيف تصبح مطور ويب Front - End Web Development - المسار الشامل 🥰
-
المقال طويل شوي لكن كل كلمة فيها فائدة كبيرة
مقدمة عن المقال
الكثير من الناس اليوم يتجهون الي تعلم البرمجة والكثير منهم يفضلون برمجة الويب بالعموم وتصميم المواقع بالخصوص وهو مبرمجين الفرونت اند Front - End - الذين يقومون بتصميم الواجهة الامامية للموقع التي يراها المستخدم وفي الحقيقة هذا المجال من افضل المجالات المشروحة ولها مصادر عربية ممتازة عكس بعض المجالات الاخري , في هذا المقال سوف نشرح ما هو وظيفة الفرونت اند ووظيفته و اللغات التي يجب تعلمها لكي تصبح فرونت اند وذكر مصادر التعلم الخاصة بالمجال
تابع للنهاية
النقاط المهمة الي راح نتكلم عنها
- 📌 1 - ما هو ال Front - End Web Development
- 📌 2 - الخطوة الاولي :أهم الادوات اللازمة للبدأ :
- 📌 3 - الخطوة الثانية ماذا أتعلم لاصبح مصمم واجهات او Front - End:
- 📌 4 - تصميم ال Layout
- 📌 5 - إختصار الوقت أثناء كتابة ال Style
- 📌 6 - البدء بتعلم لغة JavaScript :
- 📌 7 - حل المسائل والمشاكل :
- 📌 8 - لغة Type Script :
- 📌 9 - النصائح الشاملة لتسريع تصميم موقعك. :
- 📌 10 - قابليتك لتعلم كل جديد. :
- 📌 11 - مصادر تعلم و كورسات
---------------------
📌 1 - ما هو ال Front - End Web Development
هو الشخص الذي يتعامل مع الواجهة الأمامية للموقع مثلا هو الذي يصمم شكل الازرار و و ضع الصور و الفيديوهات و كتابة الجمل و الكلمات مثل التي تقرأها الان و وضع التنسيقات و الأشكال المختلفة في الموقع , و لكي تصبح مصمم واجهات محترف هناك بعض الادوات اللازمة للتعلم
+ لو حابب تعرف اكثر هاذ المجال ف ممكن تشوف الفيديو البشمهندس اسامة الزيرو عن:
مالاتعرفه عن وظيفة ال Front-End Developer
--------------------
📌 2 - الخطوة الاولي :أهم الادوات اللازمة للبدأ :
لبدأ العمل في بيئة تصميم وتطوير الويب فأنت تحتاج لبرامج وإعدادات معينة في النظام لتسهيل العمل في هذا المجال.
 |
| كيف تصبح مطور ويب فروند ايند Front - End Web Development - المسار الشامل1 |
محررات الأكواد Code Editors
محررات الأكواد هي البرامج التي تقوم بكتابة ال Code البرمجي عليها وهناك الكثير من البرامج المشهورة على الساحة ويمكنك إختيار ما ترتاح له ومناسب لجهازك ونظام التشغيل الخاص بك ولا تقلق من أي شيء كلهم يقوموا بعمل نفس الفكرة وهذه قائمة بأحسن البرامج المشهورة على الساحة للإختيار من بينها وأذا أردت أن لا تتعب في الإختيار فأول برنامج هو أروعهم.
1 - Visual Studio Code
أفضل محرر أكواد برمجية هو محرر "Visual Studio Code" وهو محرر اكواد مجاني ومفتوح المصدر يعمل على جميع الانظمة ويندوز ، ماك ، لينكس .
يدعم جميع لغات البرمجة ، وفيه ملحقات واضافات لكل اللغات وامكانيات رائعة جدا مع سهولة ويسر الاستخدام مع امكانية اكتشاف الأخطاء الكتابية في الاكواد وتصحيحها .
-
+ دي الادوات و الاضافات الي راح تسهل عليك العمل باستخدام محرر الاكواد "Visual Studio Code"
40 من أفضل إضافات Visual Studio Code يجب أن تجربها
------
بقية محررات الاخري -
2 - Atom
3 - Brackets
4 - Sublime Text
5 - Komodo Edit
-------
هل يمكن تعلم البرمجة بالهاتف فقط بدون استخدام الحاسوب ؟
الاجابة - نعم بالطبع يمكنك أن تبرمج علي الهاتف الخاص بك و أرشح لك تطبيق Dcorder سريع و ممتاز ، و لكن في البداية فقط تستطيع أن تبرمج علي الهاتف ولكن ستحتاج حاسوب (كمبيوتر) فيما بعد بالطبع ولكن الشيء المهم أن تبدأ فوراً !
- وهناك الكثير من التطبيقات ستلقاها ايضا متاحة مجانا علي الهاتف لتعلم البرمجة كل ما عليك فعلة هوا كتابة اللغة التي تريد تعلمها علي المتجر
-------------------------
📌 3 - الخطوة الثانية ماذا أتعلم لاصبح مصمم واجهات او Front - End:
يجب عليك تعلم أهم لغات تصميم الويب والتي تبني بها صفحة الويب وتقوم بتنسيقها والتعامل معها وهي لغات
HTML 5
علشان يقدر يبني بنية الصفحة الأساسية Markup
CSS 3
علشان يتعامل مع الألوان والخطوط وال Visuals بصفة عامة
بعد تعلم هذة اللغات قم بتدريب نفسك علي الكثير من المشاريع اجلب بعض التصمميات الجاهزة وحاول تقليدها ولا تتوقف وتقول انتهيت من تعلمهم لان هذا المجال واسع جدا , لا تنتقل من لغة الي تعلم لغة اخري قبل اكتساب اكبر قدر ممكن من اللغة التي انهيتها والتطبيق عليها كثيرا
 |
| كيف تصبح مطور ويب فروند ايند Front - End Web Development - المسار الشامل2 |
دا التطبيق الاول اهو :
---------------
دا تطبيق ثانى اهو :
اضغط هنا للذهاب للتطبيق التاني
--------------
دي Playlist عليها HTML And CSS Templates من قناة الزيرو:
---------------
Flex Box
Animation
Media Queries
Grid
-
من افضل الاشياء التي تضيف الي تصميمك وعملك هو Animation حيث يعطي لموقعك شكل جميل وتجعلك تشعر وكأن الموقع حي ويجب تعلمه بشكل كبير لان هذا سيوفر عليك ما ستفعله بلغة الجافا سكريبت لذلك يجب معرفته باكبر قدر ممكن والتدرب و التطبيق الكثير عليه
------------------------------
📌 4 - تصميم ال Layout
 |
| تصميم layout -Front - End Web Development |
قبل الشروع في بدأ تصميم الموقع , الطريقة الاحترافية هي وجود سكتش تم تصميمه بواسطة UI/UX Designer ويكون هذا التصميم مكتمل من الوان وكتابات وخطوط باختصار هو الموقع لكن قبل تحويله الي كود بواسطتك وفي حالة انك تعلمت وظيفة ال UI/UX Designer بالطبع هذا يفيد لك الكثير حتي وان لم تعمل بها بهذة المهارة يمكنك مناقشة العميل علي بعض التصاميم وتقديم بعض الاقتراحات
Bootstrap
Foundation
Semantic-UI
Materialize - CSS
Tailwind CSS
جميع اطارات العمل هذه يمكنك مع الوقت صناعة مثلها بنفسك ولكن ميزة أن تعمل عليها هي أنها مشهورة ويعمل بها معظم مصممين العالم ولذلك يجب العمل بها معهم للكثير من الاسباب حيث أنه لا يمكنك عمل تصميم بإطار العمل الخاص بك
وبيعه مثلا أو إعطائه لعميل لا يعرف عن اطار العمل الخاص بك لأنه ببساطة لن يستطيع العمل عليه بعكس لو اعطيته التصميم بإطار عمل عالمي ومشهور سوف يتمكن من التعديل عليه بسهولة تامة إذا كان عنده علم به ولذلك ينصح بإستخدام اطر العمل
العالمية. أما بخصوص احترافك لأكثر من إطار عمل فإطمئن لان الموضوع سهل جدا ومعرفتك بلغات التصميم سوف تجعل الموضوع سهل جدا وتحتاج فقط لعمل تصميمين أو ثلاثة بكل إطار عمل لتستطيع معرفته بشكل جيد ولن نتكلم هنا عن الإحتراف فيمكنك أن تحترف إطار عمل واحد منهم وتكون على معرفة بأطر العمل الأخرى.
---------------------------
📌 5 - إختصار الوقت أثناء كتابة ال Style
حتى تصل لمرحلة الإحتراف في تعلم مسار الفرونت اند في عمل ملف Style الخاص بتصميمك يجب أن تتعلم واحد من ال CSS Pre - Processors الموجودة على الساحة مثل
SASS
LESS
Stylus
-------------------------
📌 6 - البدء بتعلم لغة JavaScript :
اللغة التي لا يستغنى عنها اي موقع في العالم ومدخلك للمكتبات وأطر العمل التي لا غنى عنها في سوق العمل حاليا وتعلمك للغة سوف يفتح لك الكثير في مجال تطوير ال Web ويجب عليك البدأ بتعلم اللغة نفسها قبل أن تدخل في التفرعات التي سوف تضيف لك الكثير وتعتبر لغة الجافا سكريبت من أكثر اللغات استخداما في العام ومبرمجين اللغة يتقاضون اعلي رواتب حسب احصائية موقع stack overflow.
تعلم لغة JavaScript
تعلم Document Object Model
تعلم Browser Object Model
معايير ال ES6, ES7, ES8
تعلم ECMAScript 6cript
Javascript Examples & Tutorials
JavaScript Big Tutorials
Create Template With HTML, CSS3, JavaScript
-------------------------------
📌 7 - حل المسائل والمشاكل :
أكثر ما يجعلك محترف في اللغة وفي أي مجال عموما هو حل المسائل والمشكلات وهذه أكثير الأشياء التي يقيسوا بها مستوى ال Developer وحل المشاكل سوف يفيدك كثيرا في عمل أي شيء يحتاج تفكير و Logic في عملك وهنا صفحة فيها أهم المواقع التي تحتوي على التحديات البرمجة التي يمكنك التسجيل فيها ثم إختيار لغة JavaScript وتبدأ بحل المشاكل.
+ دي افضل المواقع للتحديات البرمجية & Problem - Solving
1 - Coderbyte
2 - LeetCode
3 - Edabit
4 - Codewars
5 - HackerRank
6 - TopCoder
7 - Codeforces
-
ده مقال اتكلمت فيه عن "ازاي تبدأ Problem Solving"
لينك المقال :
------------------
+ ده كورس ال Problems Solving With JavaScript لقناة الزيرو
--------------------------------------
📌 8 - لغة Type Script :
 |
| لغة type script |
يجب عليك تعلم لغة TypeScript حتى تواكب العصر وتستطيع العمل على أطر العمل المشهورة والتي تعتمد على اللغة وإطمئن لن يصل إليك إحساس أنك تتعلم لغة جديدة فبفضل إحترافك للغة JavaScript سوف تجد الكثير من التشابه والاشياء السهل فهمها والتي مرت عليك من قبل كثيرا لذلك لا تعتبر انها لغة جديدة تتعلمها ولكن اعتبر انك تتعلم فقط Syntax جديد وميزات جديدة وطريقة أخرى في التعامل مع ال Functions
JavaScript Frameworks:
اطر العمل هي أهم ما تميز ال Front-End الناجح ولا غنى عنها في أي شركة الآن وهناك الكثير من اطر العمل المشهورة على الساحة والمطلوبة في كل مكان وكل بلد يتميز فيها اطار عمل عن الآخر وأنت تختار بناء على المكان الذي تعتبره هدف لأن تعمل فيه وأهم اطر العمل هذه هي
------
Angular
------
ReactJS
-----
Vue.JS
-----
يمكنك أن تخسر كل مجهودك الي أضعته في تنفيذ تصميم موقع بسبب الأداء السيء ولذلك من أهم الاشياء التي يقوم بيها أي Front-End محترف هو أن يهتم بالأداء الخاص بالموقع حيث أن السرعة تضيف الكثير لقيمة الموقع وتوفر الكثير من الوقت على الناس خصوصا لو كانت مواقع خدمية لشركات كبيرة أو وزارات فلكل ثانية ثمنها ولذلك يجب أن تتعلم الكثير عن طرق إختصار الكود وضغط الصوروكيفية تسريع موقعك وكيف تقوم بعمل الفكرة بأقل كود ممكن وأسرع طريقة برمجة لا تكلف المتصفح الكثير من حيث السرعة وتتفادى الأخطاء التي يقع فيها الكثير من الناس في التصميم
------------------------------------------
📌 9 - النصائح الشاملة لتسريع تصميم موقعك. :
تعلم ال Version Control:
- تعد واحدة من أهم الاشياء التي يجب تعلمها ببساطة تمكنك من رفع مشاريعك حيث انه في حالة حدوث مشكلة للجهاز المخزن عليه المشروع يمكنك استعادة مشروعك والتعديل عليه ببساطة او اذا كان احد يريد مراجعة الكود دون ان يفسد الكود او يقوم بتخريبه , ولها الكثير من الفوائد العظيمة الاخري ولذلك يجب عليك تعلم ال Git والتعرف على أعظم مواقع ال Source Control وهو موقع Git & Github
ودا كورس بسيط اهو من قناة Elzero Web School :
--------------------------------------------
📌 10 - قابليتك لتعلم كل جديد. :
من أهم ما يعجب الشركات في اي موظف هو قابليته للتعلم ومعرفة مهارات جديدة وهناك الكثير من المحترفين يدخلون الشركة وبعد سنوات لا يزيد مستواهم ولا يعرفوا مهارات جديدة والكثير من الشركات تكره هذه الحالة ولذلك يجب عليك أن يكون عندك شغف لتعلم أشياء جديدة كل يوم وتطوير مهاراتك واللغات التي تعلمتها كل يوم.
طبعا المجال يتطور يوميا وتظهر فيه الكثير من التقنيات والمقال تحدثت فيه عن أهم المهارات التي لا غنى عنها والآن يمكنك أن ترى القائمة الكاملة للمهارات بما فيهم المهارات الإحترافية التي سوف تضيف لك الكثير أيضا:
-
HTML5
-
CSS3
-
JavaScript, DOM, BOM
-
ECMAScript [ 6, 7, 8, … ]
-
JSON, AJAX
-
JavaScript Frameworks [ Angular || Reactjs || Vuejs ]
-
Front-End Frameworks [ Bootstrap || Foundation || Bulma || Tailwind CSS ]
-
CSS Preprocessor [ SASS || LESS || PostCSS ]
-
HTML Template Engine [ Pugjs || HAML || Slim ]
-
Task Runner [ Gulpjs || Gruntjs || Web Pack ]
-------------------------------
المهارات الإحترافية التي تجعل منك Front-End Developer ماهر جدا
-
JavaScript Unit Testing [ Jasmine || Jest ]
-
Command Line
-
Git, Github
-
Problem Solving
-
RESTful Services and APIs
-
GraphQL
-
Design Patterns => Free
---------------------------------------
📌 11 - مصادر تعلم و كورسات لكي تصبح Front - End Web Development :
-
⛔ دى بعض الترشيحات لكورسات البشمهندس الغالي (Osama Mohamed) فى كلا المجالين :
-
1 - كورسات ال Front - end Development :
كورس ال HTML
------------
كورس ال CSS
-----------
كورس ال JavaScript - الجديد
----------
JavaScript OPP
----------
JavaScript DOM
----------
JavaScript BOM
---------
JavaScript ES6
---------
كورس ال Bootstrap
--------
كورس ال Sass
--------
كورس ال jQurey
----------------------------
👈 دلوقتي هنقدم لكم اقوي الكورسات المجانية في مجال ال Web Development بشكل عام
 |
| كيف تصبح مطور ويب فروند ايند Front - End Web Development - المسار الشامل |
🔹️️ كورسات على منصة Udemy ومعارف 💐
كورس Bootstrap Tutorial باللغة العربية
----------
كورس UX UI Design
1- دورة UX/UI design معتمد بشهادة
2-دورة Adobe Experience Design UI UX معتمد بشهادة
---------
كورس Object Oriented Programming using Java
----------
كورس Complete Ruby Tutorial for Beginners
------------------------
🔹️️كورسات مجانيه بشهادات Microsoft
----------------------------
+ روابط اضافية ممكن تفيدكم
-
مسار Front-End Developer | أكاديمية الزيرو
-------------
دي بعض ال Front-End Tutorials والنصائح والحيل الي ممكن اتفيدك كمان
-----------------------
في النهاية ونصيحتي هي ان تعمل او تمارس تصاميم خاصه بك لتتعلم وتتمكن من هذا المجال 😊
اذا كان لديك اي سؤال حول البرمجة لا تتردد في طرحه في التعليقات 💬
يارب يكون البوست فعلا افادكم حتى لو بمعلومه بسيطه ❤
---------------------------------------------
ال Back-End Developer
طبعا مسار الباك ايند وغيرة من المسارات التانية والكورسات العظيمة وبشهايد معتمدة هتلاقيها في قسم كورسات علي الموقع
علشان تذهب للقسم قم بالضغط علي التالي
--------------
متنساش تدعي للقائمين علي الموقع بالنجاح والتوفيق