خطواتك الأولى لتصبح مطور ويب، مقترحات للتعلم بشكل ذاتي – الجزء الثاني

استعرضت في التدوينة السابقة مفهوم الـ ويب كأساس لبدء تعلم هذا المجال، وذكرت ضرورة استيعاب مكونات موقع الويب عن طريق استخدام إحدى برمجيات إدارة المحتوى CMS، وكان اقتراحي (WordPress) كأشهر برمجية في ذلك المجال. اليوم سنتطرق إلى مجموعة من الخطوات أكثر تعقيداً والتي تحتاج إلى جهد وإصرار أكبر.

مجالات العمل في نطاق الـ Web

صناعة الويب تتضمن العديد من المجالات للعمل بإمكانكم الإطلاع عليها في مقالة نشرت على CSS-Tricks، وبرأيي يمكن تلخيصها  بـ:

1. مصمم ويب (Web Designer): وهومن يقوم بتحديد شكل الموقع وكيفية توزيع المعلومات فيه، أي تصميمه بشكل كامل، وممكن أن يكون ذلك باستخدام Photoshop أو illustrator، ويمكن القول بأن مصمم الويب لايملك خبرات برمجية.
2. مطور واجهات ويب (Front-End Developer): يكون مختص في HTML, CSS, JavaScript بحيث يستلم التصميم من مصمم الويب ويقوم بتحويله إلى صفحات ويب حقيقية، وتقاس عادةً مهارة المطور بمدى تطابق واقتراب صفحاته من التصاميم الحقيقية.
3. مطور ويب (Web Developer): يتقن مطور الويب لغات البرمجة المستخدمة في السيرفر (“المخدم”) كـ PHP, ASP.Net, Python, Node.js بالإضافة إلى اتقانه لغات برمجة قواعد البيانات، ويعد برأيي هذا المجال هو الأعقد والأكثر دخلاً من الناحية المادية.

الخطوة الثالثة (استكمالاً للتدوينة السابقة):

مدخل إلى HTML

إن الصفحة التي تقرأها الآن تدعى صفحة ويب Web Page، وهي مكونة من عدة عناصر: نص، نص آخر، صورة، عنوان فقرة، رابط، قائمة …. الخ، لغة HTML هي لغة تمكننا من بناء صفحات الويب، وإنشاء عناصر بداخلها وإعطاء خواص معينة لتلك العناصر.

لتعلم هذه اللغة اقترح البدء بقراءة وتطبيق الدروس الموجودة على  Html Tutorial – W3schools في الترتيب التالي:

1. القسم الأول Html 5 Tutorial : القسم مرتب بشكل منطقي لكن اعتقد أن الأقسام التالية يمكن استبعادها والعودة إليها لاحقاً (HTML Quotation – HTML Computer – HTML JavaScript – HTML Layouts – HTML Responsive – HTML Entities – HTML XHTML)
2. القسم الثاني HTML Forms

بالانتهاء من القسمين السابقين بإمكانك القول أنك تعرف أساسيات لغة HTML، وبإمكانك لاحقاً التعمق بشكل أكبر في هذه اللغة والحصول على شهادة فيها واقترح تجربة رحلة التعلم في SoloLearn – HTML حيث بإمكانك الحصول على شهادة مجانية بعض خوض الاختبارات وكما قلت “لاحقاً”.

الخطوة الرابعة:

مدخل إلى CSS

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

CSS هي لغة داعمة للـ Html ومكمل لها، تضاف بشكل مباشر داخل صفحات الـ html او عن طريق ملفات خارجية بحيث يتم استدعائها في بداية صفحة الـ html.

اقترح هنا الخوض في تجربة إنشاء موقع ويب على منصة كود أكاديمي: Make a Website in Codeacademy 

بناء موقع وفق التسلسل السابق سيمكنك من فهم سياق هذه اللغة بوضوح، كما أن CodeAcademy تحتوي على عدد من الكورسات المميزة المجانية في مجالات عديدة في الويب.

بالإضافة إلى ذلك فإن استعراض CSS Tutorial in W3schools جيد هنا لتشكيل استيعاب أوضح، مع العلم بأنك لتتمكن مبدئياً من هذه اللغة عليك اتقان التالي:

1. إضافة كود css إلى صفحة html بشكل مباشر.
2. إضافة كود css إلى صفحة html بشكل خارجي (ملف خارجي).
3. إضافة كود css إلى عنصر html بشكل مباشر.
4. استيعاب مفهوم الـ class و الـ id.
5. التمكن من استخدام المؤشرات (Selectors) بسلاسة.
6. التمكن من تعديل الألوان، الخطوط، الأحجام، الأبعاد  للعناصر.
7. استيعاب مفهوم الصندوق في العناصر (item box) بحيث تصبح المصطلحات التالية واضحة (margin – padding – boarder)
8. التموضع Positions
9. Float

لاحقاً في مستوى متقدم عليك الخوض في مفهوم التصاميم المتجاوبة (Responsive) أي التصاميم التي تعمل على جميع قياسات الشاشات، وهو مفهوم مطلوب جداً حالياً ونوعاً ما يتعذر بناء صفحة ويب غير متجاوبة لاستخدام تجاري. واقترح لذلك كورس ممتاز Lynda – Cascading Style Sheets Page Layouts 

تغذية راجعة

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