في العالم الحديث ، يرغب المزيد والمزيد من الناس في تعلم كيفية البرمجة ، بينما لا يعرفون من أين يبدؤون ، ولكن في نفس الوقت ، فإن صناعة تكنولوجيا المعلومات هي ما يحلمون به لأن كونك مبرمج ويب أصبح الآن رائجًا. بالنسبة للعديد من الأشخاص ، فإنها تضع الخطوة الأولى في هذا العالم الرائع ، مثل مطوري الويب أو مطوري الواجهة الأمامية المبتدئين ، وتطوير الواجهة الأمامية الأساسية. ومع ذلك ، عليك أن تبدأ من مكان ما قبل أن تتمكن من العثور على وظيفة أحلامك. إليك كتاب المعرفة للمبتدئين للحصول على بعض الإجابات: هل توجد دورة مجانية لمطوري الواجهة الأمامية؟ كيف تتعلم بنفسك على الإنترنت ، أين تجد المواد التعليمية لإتقان HTML و CSS و JavaScript. إذا كنت تعرف HTML و CSS ، فيمكنك التقدم بالفعل لشغل منصب مصمم تخطيط الويب.
ما هي أساسيات تطوير الواجهة الأمامية؟
قد يكون دخول عالم برمجة الويب أمرًا صعبًا على الأشخاص الجدد. الكثير من المفاهيم تبدو غريبة وتصبح إشكالية في مرحلة الكتابة. كيف تكتب: مطور برامج أم مطور أمامي؟ ربما مطور الواجهة الأمامية ، أو بالأحرى مهندس برمجيات الواجهة الأمامية؟ ومع ذلك ، فإن الأكثر شيوعًا هو إدخال الواصلة. مطور الواجهة الأمامية - الشخص المسؤول عن الجزء المرئي من التطبيق (ما نراه ، نحن = مستخدمي الموقع).
عادةً ما يعمل مطور الواجهة الأمامية مع مصمم جرافيك (مصمم الويب) الذي يوفر التصميم الجرافيكي. غالبًا ما تتاح لمطوري الواجهة الأمامية فرصة العمل مع مصمم UX الذي يقترح ويخلق نموذجًا أوليًا للتفاعلات التي ستحدث على مواقع الويب. يتمثل دور مطوري الواجهة الأمامية في تجميع كل ذلك معًا. يُقال بشكل شائع أن مطور الواجهة الأمامية مكلف بقطع تصميم رسومي - تقسيم التصميم إلى أجزاء أصغر والتشفير (HTML و CSS) إلى مواقع ويب يستخدمها المستخدمون في النهاية.
ثم ، باستخدام JavaScript ، تمت إضافة التفاعلات المذكورة سابقًا. بينما يسمح لنا HTML و CSS3 بإنشاء انتقالات سلسة ورسوم متحركة أساسية ، يقدم JavaScript جميع تفاعلات مستخدم الصفحة المتقدمة. باستخدام JavaScript ، سنضيف قائمة منسدلة ، وشريط تمرير على الصفحة ، والتحقق من صحة النموذج ، والانتقالات بين الصفحات الفرعية أو الرسوم المتحركة المتقدمة ، والألعاب ثلاثية الأبعاد (على سبيل المثال ، باستخدام Babylon-JavaScript). بيانات المنطق في JavaScript من النهاية الخلفية للتطبيق ، ومن هنا تعاون الواجهة الأمامية - مطور الواجهة الخلفية.
سوف تختلف مواقف المطور الأمامي بشكل كبير. سيبدو عمل مطور الواجهة الأمامية في وكالة تفاعلية وإبداعية ، ومطور الواجهة الأمامية في شركة تطوير برمجيات ، مختلفًا ، ووظيفة مختلفة لشخص يعمل على تطوير الواجهة الأمامية لشركة ناشئة .
يمكن لمطور الواجهة الأمامية من قطع المشاريع الرسومية أن يتطور إلى مطوري JavaScript - وهو مبرمج ويب يتعامل بشكل أساسي مع كتابة منطق التطبيق وعمليات JavaScript المتقدمة. بالإضافة إلى ذلك ، غالبًا ما يتعين على مطور الواجهة الأمامية (بالإضافة إلى مطور الواجهة الخلفية) تخطيط بنية JavaScript للتطبيق واختيار الأطر والمكتبات الخاصة بالمشروع بوعي.
هل تطوير الواجهة الأمامية سهل؟
- يمكنك رؤية التأثير بسرعة. على عكس تعلم تطوير الويب / التطوير الخلفي ، فإن إنشاء أجزاء من التعليمات البرمجية حتى في HTML خالص يمنحنا على الفور تأثيرات بصرية ، مما يحفزنا على مواصلة العمل.
- عتبة دخول منخفضة - مطلوب عدد قليل نسبيًا من المهارات الأمامية لبدء مهنة مهنية في تدريب داخلي أو منصب مبتدئ في البداية.
- الكثير من عروض العمل للناشئين - خاصةً عند اقتراب الإجازات ، وهناك الكثير من التدريبات الصيفية.
- الاستقلالية - يمكننا الاهتمام بإنشاء مواقع ويب لأنفسنا ومن ثم الحصول على الطلبات بصفتنا مستقلين. بعد كل شيء ، في النطاق الأساسي ، يجب أن نكون قادرين على إنشاء مواقع ويب بسيطة من الألف إلى الياء.
ماذا نحتاج لتطوير الواجهة الأمامية؟
ها هي وصفة النجاح. لإنشاء موقع على شبكة الإنترنت ، تحتاج إلى:
HTML + CSS
هذه هي المكونات الأساسية لبناء موقع على شبكة الإنترنت. يوفر HTML بنية مواقع الويب - العناصر الموصوفة ، ويخبر CSS المتصفح بالشكل الذي يجب أن تبدو عليه هذه العناصر. بمجرد إتقان HTML و CSS ، يمكنك إعادة إنشاء أي تصميم (رسومي) وتحويله إلى موقع ويب.
جافا سكريبت
لغة تطوير الواجهة الأمامية لبرمجة الويب لإنشاء مواقع الويب. بفضل JavaScript ، يمكنك إضافة تفاعل إلى موقع الويب الخاص بك ، أي أنك تقوم بتطوير مواقع الويب التي تستجيب لإجراءات المستخدم. يمكنك حتى بناء الألعاب. نوصي بإتقان كود JavaScript الأساسي على الأقل لفهم كيفية عمل اللغة أو منطق لغة برمجة الويب. ثم يمكنك الانتقال إلى jQuery.
مسج
من الناحية الفنية ، إنها ليست لغة بل مكتبة جافا سكريبت. مثل الوسيط الذي يسمح لك بكتابة JavaScript بشكل أسهل وأسرع. أدخلت كود jQuery ؛ تقلق المكتبة عليك وتلعب مع المترجم لتمرير معنى JavaScript المعقد قليلاً إلى المتصفح. على الرغم من أن jQuery اليوم "قديم بعض الشيء" ، إلا أننا نوصي بتعلمه "عند الطلب" ، فإنه يسهل تعلم منطق برمجة الويب و Bootstrap (إطار عمل CSS المستخدم) ولا يزال يظهر في عروض العمل.
إطار أعمال
تتمثل مهمتهم في تبسيط عملية إنشاء مواقع الويب والتطبيقات من خلال توفير حلول جاهزة لأكثر المشكلات شيوعًا. بالإضافة إلى ذلك ، فإنها توفر نمطًا لكيفية تطوير التعليمات البرمجية الخاصة بك بطريقة مرتبة. بالنسبة للمبتدئين ، نقترح اختيار إطار عمل CSS واحد ، على سبيل المثال ، Bootstrap (الخيارات الأخرى هي: Foundation و Pure و YAML CSS) ، ثم إضافة أحد أطر عمل JavaScript الشائعة حاليًا: Angular 4 و ReactJS و Vue.js و Ember.js و Meteor.js.
شخص سخيف
لا يرتبط هذا مباشرة بتشفير الويب ، والذي نفهم أنه غالبًا ما يتأخر حتى النهاية. خطأ ، كلما أسرعت في استخدام Git ، كان نظام التحكم في الإصدار أفضل ، وهذا هو الترتيب الذي اقترحناه. بالطبع ، يمكنك القيام بذلك بشكل مختلف تمامًا: تخطي jQuery وتعلم Bootstrap فور إتقان أساسيات HTML و CSS ؛ ومع ذلك ، ننصحك بعدم المبالغة في التبسيط ومنع نفسك من البحث عن حلول مكتوبة بخط اليد ، وعدم استخدام المباني الجاهزة من إطار عمل أو تعلم أطر عمل جافا سكريبت بالكاد تستطيع الحصول على سطر في جافا سكريبت خالص.
من أين أبدأ بتطوير الواجهة الأمامية؟
تعلم بانتظام ، وحاول تطبيق كل مهارة جديدة في الممارسة ، حتى في أجزاء صغيرة من التعليمات البرمجية لغرض واحد فقط - لإظهار ما أتقنته للتو. شاركهم على الويب. قم بالحد من المجموعات التحفيزية على Facebook. بعد 3 ساعات فقط من قراءة القصص التحفيزية ، غالبًا ما لا تكون أكثر تحفيزًا بثلاث مرات. عادة ما يكون لديك 3 ساعات أقل لدراستك.
شاهد السوق واقرأ المتطلبات في عروض العمل. إنهم يتغيرون! نكتب هذا المنشور اليوم وربما نحتاج إلى تحديثه في غضون عام مع تغير التكنولوجيا. بمجرد أن تتعلم الأساسيات: HTML CSS JavaScript ، هناك شيء جديد لا بد أن يكون رائجًا - قم بتحديث قائمة "التعلم". ابحث عن ورش عمل مجانية (للتعلم من الموجهين وإجراء اتصالات مثيرة للاهتمام في وقت واحد) والتدريب الصناعي في أسرع وقت ممكن. ستكون الوظيفة أفضل معلم.
ما هو مثال تطوير الواجهة الأمامية؟
HTML + CSS
من المحتمل أن تكون ثلاثة مواقع هي الأكثر شهرة بدورات تطوير تفاعلية للواجهة الأمامية للويب. إنها مجانية ومنظمة تنظيماً جيداً ، وتنقل المعرفة إلى المبتدئين بسهولة بالغة. لديهم دورات تفاعلية في المتصفح. لا نحتاج إلى تثبيت أي شيء في المنزل ، نحن فقط نقوم بالدورة ، ويتم قياس تقدمنا على الفور.
أكاديمية خان ، وأكاديمية الترميز ، والمدارس المنزلية
تحتوي Khan Academy على مواد مجانية تمامًا ولديها أيضًا خيار استخدام لغات الويب الأخرى. هذه منصة تعليمية ، لا تتعلق فقط بتطوير الويب. يمكنك تنفيذ مهام مختلفة ، من العناصر الأساسية ، بما في ذلك HTML و CSS ، إلى نصوص JavaScript النصية الأكثر تقدمًا.
يحتوي Codecademy على الكثير من الأشياء المجانية ومسارات التطوير الأمامية المبنية مسبقًا والمثيرة للاهتمام والتي لا تتوفر إلا للمستخدمين المحترفين.
مدرسة البرمجة - في رأينا ، الدورة الأكثر تنظيماً. وهي تتكون من مقاطع فيديو + جزء تفاعلي به مهام تطوير أمامية. المستوى الأول من كل دورة مجاني ، لكن للأسف ، عليك أن تدفع مقابل الباقي. ومع ذلك ، حتى الأجزاء المجانية (عادة حوالي ساعة واحدة) تستحق المشاهدة.
كيف تختار دورة لتأخذها؟
انظر جميع منصات الويب الثلاثة. تتداخل الموضوعات ، لكن الأمر يستحق الخوض في بعض الموضوعات المكررة. أولاً ، التكرار يعزز المعرفة ، وثانيًا ، كل منصة أمامية لها نهج مختلف قليلاً في التدريس. الخيار لك. يرغب الكثير من الأشخاص في الدفع مقابل دورة تدريبية شهرية في Bootcamp أو دورة تطوير الويب ، حيث يتوفر كل شيء مجانًا في متناول أيديهم. لا شيء غير طبيعي.
أسوأ شيء هو أن لدينا العديد من المواد ونريد أن نتعلم كل ما نحتاجه بسرعة ، دون التحقق أو الاختيار - احصل على كل شيء على الدرج واذهب خطوة أخرى إلى ما هو أبعد من المواد الأساسية. لذلك ، نحن نتفهم أنه إذا لم يكن لديك وقت لجميع الدورات التدريبية الأمامية وأن عملية صنع القرار ليست من اهتماماتك ، فراجع Khan Academy: مقدمة إلى HTML CSS — Web Development.
جافا سكريبت
ماذا ستكون دورة تطوير الواجهة الأمامية بدون استخدام JavaScript؟ المواقع التفاعلية أعلاه رائعة. لديهم دورات JavaScript لنا - لطيفة ، بسيطة ، للأسف ليست شاملة جدًا ، ولكنها جيدة للإحماء. إذا كان لديك بالفعل أساسيات HTML و CSS على هذا النحو ، فلن تحتاج إلى البدء بالاقتراحات السابقة.
للبدء بـ 9 تمارين تطوير قصيرة في المقدمة: بواسطة JavaScript ، يمكنك البناء على نفس المواضيع في Udacity: مقدمة JavaScript ، ثم (أو على الفور) انتقل إلى مجموعة أكبر من المهام: HTML / JavaScript: إنشاء ويب تفاعلي الصفحات.
مسج
خطوة أخرى على طريقنا الأمامي ، لكنها اختيارية للغاية. حاليًا ، يمكن لدورة تطوير الواجهة الأمامية الاستغناء عن jQuery. نظرًا لوجود العديد من الخيارات الجديدة والمثيرة لمطوري الواجهة الأمامية اليوم ، فقد نظرنا في عروض العمل ، ولا يزال الأمر يستحق التوفر.
نعم ، لدى Khan Academy و Codecademy دورات في jQuery. ومع ذلك ، في هذه الحالة ، أود أن أوصي - بتجربة دورة تطوير الواجهة الأمامية لـ jQuery Pluralsight (مدرسة البرمجة السابقة) لمدة ساعة ومجانية تمامًا.
أطر التعلم
في هذه المرحلة ، يمكنك اختيار مواد الواجهة الأمامية بنفسك وتقييم مدى ملاءمتها لمعرفتك. عندما يتعلق الأمر بإطار عمل Bootstrap ، فإن إنشاء موقع ويب يعتمد على شبكة مكونة من 12 عمودًا ، وهذه المعرفة أساسية لفهم الباقي عمليًا. يتيح لك Bootstrap إنشاء مواقع ويب سريعة الاستجابة (RWD) - على سبيل المثال ، تتكيف مع الأجهزة المحمولة. إذا كنت تفضل التعلم في شكل برنامج تعليمي: تتوفر دورة bootstrap في Code Academy ، وباستخدام Daily Web ، ستقوم بإنشاء أول شريط تمرير للتمهيد في 30 دقيقة.
أطر جافا سكريبت
في الوقت الحالي ، يجب أن تقدم دورة تطوير الواجهة الأمامية اللائقة بالتأكيد أطر عمل JavaScript المستخدمة حاليًا وتدرس واحدًا على الأقل. يمكنك العثور على دورات تفاعلية مع أطر عمل على Pluralsight (مدرسة Code سابقًا) ، والتي تكون مجانية لمدة 14 يومًا. يمكنك العثور على مجموعة غنية جدًا من المواد المجانية على scotch.io. من ناحية أخرى ، يعد إلغاء الاشتراك حيث ستجد دورات تطوير أمامية مجانية لكل إطار موضوعًا لمنشور منفصل.
هناك العديد منهم. الاختيار صعب ، والتعرف عليهم جميعًا مستحيل. أيهما تختار أن تبدأ به ، فقط التزم به. لا تقفز من زهرة إلى زهرة لأنه بعد أسبوع من تعلم تطوير الويب ؛ سيخبرك أحدهم أن الآخر أفضل. تعلم الأول واكتب تطبيق ويب بسيطًا عليه. عادةً ما يوصى بالمبتدئين بالتطبيقات مثل المخططين وقوائم المهام وأخبار الترتيب. كل ما تحتاجه هو اسم الإطار واسم تطبيق الويب الذي تريد إنشاءه.
أمثلة على الدورات المجانية:
- أنجولار جي إس
- Angular 2+ (حاليًا 6 — لكن 4/5 مجرد إصدار تطوير أمامي آخر)
- ReactJS
- Vue.js
- Ember.js
هل هي النهاية؟ لا! هذه بداية ممتازة وأساس متين لـ Junior Front-End Developer.
ماذا بعد هذه الدورات؟
ابدأ بالعمل على مشاريع الويب الخاصة بك. كما كتبنا في البداية ، قم بتوثيق عملك من أول خطوات تطوير الواجهة الأمامية ، ووضع الكود على GitHub ، حتى لو كان بعيدًا عن المثالية.
هل تريد اختبار نفسك؟
أفضل طريقة لترسيخ ما تعلمته هي من خلال الممارسة. يعد الدخول في الدورة التدريبية الأمامية أمرًا واحدًا ، ولكن العمل فقط على مشروعات الويب الخاصة بك يعلمك الترميز — لحل المشكلات بنفسك. قم بإنشاء نموذج (صفحة مقصودة) يمكنك من خلاله إرسال بريد إلكتروني إلى مؤلف الصفحة.
أنشئ موقع الويب الخاص ببطاقة العمل - المحفظة - فكر في استخدام JavaScript لملء الجدول بتسلسل Fibonacci أو شريط التمرير أو لعبة بسيطة من البداية. هل تعتقد أن لديك بالفعل مهارات في البرمجة ولكن لا تمتلك مهارات رسومية ، لذا فإن التطور الذي تقوم به "قبيح"؟ مرحباً بك! اختر تصميمًا رسوميًا جاهزًا ، على سبيل المثال ، من تحدي التطوير الأسبوعي ، وحاول إنشائه.
كم من الوقت يستغرق لتعلم الأساسيات؟
انه يعتمد عليك. الانضباط هو الأهم. يجد معظم الناس صعوبة أكبر في تعلم لغة برمجة الويب ولكنهم يأخذون الوقت الكافي لأخذ دورات لا تكلف شيئًا. يمكن أن يستغرق إتقان الأساسيات لإنشاء موقع الويب الأول الخاص بك حوالي 1-3 أشهر ، اعتمادًا على مدى طموحك في تطوير الواجهة الأمامية.
لإتقان JavaScript ، أود إضافة 3 أشهر أخرى من التعلم الجاد. أفترض أنك تعمل ، لذلك ستخصص حوالي 5-10 ساعات في الأسبوع للتعلم ، أي ساعة واحدة على الأقل في اليوم. لن تصبح متخصصًا في الواجهة الأمامية في غضون ستة أشهر ، ولكن هذا وقت كافٍ لإنشاء قاعدة لمزيد من التعلم.
ابحث عن المساعدة عبر الإنترنت
أكثر من مرة أثناء التعلم ، ستواجه مشاكل: كيف تركز عنصر؟ لماذا هذا البرنامج النصي لا يعمل؟ يبدو HTML و CSS مختلفين على Chrome عن Firefox. كيف تصبح محترفًا في تطوير الواجهة الأمامية؟
هذا أمر طبيعي ، لكن من يسأل لا يخطئ.
- Google —اسأل Uncle Google ، ويفضل أن يكون ذلك باللغة الإنجليزية.
- Stack Overflow— من المحتمل أن يكون أول من ينبثق الردود من Stack Overflow. إنها بوابة مطور ويب حيث ينشر المستخدمون أسئلة متعلقة بلغة برمجة الويب ، ويحاول الآخرون (عادةً مبرمجو الويب الأكثر خبرة) إعطائك إجابة حول تطوير الواجهة الأمامية. أفضل الحلول السابقة هي النقاط ، ويمكن لمؤلف السؤال تحديد تعليق أدى إلى حل مشكلته. في بعض الأحيان ، هناك عدة حلول أو عشرات الحلول ، لذلك يجدر قراءة كل هذه الحلول والتحقق منها في مكانك. إذا ساعدك أي من الحلول ، فقم بالتصويت - أعطه سهمًا لأعلى.
- Facebook —يمكن لمجموعات التطوير الأمامية على FB للمبتدئين مساعدتك كثيرًا ، خاصةً عندما لا تعرف كيف تسأل عن مشكلتك. قم بتحميل الشاشة والرمز الخاص بك. لا تتوقع من شخص ما أن يكتبها لك ، لكن التعليقات ستقودك بالتأكيد إلى الطريق الصحيح. لسوء الحظ ، مع الأسئلة البسيطة البسيطة ، سيكتب الناس دائمًا شيئًا مزعجًا - إنه صعب ، تحلى بالصبر. نوصي بمجموعة الويب — بدء الدعم هو الأفضل للأسئلة المتعلقة بالشركات الناشئة ، ويتأكد الوسطاء من عدم وجود كراهية.
- CanIUse - إذا كانت مشكلتك متعلقة بأن CSS لا يعمل على أحد المستعرضات لديك ، فتأكد من أن ما تستخدمه مدعوم للإصدار الذي تتحقق منه. بهذه الطريقة ، ستتجنب عمليات البحث الطويلة والمملة عن مشكلات الواجهة الأمامية الشبحية.
استنتاج
لذلك ، في هذه المقالة ، تعرفت على المزيد عن عالم تكنولوجيا المعلومات ، وسنكون سعداء إذا تمكنا من مساعدتك في التوجيه. عالم الواجهة الأمامية هائل ، وقد يكون من السهل على المبتدئين أن يضيعوا فيه ، لكننا نركز على مساعدة الناس على السير على الطريق الصحيح. ولكن لاحظ أيضًا أنه بالإضافة إلى لغات الويب التقليدية ، هناك لغة برمجة ويب لا تحتوي على كود . إلى أن أصبحت الأدوات الخالية من الأكواد متاحة على نطاق واسع ، كان تطوير تطبيقات الويب يتم حصريًا بواسطة مبرمجي الويب.
لحسن الحظ ، الوقت ينفد ، والآن يمكن لأي طالب على دراية بالمواد إنشاء تطبيق الويب أو الصفحة المقصودة الخاصة به. بعد تعلم الأساسيات ، حتى على مستوى المعرفة و HTML و CSS ، يمكنك بالفعل العثور على وظيفة أحلامك. لاحظ العديد من العلماء أن لغة برمجة الويب تحسن القدرات البشرية وتساهم في تطوير المهارات الشخصية. في النهاية ، هذا هو استقلالك المالي. نحن نعرف أشخاصًا مختلفين من عالم الواجهة الأمامية الذين أطلقوا شركاتهم الناشئة وقاموا بأشياء ضرورية لصالح كوكبنا.
وبالطبع ، فإن مثل هذا النهج له مزايا:
- سهولة في الاستخدام وقوة كبيرة.
- مكتبة قوالب كبيرة.
- دعم تحديد المعلمات المختلفة.
تعد لغة البرمجة الخالية من الشفرات أو لغة البرمجة المرئية طريقة جديدة حيث لا يتعين عليك كتابة تعليمات برمجية من البداية. نحن نشجعك على استخدام الأدوات بواجهة رسومية ، وهي مستقبل تطوير الويب. تعد تطبيقات الويب الأمامية التقليدية أشياء رائعة ، لكننا نعتقد أنك بحاجة إلى الابتكار ، لذلك قد يكون منتجنا مفيدًا لك. نتمنى بصدق إيجاد الطريق الصحيح لإتقان مهنة المبرمج. هذا الطريق شائك ، لكن إذا أتقنته ، فسوف يرضيك طوال حياتك التي قضيتها في هذا الوقت.
