5 مشاريع يجب أن تحتويها حافظة أعمالك كمطور فرونت اند مبتدئ
يُعد تطوير الواجهة الأمامية (Frontend development) مجال سريع النمو وتنافسي يتطلب منك الكثير من المهارات والإبداع. وإذا كنت ترغب في التميز عن باقي المبرجين وإظهار قدراتك، فأنت بحاجة إلى معرض أعمال (Portfolio) قوي يحتوي على مشاريع تظهر خبراتك ومهاراتك.
في هذا المقال، سنستعرض معك أشهر خمسة مشاريع يجب أن تمتلكها كمبرمج مبتدئ في معرض أعمالك، وكذلك أمثلة عملية لهذه المشاريع وكيفية بنائها باستخدام دورات ومسارات برمجية احترافية. ومن خلال إكمال هذه المشاريع، ستتعلم تقنيات جديدة وتحسن مهاراتك في حل المشكلات وتكتسب الثقة في مسيرتك المهنية كـ Frontend developer.
5 مشاريع تحتاج للتطبيق عليها كمطور فرونت اند مبتدئ
1. تطبيق توقعات حالة الطقس (Weather Forecast App project)
يجب أن تتعلم أساسيات البرمجة وتفهمها جيدًا قبل أن تبدأ بتعلم أي شيء له علاقة بالفرونت اند أو أي مجال أخر، وينصح بتعلم الأساسيات عن طريق لغة بايثون وخصوصًا للمبتدئين من غير خريجي علوم الحاسب؛ ويُعد هذا التطبيق مشروعًا عمليًا يمكن أن يساعدك على تطبيق ما تتعلمه من أساسيات البرمجة بلغة برمجة بايثون.
يعرض هذا التطبيق حالة الطقس بناءً على مكان محدد يستطيع أن يختاره المستخدم، ويعرض بشكل لحظي للمستخدم معلومات مثل درجة الحرارة، والرطوبة، وسرعة الرياح، وفرص هطول المطر.
لإنشاء تطبيق توقعات حالة الطقس، ستحتاج إلى استخدام Python للتعامل مع البيانات والمنطق، وتحتاج أيضًا إلى استخدام واجهة برمجة تطبيقات (API) لاستيراد بيانات الطقس من مصدر خارجي، بجانب استخدام تقنيات أخرى.
إذا كنت ترغب في تعلم كيفية إنشاء تطبيق مثل هذا، يُمكنك التسجيل في مسار تعلم أسس البرمجة عن طريق بايثون، حيث ستتعلم البرمجة من الصفر، وتبني بنفسك 6 مشاريع إضافية بجانب مشروع تطبيق حالة الطقس.
تُوضح الصورة التالية مثال بسيط لتطبيق توقعات حالة الطقس أنشئه أحد طلاب منصة المدرسة خلال مسار أسس البرمجة.
2. مشروع بناء موقع شخصي (Portfolio Website project)
المشروع الثاني الذي يجب أن تمتلكه هو موقع الويب الخاص بك، وهذا هو المكان الذي يُمكنك فيه عرض مهاراتك وخبراتك ومشاريعك السابقة والمستقبلية، وكذلك إنجازاتك لأصحاب العمل والعملاء المحتملين. هذا المشروع سيكون بمثابة خطوتك الأولى في عالم تطوير الفرونت اند (Frontend development).
لإنشاء موقع شخصي بسيط، تحتاج إلى تعلم استخدام HTML وCSS؛ حيث تستخدم HTML لبناء الهيكل الأساسي لأي موقع، وتستخدم CSS لتنسيق شكل الموقع وإضافة شكل جمالي ومتناسق عن طريق إضافة الألوان وعناصر التصميم الأخرى. وستحتاج أيضًا إلى تحسين موقع الويب الخاص بك من حيث الأداء (performance) وإمكانية الوصول (accessibility) وغيرهم.
ألق نظرة على هذا الموقع الشخصي الذي أنشئه أحد طلابنا بنفسه خلال رحلة تعلمه لمسار بناء المواقع التفاعلية باستخدام HTML and CSS على منصة المدرسة.
3. مشروع صفحة هبوط (Landing page project)
يُعد هذا المشروع من أهم المواقع التي ستقوم ببنائها، حيث تُستخدم صفحة الهبوط (Landing page) في الترويج عن خدمات أو منتجات الشركات أو الأفراد، مما يُكسبك مهارات تنافسية في سوق العمل الحقيقي. سيساعدك هذا المشروع على تعزيز مهاراتك في عالم تطوير الويب كمطور فرونت اند؛ حيث ستقوم ببناء الهيكل الأساسي للصفحة وتنسيقها، وكذلك إضافة مميزات الخدمة أو المنتج وغيرهم الكثير من أساسيات أي موقع أو صفحة ويب.
لإنشاء صفحة هبوط، تحتاج إلى استخدام HTML و CSS و JavaScript لبناء هيكل وشكل صفحة الويب. تحتاج أيضًا إلى استخدام أدوات مثل Google Fonts و Font Awesome لإضافة خطوط وأيقونات إلى الصفحة، وأيضًا استخدام تقنيات مثل CSS Grid و CSS Variables وFlexbox وFloat لإنشاء تخطيطات احترافية لموقعك، تحتاج أيضًا لتعلم تقنيات أخرى مثل Responsive web design لتجعل صفحة الويب تتناسب مع جميع أحجام الأجهزة المختلفة، وSASS لتتعرف كيفية تسهيل وتنظيم كتابة كود CSS الخاص بك، وCSS Animations لتضيف حركات وتأثيرات جذابة وتفاعلية للصفحة.
يُمكنك تعلم كل ما سبق وأكثر، وبناء صفة هبوط احترافية من خلال التسجيل في مسار بناء مواقع ويب تفاعلية ومتجاوبة باستخدام HTML وCSS. حيث ستتعلم كيفية تصميم وبناء مواقع ويب احترافية وعالية الجودة باستخدام أحدث تقنيات تطوير الويب وأفضل الممارسات من خلال 5 دورات احترافية، بجانب إنشاء أيضًا 3 مشاريع أخرى بجانب هذا المشروع. بعد هذا المسار ستكون مستعدًا للدخول إلى عالم جافا سكريبت التي تُعد من أشهر لغات البرمجة الموجودة في العالم.
يمكنك رؤية مثال عملي لصفحة هبوط أنشئها أحد طلابنا المتميزين في الصور التالية.
4. مشروع لعبة بسيطة مثل تيك تاك تو (Tic Tac Toe Game project)
إذا كنت تستطيع بناء المشاريع السابقة بنفسك بدون أي صعوبات، وباستخدام التقنيات التي ذكرناها سابقًا فتهانينا لك، أنت الآن لديك مهارات جيدة في أساسيات البرمجة وHTML وأيضًا CSSومستعد للانتقال إلى لغة برمجة أخرى مثل جافا سكريبت وتعلم المزيد حول مجال تطوير الواجهة الأمامية.
تُعد لعبة تيك تاك تو (Tic Tac Toe Game) أو أي لعبة أخرى بمثابة مشروع تطبيقي يُمكن أن يساعدك على تعلم كيفية استخدام JavaScript لإنشاء تطبيق تفاعلي وممتع يسمح للمستخدمين باللعب والتفاعل ضد الكمبيوتر أو لاعب آخر.
لإنشاء لعبة مثل تيك تاك تو أو ألعاب بسيطة مثلها، تحتاج إلى استخدام HTML و CSS و لبناء الواجهة الأمامية، و JavaScript للتعامل مع المنطق والوظائف المختلفة؛ حيث يجب أن يكون لديك أساس قوي وفهم أساسيات جافا سكريبت مثل Variables، و Functions، وDOM، وغيرهم. تحتاج أيضًا إلى فهم مواضيع أكثر تقدمًا مثل Events، وLooping، وLogic and Flow Control وغيرهم، وأيضًا مواضيع أكثر تعقيدًا مثل Object Oriented Programming with JavaScript وAdvanced Flow Control لكي تبني هذه اللعبة أو غيرها من تطبيقات جافا سكريبت بطريقة احترافية.
يُمكنك تعلم كل ما سبق وأكثر، وبناء لعبة مثل تيك تاك تو أو تطبيق آلة حاسبة و4 مشاريع أخرى عملية من خلال التسجيل في مسار تعلم JavaScript من الصفر وحتى الاحتراف؛ والذي يساعدك على تصميم وبناء تطبيقات جافا سكريبت بطريقة احترافية من خلال 5 دورات وباللغة العربية. بعد هذا المسار ستكون مستعدًا لتعلم أحد المكتبات أو أطر العمل الشهيرة مثل ReactJS أو Angular.
ألقِ نظرة على مشروع لعبة Tic Tac Toe الذي أنشئه أحد طلابنا الذي نفخر به خلال رحلة تعلمه لمسار جافا سكريبت على منصة المدرسة.
5. مشروع تعقب السعرات الحرارية (Calorie tracker project)
بعد تعلمك واحترافك للتقنيات السابقة، يُمكنك الآن الدخول إلى عالم مكتبة ReactJS، وهي من أشهر مكتبات الجافا سكريبت، ومثالية لمطوري الواجهة الأمامية، حيث تساعدهم على إنشاء واجهات مستخدم وبناء مواقع وتطبيقات ويب احترافية، ويستخدمها العديد من المواقع الشهيرة مثل Netflix و Facebook.
يُعد هذا المشروع الذي يتعقب عدد السعرات الحرارية لما تأكله من وجبات فرصة رائعة لتطبيق ما تتعلمه في مكتبة ريأكت بطريقة عملية؛ حيث يتطلب منك فهم جيد لأساسيات مكتبة ريأكت مثل components، وهي الوحدة الأساسية المكونة لعناصر ريأكت، وأيضًا State management، وConditional statements، وDynamic Styling، و Error handling، وغيرهم من المهارات الأخرى.
اعلم جيدًا أن معرفتك لهذه المهارات بدون تطبيق عملي على مشاريع حقيقية لا يساوي شيئًا، فالمشاريع الواقعية هي سر نجاح أي مبرمج وهي ما تعده للمنافسة في سوق العمل البرمجي.
الصورة التالية توضح مثال عملي لهذا المشروع والذي أنشأه أحد طلابنا المتميزين في دورة أساسيات ريأكت.
تعلم المهارات السابقة ومهارات أخرى أكثر تقدمًا مثل Multi pages، و Error handling، وRouting، وPerformance optimization techniques وAPI calls وغيرهم الكثير من خلال دورة أساسيات React وأيضًا دورة React Deep Dive على منصة المدرسة.
هذه هي أهم 5 مشاريع يجب أن يمتلكها كل مطور واجهة أمامية في حقيبة أعماله (Portfolio)، ومن خلال إنشائك لمثل هذه المشاريع، لن تحسن مهاراتك في تطوير الواجهة الأمامية فقط، بل ستثير إعجاب أصحاب الأعمال والعملاء المحتملين، وتستطيع التقديم على أحد الوظائف في مجال البرمجة التنافسي.
إذا كنت مبتدئًا وتريد أن تبدأ في تعلم البرمجة من الصفر واحتراف مجال الفرونت اند، ننصحك بدبلومة المدرسة لتخصص الفرونت اند، وهي دبلومة شاملة لاحتراف مجال تطوير مواقع وتطبيقات الويب من خلال منهج مكثف، و22 دورة احترافية، وتطبيق عملي على مشاريع حقيقية، بدءًا من أسس البرمجة بلغة بايثون، ومرروًا بتعلم HTML & CSS، وJavaScript وحتى احتراف ReactJS.
تؤهلك هذه الدبلومة للتقديم على 3 وظائف بعد التخرج منها:
- Junior JavaScript Engineer
- Junior React Engineer
- Junior Front-end Engineer
نأمل أن تكون هذه المقالة قد ساعدتك على فهم أهمية وجود مشاريع حقيقية في معرض أعمالك كمطور فرونت اند، وأتمنى لك التوفيق في مسيرتك المهنية في عالم تطوير مواقع وتطبيقات الويب.
Front-end development هو فرع من تطوير الويب يركز على تصميم وبرمجة الجزء البصري والوظيفي لمواقع الويب وتطبيقاتها. يشمل ذلك استخدام لغات برمجة مثل HTML وCSS وJavaScript، بالإضافة إلى العمل مع أطُر العمل والمكتبات المساعدة.
الواجهة الأمامية (Frontend) هي الجزء الذي يمكن لمستخدمي موقع أو تطبيق الويب رؤيته والتفاعل معه بما في ذلك التصميم والتنقل في القوائم والنصوص والصور ومقاطع الفيديو وما إلى ذلك. والواجهة الخلفية (Backend) هي الجزء الذي لا يستطيع مستخدمو الموقع رؤيته والتفاعل معه، والذي يتعامل مع قواعد بيانات والخوادم (servers) وغيرهم.
تشمل المهارات الأساسية لمطور الواجهة الأمامية تعلم HTML لتحديد هيكل الصفحات، وCSS لتنسيقها، وJavaScript لإضافة التفاعل والديناميكية. بالإضافة إلى ذلك، يحتاج مطور الفرونت اند إلى معرفة ببعض المكتبات أو أطر العمل مثل ReactJS أو Angular أو Vue.js وأدوات التطوير مثل Git وWebpack.
يقوم مطور الفرونت بعدة مهام، منها تحليل متطلبات المشروع، وتصميم واجهة المستخدم (UI) في بعض المشاريع، وبرمجة الواجهة الأمامية باستخدام الأكواد البرمجية، وتصحيح الأخطاء واختبار الكود، وأخيرًا نشر الصفحات على الخوادم وصيانتها.
يتفاوت متوسط رواتب مطوري الـ frontend بناءً على عوامل مختلفة مثل البلد، والخبرة، وجهة العمل، والمهارات. ويصل متوسط الراتب في الولايات المتحدة الأمريكية حوالي 90000 دولارًا أمريكيًا سنويًا، ولكن هذا يمكن أن يتغير بشكل كبير حسب العوامل المذكورة.
