العديد من الناس يريدون دخول مجال تطوير الويب لكن تجدهم تائهين فهم يبدأون بتعلم الأساسيات و من ثم يتوهون ولا يعرفون أي طريق يسلكوه وتبادرهم العديد من الأسئلة “متى يمكنني أن أنشئ موقع ويب متكامل ؟” “ما هي الخطوة القادمة بعد الأساسيات ؟ ” “وماذا سأختار back-end أو front-end أوكلاهما؟ ” فإنشاء الله هذه التدوينة ستكون الطريق الذي تسلكه والخطوات التي تضع عليها أقدامك لتصبح مطور ويب .

ملاحظة : تطوير الويب ينقسم إلى مجالين رئيسيين مختلفين عن بعضهما البعض لذلك سنشرح كل واحد على حدة في هذه التدوينة سنتحدث عن front-end development.

تصميم واجهات الويب (front-end development) : هو الجزء المتعلق بالواجهة التي يراها المستخدم فأنت عندما تدخل إلى أي موقع سترى واجهة سهلة و جذابة لكي تتعامل معها يطور بإستخدام javascript و HTML و CSS يصل دخل مصمم واجهات الويب في الولايات المتحدة الأمريكية إلى $66،635 سنويا إذن هذا المجال مصدر جيد للدخل .

أساسيات الويب عليك معرفتها :

في كلا الحالات إن قررت خوض سباق تطوير الويب عليك المرور من هذا الطريق وهو تعلم الأساسيات التي تقوم عليه صفحة في الأنترنت ومنه سنطرح في هذا الجزء الأساسيات من HTML و CSS و javascript و مكتبتها الشهيرة jquery.

safe_image-4

لا تنخدع ليسا لغتا برمجة Html5 و CSS3

بالطبع هذان الإثنان هما من الأساسيات التي تقوم عليها صفحة الويب لكنهما ليسا بلغتي برمجة فهم يسمحان بتنسيق الصفحة وطبع عليها ماتريد ،ولا يمكنك دخول عالم الويب بدونهما فعندما نتحدث عن HTML فهي أساس صفحة الويب و أغنتنا عن الكثير من الأشياء في إصدارها الخامس خاصة الفلاش البلاير وبالنسبة لCSS فهي تضيف العديد من اللمسات الجذابة لصفحة الويب الخاصة بك هاهي بعض المصادر لتعلمهما:

دوران قناة Elzero Web School

دورات قناة Cliprez

إستمتع باللعبة مع Java Script

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

ماذا الآن؟ jQuery

كمصمم واجهات ويب ستجد من الصعب التعامل مع الجافاسكريبت بسبب تعودك على HTML و CSS ولهذا الغرض جاءت jQuery لا يمكننا المرور دون ذكرها هي مكتبة جافاسكريبت مشهورة جدا وتسهل العديد من العمليات على المبرمج خاصة التعامل مع DOM ولها مجتمع كبير من المبرمجين العاشقين لها و تكمن قوتها في تمكينك بفعل الكثير بكود قليل هذه بعض المصادر لتعلمها

هل إنتهيت من الأساسيات ؟ فلنطور قليلا

23

الآن بعد الإنتهاء من الأساسيات سننتقل إلى أشياء متقدمة وهي الخطوة القادمة في تصميم الويب .

أطر عمل CSS

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

Bootstrap : هو مجموعة من الأدوات مفتوحة المصدر لإنشاء مواقع الويب وتطبيقات الانترنت متجاوبة. قامت شركة تويتر بتطويرها وتم إنشائها لمساعدة المصممين والمطورين على بناء منتجات متجاوبة مذهلة بسرعة وفعالية، الهدف منها هو توفير مكتبة واسعة مرنة وموثقة بشكل جيد للتصاميم “مكررة الاستعمال” المبنية باستخدام HTML وCSS و JavaScript كي يقوم المطورون باستعمالها والإبداع باستخدامها. توسع المشروع ليصبح يعرف بـ Bootstrap ويستقل عن تويتر لأنه اصبح مشروع كبير الآن يتضمن العشرات من العناصر حيث أصبح المشروع الأكثر شعبية على موقع GitHub بعد أن حصل على أكثر من 13،000 متابع و 2000 تطوير فرعي وها هي بعض المصادر لتعلمه

تعلم كيفية التصميم بواسطة Bootstrap 3

 Bootstrap Tutorials for Beginners Playlist

Foundation : إطار جميل ورائع لكنه متقدم بعض الشيء يمكنك من عمل تصميمات سهلة و متجاوبة ، تطبيقات تبقى رائعة على أي جهاز يتم إضافة العديد من الأشياء الجديدة عليه بإستمرار ويستعمل في العديد من المواقع العالمية مثل disney hp Amazon EA samsung ebay أليس من الجميل إستعمال إطار عمل تستعمله كبرى الشركات في مواقعها إذن إليك دورة رائعة لتعلمه بإحترافية

Foundation for Responsive Web Design for Beginners

جافاسكريبت متقدمة

Es6

هي الإصدار السادس من لغة جافاسكريبت و أتت معها الكثير من الأشياء الجديدة كالثوابت و الدوال السطرية فهي تمثل إنعطافة في تطوير الويب وكمطور ويب يجب عليك مجارات التطور الحاصل ويمكنك ذلك عن طريق

ES6 New Features Tutorials

AngularJs

هو إطار عمل JavaScript محفوظ لجوجل لطرف العميل يتبع بنية Model-View-Controller/Model-View-View-Model، ويعتبر اليوم مُهمًا لبناء تطبيقات ويب وحيدة الصفحة (SAP) أو حتى المواقع العادية. يُعتبر Angular JS قفزة كبيرة نحو مستقبل HTML وما يجلبه الإصدار الخامس ويبعث الحياة من جديد في تعاملنا مع الويب الحديث وهاهي بعض المصادر لتعلمه

 AngularJS For Everyone Tutoria

Angular 2 for Beginners 

درس رائع على كود أكاديمي 

reactjs

يعتبر React.js -على حداثته- من أقوى أطر عمل javascript لبناء الواجهات الرسومية على الويب مطور من طرف فايسبوك، حيث طبّق أفكارًا جديدة في هذا المجال، جعلت شِفرة الواجهات البرمجية أكثر نظافة، سرعة وأكثر قابلية للصيانة. يسمح لك React ببناء الواجهة الرسومية في مجموعة مكونات، كل مكوّن عبارة عن سرد لهيكلة ومنطق المكون، إذا تمزج بين شِفرة HTML مخصصّة وشِفرة جافاسكربت تصف سلوك ذاك المكون، ليكون قائما بذاته وقابلا لإعادة الاستعمال ، رائع أليس كذلك إذن إليك هذا المصدر المميز لتعلم إستخدام فريموورك react

React JS Tutorials for Beginners

أسئلة ستدور في رأسك كثيرا لا تقلق كلنا عانينا منها 

SWRREC0K3A

كم سأستغرق من وقت لكي أصبح مطور واجهات ويب؟

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

ماذا لو واجهتني مشكلة صعبة؟

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

كثرة المصادر التعليمية ماذا علي أن اختار؟

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

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

هذا المقال من طرف مصطفى علي عروس

أضف تعليقك بسهولة عبر فيسبوك

هذا آخر مقال