يجب عليك تعلم أهم لغات تصميم الويب والتي تبني بها صفحة الويب وتقوم بتنسيقها والتعامل معها وهي لغات
HTML, HTML5
CSS, CSS3
بعد تعلم هذة اللغات قم بتدريب نفسك علي الكثير من المشاريع اجلب بعض التصمميات الجاهزة وحاول تقليدها ولا تتوقف وتقول انتهيت من تعلمهم لان هذا المجال واسع جدا , لا تنتقل من لغة الي تعلم لغة اخري قبل اكتساب اكبر قدر ممكن من اللغة التي انهيتها والتطبيق عليها كثيرا
Flex Box
Animation
Media Queries
Grid
من افضل الاشياء التي تضيف الي تصميمك وعملك هو Animation حيث يعطي لموقعك شكل جميل وتجعلك تشعر وكأن الموقع حي ويجب تعلمه بشكل كبير لان هذا سيوفر عليك ما ستفعله بلغة الجافا سكريبت لذلك يجب معرفته باكبر قدر ممكن والتدرب و التطبيق الكثير عليه
*تصميم ال Layout
قبل الشروع في بدأ تصميم الموقع , الطريقة الاحترافية هي وجود سكتش تم تصميمه بواسطة UI/UX Designer ويكون هذا التصميم مكتمل من الوان وكتابات وخطوط باختصار هو الموقع لكن قبل تحويله الي كود بواسطتك وفي حالة انك تعلمت وظيفة ال UI/UX Designer بالطبع هذا يفيد لك الكثير حتي وان لم تعمل بها بهذة المهارة يمكنك مناقشة العميل علي بعض التصاميم وتقديم بعض الاقتراحات
Bootstrap
Foundation
Semantic-UI
MaterializeCss
Tailwind CSS
جميع اطر العمل هذه يمكنك مع الوقت صناعة مثلها بنفسك ولكن ميزة أن تعمل عليها هي أنها مشهورة ويعمل بها معظم مصممين العالم ولذلك يجب العمل بها معهم للكثير من الاسباب حيث أنه لا يمكنك عمل تصميم بإطار العمل الخاص بك وبيعه مثلا أو إعطائه لعميل لا يعرف عن اطار العمل الخاص بك لأنه ببساطة لن يستطيع العمل عليه بعكس لو اعطيته التصميم بإطار عمل عالمي ومشهور سوف يتمكن من التعديل عليه بسهولة تامة إذا كان عنده علم به ولذلك ينصح بإستخدام اطر العمل العالمية. أما بخصوص احترافك لأكثر من إطار عمل فإطمئن لان الموضوع سهل جدا ومعرفتك بلغات التصميم سوف تجعل الموضوع سهل جدا وتحتاج فقط لعمل تصميمين أو ثلاثة بكل إطار عمل لتستطيع معرفته بشكل جيد ولن نتكلم هنا عن الإحتراف فيمكنك أن تحترف إطار عمل واحد منهم وتكون على معرفة بأطر العمل الأخرى.
*إختصار الوقت أثناء كتابة ال Style
حتى تصل لمرحلة الإحتراف في تعلم مسار الفرونت اند في عمل ملف Style الخاص بتصميمك يجب أن تتعلم واحد من ال Css PreProcessors الموجودة على الساحة مثل
SASS
LESS
Stylus
*لغة 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
*حل المسائل والمشاكل
أكثر ما يجعلك محترف في اللغة وفي أي مجال عموما هو حل المسائل والمشكلات وهذه أكثير الأشياء التي يقيسوا بها مستوى ال Developer وحل المشاكل سوف يفيدك كثيرا في عمل أي شيء يحتاج تفكير و Logic في عملك وهنا صفحة فيها أهم المواقع التي تحتوي على التحديات البرمجة التي يمكنك التسجيل فيها ثم إختيار لغة JavaScript وتبدأ بحل المشاكل.
لغة Type Script
يجب عليك تعلم لغة TypeScript حتى تواكب العصر وتستطيع العمل على أطر العمل المشهورة والتي تعتمد على اللغة وإطمئن لن يصل إليك إحساس أنك تتعلم لغة جديدة فبفضل إحترافك للغة JavaScript سوف تجد الكثير من التشابه والاشياء السهل فهمها والتي مرت عليك من قبل كثيرا لذلك لا تعتبر انها لغة جديدة تتعلمها ولكن اعتبر انك تتعلم فقط Syntax جديد وميزات جديدة وطريقة أخرى في التعامل مع ال Functions
JavaScript Frameworks
اطر العمل هي أهم ما تميز ال Front-End الناجح ولا غنى عنها في أي شركة الآن وهناك الكثير من اطر العمل المشهورة على الساحة والمطلوبة في كل مكان وكل بلد يتميز فيها اطار عمل عن الآخر وأنت تختار بناء على المكان الذي تعتبره هدف لأن تعمل فيه وأهم اطر العمل هذه هي
Angular
Reactjs
Vuejs
يمكنك أن تخسر كل مجهودك الي أضعته في تنفيذ تصميم موقع بسبب الأداء السيء ولذلك من أهم الاشياء التي يقوم بيها أي Front-End محترف هو أن يهتم بالأداء الخاص بالموقع حيث أن السرعة تضيف الكثير لقيمة الموقع وتوفر الكثير من الوقت على الناس خصوصا لو كانت مواقع خدمية لشركات كبيرة أو وزارات فلكل ثانية ثمنها ولذلك يجب أن تتعلم الكثير عن طرق إختصار الكود وضغط الصوروكيفية تسريع موقعك وكيف تقوم بعمل الفكرة بأقل كود ممكن وأسرع طريقة برمجة لا تكلف المتصفح الكثير من حيث السرعة وتتفادى الأخطاء التي يقع فيها الكثير من الناس في التصميم
النصائح الشاملة لتسريع تصميم موقعك.
تعلم ال Version Control:
تعد واحدة من أهم الاشياء التي يجب تعلمها ببساطة تمكنك من رفع مشاريعك حيث انه في حالة حدوث مشكلة للجهاز المخزن عليه المشروع يمكنك استعادة مشروعك والتعديل عليه ببساطة او اذا كان احد يريد مراجعة الكود دون ان يفسد الكود او يقوم بتخريبه , ولها الكثير من الفوائد العظيمة الاخري ولذلك يجب عليك تعلم ال Git والتعرف على أعظم مواقع ال Source Control وهو موقع Git & Github
/أنظمة إدارة المحتوى المشهورة
*الكثير من الشركات لا تعمل بنظام البرمجيات الخاصة وتتجه لل Open Source ومعظم الشركات تعمل على نظام WordPress حيث أن شهرته كبيرة جدا وتستخدمه مواقع عالمية كثير وحيث أنه يحتوى على مميزات رائعة وثيمات كثيرة في الاسواق وإضافات كثيرة جدا ايضا وهناك الكثير من أنظمة إدارة المحتوى الموجودة على الساحة مثل
WordPress
Joomla
Drupal
ولذلك وكالعادة يجب عليك تعلم نظام واحد منهم بإحتراف شديد ولا تنسى إلقاء نظرة على باقي الأنظمة وإطمئن كالعادة فمعرفتك بلغة البرمجة المبرمج بها النظام مثلا PHP سوف تسهل عليك تعلم النظام مادام هناك ال Documentation الخاص به مع وجود مواقع مثل Stackoverflow لتبحث عن المشكلات والاشياء التي تواجهك. ولذلك يجب أن تغطي نقطة أنظمة إدارة المحتوى حتى لا تفقد فرصة وظيفية تطلب مطور واجهات عنده خبرة في نظام WordPress أو أي نظام من الأنظمة الاخرى فبعد معرفتك بال Syntax وطريقة عمل النظام سوف تبدأ العمل مباشرة ولن يعيقك أي شيء.
Mastering WordPress
قابليتك لتعلم كل جديد
*من أهم ما يعجب الشركات في اي موظف هو قابليته للتعلم ومعرفة مهارات جديدة وهناك الكثير من المحترفين يدخلون الشركة وبعد سنوات لا يزيد مستواهم ولا يعرفوا مهارات جديدة والكثير من الشركات تكره هذه الحالة ولذلك يجب عليك أن يكون عندك شغف لتعلم أشياء جديدة كل يوم وتطوير مهاراتك واللغات التي تعلمتها كل يوم.
طبعا المجال يتطور يوميا وتظهر فيه الكثير من التقنيات والمقال تحدثت فيه عن أهم المهارات التي لا غنى عنها والآن يمكنك أن ترى القائمة الكاملة للمهارات بما فيهم المهارات الإحترافية التي سوف تضيف لك الكثير أيضا:
HTML, HTML
CSS, 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
Algorithm + Data Structure
Design Patterns => Free
إرسال تعليق