تعلم البرمجة من الصفر: [الدليل الشامل]خريطة تعلم الويب للمبرمج المبتدئ

 

ما تحتاج إلى تعلمه لتصبح مطورًا متطورًا للواجهة الأمامة             frontEndDevelopment

المقدمة 

يعد تطوير الويب مجالًا متغيرًا باستمرار - الطريقة التي نبني بها مواقع الويب اليوم مختلفة تمامًا عما فعلناه قبل عامين. مع توفر العديد من الأدوات والأدوات الجديدة التي تظهر كل يوم ، يتساءل مطورو الويب دائمًا عن الأداة التي يجب استخدامها.

 وهي قائمة بالأدوات والتقنيات لأي شخص يريد تعلم الواجهة الأمامية أو الخلفية أو العمليات المتعلقة بتطوير الويب ،

أولا ، أود أن ألخص بإيجاز الدوافع لإنشاء خرائط الطريق هذه. بالإضافة إلى ذلك ، تحتوي خارطة الطريق على بعض إخلاء المسؤولية.

التحفيز

تطور تطوير الويب بشكل ملحوظ وسريع. هناك الكثير من الخيارات المتاحة في الواجهة الأمامية وأنت تتساءل عن الخيار الذي تختاره.

المرحلة 1 - التحضير للعمل

إذا كنت مبتدئًا وترغب في تعلم تطوير الويب ، فقم بإلقاء نظرة على خريطة الطريق التالية وتوقف عن القراءة أكثر. أكمل العناصر المدرجة في خريطة الطريق هذه ، واستخدمها لإكمال بعض المشاريع ، ثم عد مرة أخرى.

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

المرحلة الثانية - كتابة CSS بشكل أفضل

بمجرد الانتهاء من تغطية أساسيات تطوير الويب ، انتقل إلى الخطوة التالية وتعلم كيفية كتابة CSS (ورقة الأنماط المتتالية) قابلة للصيانة وكيفية استخدام إطار عمل CSS. خارطة الطريق هي كما يلي:

المرحلة 3 - الإطلاق

ستستغرق هذه الخطوة بعض الوقت ، لكنها ستكون خطوة بالنسبة لك للدخول في تطوير الواجهة الأمامية المتطورة. نحتاج إلى معرفة المزيد عن JavaScript. أنت بحاجة إلى فهم مفهوم Webpack ولماذا تحتاجه. تعرف على ماهية Babel ، ولماذا تستخدمه ، وكيفية دمج Bebel مع Webpack ، وأخيراً كيفية استخدام ESLint للتحقق التلقائي من التعليمات البرمجية الخاصة بك. جميع العناصر المدرجة في هذه المرحلة مرتبطة بـ Webpack.

بعد الانتهاء من هذه الخطوات ، ستتمكن قريبًا من البدء في فهم أحدث تقنيات تطوير الواجهة الأمامية. بعد الانتهاء من هذه المرحلة ، أكمل الخطوات التالية للحصول على فهم قوي لأداة البناء.

المرحلة الرابعة - أحدث تطبيق للواجهة الأمامية

الخطوة التالية هي التعرف على بعض الأطر الأمامية. هناك العديد من الخيارات ، ولكن الأكثر استخدامًا هذه الأيام هي React و Angular و Vue. من بينها ، أوصي بـ React.

ستتعلم React أولاً ، ثم القليل من الإعادة ، وبعد ذلك ستتعرف على عمليات CSS باستخدام Java Script. إذا كنت مهتمًا ، فقد ترغب أيضًا في دراسة Styled Components ووحدات CSS النمطية.

بمجرد أن تتعرف على React ، تحتاج إلى التعرف على PWA (تطبيق الويب التقدمي). لا ينبغي أن يكون هذا صعبًا للغاية لأنك تتعلم عن إطار عمل الواجهة الأمامية. ألق نظرة على قائمة مراجعة PWA للتعرف على العاملين في الخدمة ، وقياسات الأداء ، وكيفية استخدام المقاييس ، والتخزين ، والموقع ، والإشعارات ، ومعلومات الجهاز ، والمدفوعات ، والمزيد لمعرفة واجهات برمجة تطبيقات المتصفح التي يمكنك استخدامها بفعالية. تعرف على نماذج RAIL (الاستجابة والرسوم المتحركة والبطالة والتحميل) وأنماط PRPL (الدفع والتقديم والتخزين المؤقت المسبق والتحميل البطيء).

بمجرد أن تتعلم ذلك ، يجب أن تكون قادرًا على تسمية نفسك بأحدث مطور الواجهة الأمامية. تأكد من تكرار ما تعلمته. إذا كنت تبحث عن فكرة ، فإليك قائمة بالمهام التي يمكنك الاختيار من بينها.

المرحلة 6 - مدقق ثابت

يعد فحص النوع الثابت هو أفضل البرامج التي يمكن أن تساعدك في الحفاظ على التعليمات البرمجية الخاصة بك أثناء نموها ، وزيادة السرعة عند تغيير البرامج ، وتحسين دعم IDE. نحن نستخدم Flow و TypeScript بشكل أساسي لفحص النوع الثابت. ومع ذلك ، فقد تم تحسين TypeScript ، لذلك نوصي باستخدامه.

مهمة

الآن بعد أن فهمت TypeScript ، حان الوقت لتحويل أي من تطبيقات JavaScript الموجودة لديك لاستخدام TypeScript.

المرحلة السابعة - عرض جانب الخادم

تتمتع تطبيقات العرض من جانب الخادم بأداء أفضل من تطبيقات العرض من جانب العميل ، كما أن نتائج تحسين محركات البحث (SEO) أفضل أيضًا. هذا ليس مطلوبًا ، ولكنه سيساعدك بالتأكيد في تطوير تطبيق أمامي أفضل. هناك العديد من الخيارات المتاحة بناءً على إطار عمل الواجهة الأمامية الذي تختاره. ومع ذلك ، إذا اخترت React.js ، فيجب عليك استخدام Next.js ، مما يسهل SSR (العرض من جانب الخادم).

مهمة

لنستخدم Next.js لتحويل التطبيق الذي تم إنشاؤه أعلاه ليتم عرضه على جانب الخادم.

المرحلة 8 ما بعد

كل شيء مكتوب في هذه المرحلة اختياري وليس مطلوبًا ، ولكن إذا كنت ترغب في تجربته ، فتابع القراءة.

من أجل الإيجاز ، أود أن تفهم الصورة بأكملها حتى تتمكن من فهمها أثناء التعلم ، بدلاً من ذكر الحقائق الأساسية بالتفصيل.

خارطة طريق مكتملة

تم وصف خريطة الطريق بالكامل أدناه ، بما في ذلك بعض التفاصيل الإضافية.

ربما لا تزال خريطة الطريق هذه مفقودة ، ولكن هذا هو كل ما تحتاجه "لتطوير الواجهة الأمامية". والشيء المهم هو ممارستها بشكل متكرر قدر الإمكان. قد تشعر بالخوف في البداية وتشعر أنك لا تفهم شيئًا. ومع ذلك ، ستشعر أن فهمك قد تعمق بمرور الوقت.

منقول بتصرف