الطريقة الصحيحة لبدء رحلتك مع العمل الحرّ

اهلا و سهلا بكم فى موقع كيان المبرمج المصرى.. تحدثنا فى المره السابقه عن

الback-end ما هو و كيف تتعلمه؟

و كان هناك اعجاب شديد من الجمهور و يريدون ان نكمل السلسله و نتحدث عن باقى الاقسام و كان هناك طلب كثير على مقاله الfront-end لذلك:

اليوم سنتعرف على المسار الكامل باذن الله لإحتراف مجال ال Front-End Development بكل ما يحتويه المسار من دورات تعليمية وأدوات ونصائح ومواقع ومراجع تفيدك أثناء رحلة التعلم, إستعد للإبحار في رحلة التعلم  وتأكد أنك إنتهيت من كل خطوة قبل الذهاب للخطوة التالية.

المهارات الأساسية

1- تعلم لغة HTML

لبدأ حياتك في مجال ال Web يجب عليك تعلم لغة تصميم الصفحات والتي لا يمكن الإستغناء عنها سواء كنت Designer أو Developer وهي لغة Html.

الدورة: هنا

التكليفات: هنا

المراجع: هنا

خطة الدراسة: هنا

و هكذا تكون انتهيت من الخطوه الاولى.

----------------------------------------

2- تعلم لغة CSS

لغة CSS هي اللغة المسؤولة عن تنسيق صفحات ال Web وهي التي تتيح لك إستعمال الألوان والخطوط والأبعاد وكل ما يجعل من الصفحة الشكل الجميل الذي تراه ولا غنى عنها طبعا.

الدورة: هنا

التكليفات: هنا

المراجع: هنا

خطة الدراسة: هنا

و هكذا تكون انتهيت من الخطوه الثانيه.

----------------------------------------

3- تصاميم HTML+CSS

هذه المرحلة هي أهم مراحل حياتك وهي التطبيق العملي على ما تعلمته نظريا وهي التي سوف تميزك عن باقي الناس وهي التي تجعلك محترف. وهنا سوف تجد كل ما تحتاجه في حياتك للتطبيق على لغة HTML + CSS. سوف تتعلم منه كل ما تحتاج بداية من كيفية إنشاء مشروع جديد بشكل سليم وحتى رفع التصميم على موقع Github وعمل نسخة للمشاهدة لترسلها للناس.

جميع التصاميم و الاختبارات: هنا

و هكذا تكون انتهيت من الخطوه الثالثه.

----------------------------------------

4- تعلم لغة JS

الدورة: هنا

التدريبات: هنا

المسائل: هنا

عمل تصميم: هنا

و هكذا تكون انتهيت من الخطوه الرابعه.

مرحلة ال Frameworks

1- عمل تصميم متجاوب

دورة تعليمية لتصميم موقع كامل متجاوب ( Responsive ) بدون إستخدام اي اطار عمل ( Framework ) لتعلم كل ما يخص ال Media Queries وكيف تتحكم في جميع عناصر الموقع في كل شاشة وتغير شكلها لما هو مناسب لكل شاشة أو Device وميزة الدورة التعليمية هي تعليمك المفهوم الاساسي لمعنى كلمة متجاوب وبعد تعلمها سوف تجد الموضوع سهل جدا عند إستخدام اي اطار عمل ( Framework ) لأنك فهمت الفكرة العامة..

الدوره: هنا

و هكذا تكون انتهيت من الخطوه الاولى.

----------------------------------------

2- UI KITS & FRAMEWORKS

أطر العمل هي أهم شيء سوف تستعمله في حياتك لأنها توفر عليك الوقت والجهود وبالنسبة للشركات أهم شيء هو توفير الوقت وايضا الميزة في أن تعمل على اطار عمل مشهور هو أن الجميع يعمل به وسوف يسهل على أي شخص التعديل على ال Code الخاص بك والعكس وهناك الكثير من اطر العمال مشهورة على الساحة مثل Bootstrap, Foundation, Tailwind CSS, Bulma واخترنا لك أشهرهم حاليا وهو Bootstrap.

الدوره: هنا

و هكذا تكون انتهيت من الخطوه الثانيه.

المهارات المتقدمة للوصول للإحتراف

1- تعلم لغة SASS

لغة Sass هي عبارة عن إمتداد للغة Css تضيف عليها مميزات برمجية رائعة توفر عليك الكثير من الوقت والجهد وتقوم بتنظيم وترتيب مشروعك بشكل جميل وتجعل إحتمالات الخطأ ضئيلة جدا. وإذا أردت الإحتراف في الجزء الخاص بال Front-End فلا غنى عن تعلم هذه اللغة حتى تستطيع أن تطور من لغة Css كثيرا جدا.

الدورة: هنا

تصميم: هنا

موقع اللغه: هنا

تجربه الكود: هنا

و هكذا تكون انتهيت من الخطوه الاولى.

----------------------------------------

2- تعلم لغة PUGIS

ال Pugjs عبارة عن Template Engine تقدم لك مميزات لغات البرمجة أثناء كتابة HTML Code وهذه المميزات توفر عليك الوقت والمجهود أثناء إنشاء صفحات ال Web.

الدورة: هنا

موقع اللغه: هنا

و هكذا تكون انتهيت من الخطوه الثانيه.

----------------------------------------

3- تعلم JEST FRAMEWORK

من أهم المهارات التي تفرق الشخص العادي من المحترف هي مهارة إختبار الوحدات في التطبيق ( Unit Testing ) وسوف نتعلم ال Unit Testing في لغة JavaScript بواسطة اطار عمل Jest وفي حالة فهمت الفكرة العامة سوف تستطيع إستخدام أي اطار عمل آخر بسهولة.

الدورة: هنا

مرجع1: هنا

مرجع2: هنا

مرجع3: هنا

و هكذا تكون انتهيت من الخطوه الثالثه.

----------------------------------------

4- تعلم GULPJS

كلما زاد مستواك في المجال كلما قمت بعمل الكثير من المهام التي تتكرر يوميا وسوف تحتاج لمن يثوم بعملها بدلا منك وهذا دور ال Task Runners والتي يوجد منها الكثير ومن أسهلهم Gulpjs.

الدورة: هنا

مقاله: هنا

و هكذا تكون انتهيت من الخطوه الرابعه.

----------------------------------------

5- تعلم VUE.JS

اطار عمل Vue.js واحد من اطر العمل الجميلة جدا والسهل جدا في تعلمه والذي سوف يفيدك في حياتك جدا ك Front-End Developer لتستطيع التعامل مع ال API’s والبيانات.

الدورة: هنا

مقاله: هنا

و هكذا تكون انتهيت من الخطوه الخامسه.

مهارات عامه و لكنها مهمه

1- تعلم Command Line مع برنامج Cmder.

تعلمك لل Command Line سوف يجعلك تتطور كثيرا في عملك وخصوصا في مجال ال Development والمجالات الأخرى مثل ال System Administration وسوف توفر عليك الكثير من الوقت والجهد عن طريق الأشياء التي يمكن عملها بواسطة ال Commands وفي هذه الدورة التعليمية بعض الأوامر الهامة التي سوف توفر عليك الكثير مع بعض أسرار ال Command Line الهامة.

الدوره: هنا

----------------------------------------

2- تعلم Git & Github للحفاظ على مشاريعك.

ال Git & Github يمكنك من العمل بإحترافية داخل بيئات العمل الكبيرة وتحافظ على ملفاتك وتقوم بعمل إصدارات من المشاريع التي يتم العمل عليها وتتعلم الطريقة الإحترافية للتعاون مع الفريق وإخراج مشروع محترم. وبدونها لن تكون محترف ولن تتمكن من العمل في بيئات العمل الكبيرة

Git + Github : هنا 

التدريب على Git: هنا    

هكذا اصبحت

..FRONT-END DEV

كان معكم محمد كمال و السلام عليكم.