خريطة تعلم تطوير المواقع: Front-end وBack-end

إذا قررت تعلم تطوير المواقع، فأول ما يربكك هو الكم الهائل من الأسماء: HTML، وCSS، وJavaScript، وReact، وNode.js، وقواعد البيانات، وعشرات الأدوات الأخرى. المشكلة ليست في صعوبة كل منها، بل في عدم معرفة الترتيب الصحيح.

هذه الخريطة ترتب لك الطريق: ما الفرق بين Front-end وBack-end، وماذا تتعلم في كل مرحلة وبأي ترتيب، وما الأدوات التي يستخدمها كل مطور، ومشروع مقترح ينهي كل مرحلة، وما الذي يجعل موقعك احترافيًا لا مجرد تمرين.

ما الفرق بين Front-end وBack-end وFull-stack؟

الـ Front-end هو كل ما يراه المستخدم ويتفاعل معه في المتصفح، أما الـ Back-end فهو ما يعمل على الخادم خلف الكواليس: حفظ البيانات، والتحقق من المستخدمين، وتنفيذ العمليات. ومطور الـ Full-stack هو من يعمل على الجانبين معًا.

مثال من متجر إلكتروني: صفحة المنتج وزر «أضف إلى السلة» وشكل السلة على الهاتف كلها Front-end. أما حساب السعر النهائي، وحفظ الطلب، وخصم الكمية من المخزون، وإرسال تأكيد الطلب، فهي Back-end.

من أين تبدأ تعلم تطوير المواقع؟

ابدأ بثلاث لغات بالترتيب: HTML للهيكل، ثم CSS للتنسيق، ثم JavaScript للتفاعل. هذه الثلاثة هي أساس كل موقع على الإنترنت، وكل الأطر والأدوات اللاحقة مبنية فوقها.

• HTML: لغة توصيف تحدد عناصر الصفحة، مثل العناوين والفقرات والصور والأزرار. مثال: <button id="buy">Buy now</button> ينشئ زرًا.
• CSS: لغة تنسيق تحدد الألوان والمسافات والخطوط وتوزيع العناصر على الشاشات المختلفة. مثال: #buy { background: #0a7; color: white; } يلوّن الزر.
• JavaScript: لغة برمجة تجعل الصفحة تتفاعل. مثال: document.querySelector("#buy").addEventListener("click", () => alert("Added!")); يظهر رسالة عند الضغط على الزر.

بهذه الأمثلة الثلاثة ترى تقسيم الأدوار بوضوح: HTML أنشأت الزر، وCSS حددت شكله، وJavaScript حددت ما يحدث عند الضغط عليه. أفضل مرجع رسمي ومجاني للثلاثة هو MDN Web Docs.

خريطة الـ Front-end خطوة بخطوة

تنتقل في الـ Front-end من صفحة ثابتة بسيطة إلى تطبيق ويب تفاعلي، عبر ست محطات. كل محطة تعتمد على التي قبلها، فلا تقفز إلى إطار عمل قبل أن تثبت أساسيات JavaScript.

دعم العربية والاتجاه من اليمين لليسار

إذا كنت ستبني مواقع لجمهور عربي، فتعلّم دعم الاتجاه من اليمين لليسار (RTL) من البداية لا في النهاية. أضف الخاصية dir="rtl" وlang="ar" إلى عنصر html، واستخدم في CSS الخصائص المنطقية مثل margin-inline-start وpadding-inline-end بدل left وright، فتنعكس التخطيطات تلقائيًا عند تغيير الاتجاه.

واختبر دائمًا الحالات المختلطة، مثل رقم هاتف أو كلمة إنجليزية داخل جملة عربية، واختر خطًا عربيًا واضحًا وحمّله بطريقة لا تؤخر ظهور النص. هذه التفاصيل الصغيرة هي ما يلاحظه العميل العربي فورًا.

لتثبيت المحطتين الثالثة والرابعة، راجع شرح المفاهيم بالأمثلة في مقال تعلم JavaScript للمبتدئين.

خريطة الـ Back-end: الخادم وقواعد البيانات والـ API

الـ Back-end يبدأ عندما يحتاج موقعك إلى حفظ بيانات أو تسجيل مستخدمين أو تنفيذ عمليات لا يجوز أن تتم في المتصفح. هنا تتعلم ثلاثة أشياء: لغة خادم، وقاعدة بيانات، وطريقة لربطهما بالواجهة عبر API.

1. اختر لغة خادم واحدة

• Node.js: تشغيل JavaScript على الخادم، فتعمل بلغة واحدة في الجانبين. يُستخدم غالبًا مع إطار مثل Express.
• Python: مع أطر مثل Django أو FastAPI، ومناسبة إذا كنت تهتم بالبيانات والذكاء الاصطناعي أيضًا.
• PHP: مع إطار Laravel، وشائعة في مواقع الشركات والاستضافات المشتركة.

2. تعلّم قاعدة بيانات

ابدأ بقاعدة بيانات علائقية مثل PostgreSQL أو MySQL، وتعلّم أساسيات لغة SQL: الإضافة والاستعلام والتعديل والحذف والربط بين الجداول.

3. ابنِ واجهات API وأمّنها

الـ API هو الطريقة التي تطلب بها الواجهة البيانات من الخادم. تعلّم تصميم مسارات واضحة، والتحقق من المدخلات، وتسجيل الدخول، وحماية كلمات المرور بالتشفير. وقاعدة ذهبية من تجربتنا في Apex عند ربط بوابة دفع: احسب السعر على الخادم دائمًا ولا تثق بأي سعر يأتي من المتصفح، واحفظ المفاتيح السرية خارج مجلد الموقع العام.

كيف يتعاون الجانبان في طلب واحد؟

تخيل مستخدمًا يضغط زر «تأكيد الطلب» في متجر. الواجهة ترسل طلبًا إلى الخادم يحمل معرّفات المنتجات والكميات فقط. الخادم يتحقق من هوية المستخدم، ويقرأ الأسعار الحقيقية من قاعدة البيانات، ويحسب الإجمالي، ويحفظ الطلب، ثم يعيد ردًا بصيغة JSON فيه رقم الطلب. وأخيرًا تعرض الواجهة رسالة النجاح.

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

لفهم ما يحدث على الخادم بالتفصيل، اقرأ ما هو الـ Backend وكيف يعمل؟.

ما الأدوات التي يستخدمها كل مطور مواقع؟

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

• محرر أكواد مثل Visual Studio Code مع إضافات للتنسيق التلقائي.
• أدوات المطور في المتصفح (DevTools): لفحص العناصر، وتجربة CSS مباشرة، ومتابعة الأخطاء وطلبات الشبكة.
• Git وGitHub: لحفظ تاريخ التعديلات والعمل مع فريق ونشر المشاريع.
• سطر الأوامر: لتثبيت الحزم وتشغيل خادم التطوير.
• npm: مدير حزم JavaScript لتثبيت المكتبات.
• خدمة نشر: لرفع مشاريعك على الإنترنت ومشاركة روابطها في معرض أعمالك.

ما الذي يميز موقعًا احترافيًا عن موقع مبتدئ؟

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

مثال حقيقي من موقع Apex نفسه: رفعنا درجة سرعة الموبايل في Google PageSpeed من 47 إلى 99 بخطوات يستطيع أي مطور تعلمها، منها تجميع Tailwind مسبقًا بدل تحميله من CDN في المتصفح، ووضع الـ CSS الحرج داخل الصفحة وتحميل الخطوط بشكل غير متزامن، واستخدام صور WebP بحجم عرضها الفعلي، وتأخير تحميل وسوم Google Analytics حتى أول تفاعل من المستخدم.

تفاصيل هذه التجربة خطوة بخطوة في مقال لماذا موقعك بطيء؟ وكيف رفعنا سرعة موقعنا من 47 إلى 99. وبجانب السرعة، احرص على:

• التصميم للهاتف أولًا: لأن نسبة كبيرة من الزوار تصل عبر الهاتف.
• إمكانية الوصول: نصوص بديلة للصور، وتباين ألوان كافٍ، وأزرار يمكن الوصول إليها بلوحة المفاتيح.
• الأمان الأساسي: HTTPS، والتحقق من المدخلات على الخادم، وعدم كشف أي مفاتيح سرية في كود الواجهة.

مشاريع مقترحة لكل مرحلة

أنهِ كل مرحلة بمشروع منشور على الإنترنت، فهذا ما يحول المعرفة إلى مهارة يمكن إثباتها. هذه أفكار مرتبة من الأسهل إلى الأصعب:

1. بعد HTML وCSS: صفحة شخصية أو صفحة هبوط لمطعم أو عيادة، متجاوبة مع الهاتف وتدعم العربية.
2. بعد JavaScript: قائمة مهام تحفظ البيانات في المتصفح، أو حاسبة أقساط، أو اختبار أسئلة بسيط.
3. بعد الـ API: صفحة تعرض بيانات من واجهة API عامة مع حالات التحميل والخطأ.
4. بعد إطار الواجهات: لوحة تحكم صغيرة بعدة صفحات ومكونات قابلة لإعادة الاستخدام.
5. بعد الـ Back-end: تطبيق كامل بتسجيل دخول وقاعدة بيانات، مثل نظام حجز مواعيد أو متجر مبسط.

وللصورة الأشمل لرحلة التعلم من أول يوم، ارجع إلى الدليل الكامل لتعلم البرمجة من الصفر.

الخلاصة

• ابدأ تعلم تطوير المواقع بـ HTML ثم CSS ثم JavaScript، ولا تقفز إلى إطار قبل تثبيت الأساسيات.
• الـ Front-end لما يراه المستخدم، والـ Back-end للبيانات والمنطق والأمان، وتعلّم الجانب الثاني عندما تحتاجه.
• Git وأدوات المطور وسطر الأوامر مهارات يومية، فتعلمها مبكرًا.
• السرعة والتوافق مع الهاتف والأمان هي ما يميز الموقع الاحترافي، وهي مهارات قابلة للتعلم.
• أنهِ كل مرحلة بمشروع منشور، فهذه المشاريع هي معرض أعمالك.