كيف تكتب عرض عمل | عشوائيات

تعلم لغات تطوير الويب الأساسية

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

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

فمثلاً موقع بسيط أو مدونة يختلف عن تطبيق بنكي كبير، أو موقع عملاق للتواصل الاجتماعي مثل الفيسبوك واليوتيوب.

كل هذه المهام ومراحل تطوير التطبيقات المعقدة يمكنك أن تتعلمها بنفسك وبسهولة شديدة، ولكي تتمكن من ذلك عليك أولاً تعلم أساسيات تطوير الويب.

و كما رأيت بنفسك العنوان، هذا الدليل سيقدم لك كل ما تحتاج إليه لتعلم لغات تطوير الويب الأساسية HTML – CSS – Javascript.

ستجد هنا كل ما تحتاج إليه من معلومات مثل:

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

كل هذا ستجده مٌقدماً لك بالخطوات العملية المرتبة … هذه الخطوات هي التي كنت سأسير عليها لو أردت البدء في مجال تطوير الويب الآن.

لهذا أريدك أن تطلع أولاً على هذا الدليل كاملاً – فهناك الكثير من المعلومات والمصادر التي وضعتها بين السطور – حتى تستوعب ما به من أفكار … ثم ابدأ بعد ذلك في تنفيذ الخطوات العملية.

اتفقنا؟ ممتاز … هيا بنا نبدأ!

مقدمة هامة عن تطوير الويب

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

ما هي البرمجة بشكل عام؟

لقد نشرنا منذ عدة أيام دليل كامل بعنوان ” ما هي البرمجة “، والذي يشرح بشكل عملي وبسيط كل ما تحتاج إلى معرفته حول البرمجة.

دعني أعرض لك لمحات منه:

1. البرمجة هي وسيلة تُمكن الناس من التواصل مع الحاسوب لإعطاءه التعليمات التي يحتاج إليها لتنفيذ مهمة معينة.

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

2. لغة البرمجة هي عبارة عن وسيلة لإعطاء الحاسوب التعليمات بطريقة سهلة يستطيع أن يتعامل معها البشر.

الحاسوب أداة غبية لا تفهم سوى لغة الكهرباء، هل هي مفتوحة أم مغلقة، ومن هنا طوّر العلماء نظام يمكننا من كتابة التعليمات التي نريد من الحاسوب تنفيذها بطريقة معينة، ثم ترجمتها إلى لغة الكهرباء التي يفهمها الحاسوب أو كما يُطلق عليها ” لغة الأرقام الثنائية – Binary Code “

3. كل هذا أدى إلى ظهور لغات برمجة عديدة، كل لغة لها طريقة معينة للكتابة، والتي تُعرف باسم ” Syntax “

أنصحك أن تطلع على ذلك الدليل بنفسك، ستجد معلومات أخرى إضافية عن مصطلحات مثل ” الخوارزميات – أنماط البرمجة – وظيفة المبرمج “، وغيرها … مشروحة بشكل مبسط بالأمثلة العملية.

بعد أن تنتهي من ذلك الدليل سيصبح لديك معرفة عامة عن البرمجة وماهيتها وتخصصاتها و تطبيقاتها المختلفة… الآن دعنا نتعمق أكثر في الحديث عن تطوير الويب الذي يُعد أبرز تخصصات البرمجة في وقتنا الحالي.

ما هو تطوير الويب؟

كما أشرت سابقاً؛ تطوير الويب هو عملية بناء مواقع أو تطبيقات على الإنترنت بكل مراحلها … كل موقع أو تطبيق له متطلبات مختلفة.

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

دعني أعطيك بعض الأمثلة:

1. موقع عشوائيات الذي تقرأ عليه هذه السطور الآن، يا ترى لو قام أي شخص آخر بزيارة هذه الصفحة نفسها سواء من حاسوبه أو هاتفه المحمول … ألن يجد نفس المحتوى؟ نفس الكلمات والصور؟

هذا ما نُطلق عليه المحتوى الثابت ( Static Pages )، وهو الأسهل من حيث عملية التطوير.

2. الشيء الوحيد المختلف أو المتغير بين أي زائر وآخر لهذه الصفحة سيكون في الإعلانات التي يشاهدها على الموقع، تلك الإعلانات التي شاهدتها بالأعلى تتغير من مستخدم وآخر.

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

3. مواقع التواصل الإجتماعي هي مثال على تطبيقات ويب عملاقة، والتي تعتمد على المحتوى المتغير ( Dynamic Content )، فكل مستخدم عندما يزور الفيسبوك يشاهد محتوى مختلف عن غيره من الزوار في أغلب الأحيان.

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

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

4. أعتقد أنك في الفترة الآخيرة كنت تتابع إحصائيات الوباء العالمي الذي انتشر في كل الدول … هل تتذكر الصفحات التي كانت تعرض الإحصائيات المتغيرة في كل دولة.

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

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

5. مواقع الخدمات البنكية وشركات الاتصالات التي تعرض لك بيانات حسابك ورصيدك وعدة خدمات مختلفة؛ هي أيضاً أمثلة على تطبيقات الويب المعقدة، والتي تعتمد على المحتوى المتغير، وفي نفس الوقت على طبقات الحماية والتعامل مع الأموال.

كل تطبيق أو موقع من الأمثلة السابقة يمر بمراحل تطوير معينة، لا تقلق ستتعلم لاحقاً أهم هذه المراحل والوظائف المسؤول عنها مطور الويب وكيف يقوم بها.

ولكن قبل ذلك دعني أسألك سؤالاً هاماً …

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

أنا لا أتحدث عن الهدف الأساسي الذي تسعى إلى تحقيقه من تعلم لغات تطوير الويب … مثل:

• الحصول على وظيفة
• البدء في مجال العمل الحر
• تغيير حياتك المهنية
• تأسيس مشروع خاص بك
• مواكبة التقدم التكنولوجي وتعلم المهارات اللازمة للاستفادة منه

ما أتحدث عنه هنا هو الشيء الذي تريد تطويره، فهل:

• هل هناك مشكلة معينة تواجهك حالياً تريد حلها عن طريق مهارات تطوير الويب المختلفة؟
• هل رأيت موقع أعجبك وتريد تعلم كيف تم تطويره حتى تصنع لنفسك موقعاً مثله؟
• هل لديك أمر مهم في عملك أو دراستك يدفعك إلى تعلم تطوير الويب؟

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

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

كان لا بد لي من أسألك هذا السؤال، فليس الهدف من هذا الدليل حول تعلم لغات تطوير الويب الأساسية هو أن أعرض لك فقط مجموعة من المصادر أو الكورسات.

بل الهدف هو أن أساعدك حقاً على التغلب على أي عقبة تقف في طريقك للتعلم وتطوير نفسك … 

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

أهم تخصصات تطوير الويب

مجال تطوير الويب هو مجال كبير و متداخل، ويحتوي على العديد من التخصصات والمهام التي من الصعب حصرها أو حتى تصنيفها.

ولكن بشكل عام هناك 3 تخصصات تحتوي في طياتها على كل المهام التي يقوم بها مطور الويب مهما اختلف الموقع أو التطبيق الذي يعمل عليه؛ هي:

• مطور الواجهة الأمامية ( Front-end Developer ).
• مطور الواجهة الخلفية ( Back-end Developer ).
• المطور الشامل ( Full-stack Developer ).

دعني أفسر لك هذه التخصصات بشكل عملي … أريدك أن تفكر الآن في المطورين الذين يعملون على موقع فيسبوك على النحو التالي:

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

2. أي مطور يعمل على تسجيل وجمع تلك البيانات وكيفية حفظها بحيث يستطيع نفس المستخدم إيجاد نفس البيانات عند تسجيل الدخول من أي جهاز أو مكان في العالم، وكيفية إجراء العمليات الحسابية المباشرة ( مثل التي تجدها في الألعاب ) … هو عبارة عن مطور للواجهة الخلفية.

3. أما المطور الشامل فهو الذي يستطيع استخدام مجموعة معينة من لغات البرمجة وأدواتها لبناء تطبيق متكامل، تخيل مثلاً مطور يستطيع أن يقوم بكل المهام السابقة معاً.

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

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

ما هي لغات تطوير الويب الأساسية؟

هناك الكثير من الأدوات ولغات البرمجة التي تستخدم في تطوير الويب، ولكن هناك أعمدة رئيسية لا يستغني عنها أي مطور ويب في عمله.

هذه الأعمدة هي لغات تطوير الويب الأساسية ( HTML – CSS – Javascript )، والتي سنتحدث عنها بالتفصيل من خلال العناصر التالية.

لغة HTML

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

كلمة HTML هي اختصاراً لـ Hyper Text Markup Language، وترجمتها باللغة العربية ” لغة ترميز النص الفائق ” … هذه اللغة تم تطويرها عام 1993 على يد المبرمج الشهير Tim Berners-Lee، والذي يُعتبر الأب الروحي لشبكة الإنترنت.

الهدف الرئيسي من تطوير HTML هو تسهيل عملية مشاركة المعلومات والملفات بين مختلف أجهزة الحاسوب على الانترنت … فعند بداية انتشار الحواسيب وتطوير الشبكات كان من الصعب مشاركة المعلومات وتبادلها.

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

لغة HTML هي التي تحدد المكونات الأساسية لأي صفحة ويب مثل:

• الروابط الأساسية للوصول للصفحات.
• العناوين المختلفة.
• وضع الملفات المختلفة مثل الصور والفيديو.
• تحديد العناصر المساعدة مثل ( أماكن الأزرار Buttons – استمارات البيانات Forms ) وغيرها.

على سبيل المثال، عندما نحدد عنوان أي صفحة نكتبه بالطريقة التالية ” <title> هنا العنوان </title> “.

لا تقلق ستتعلم كيف تستخدم هذه اللغة السهلة والبسيطة، وستتعرف على أشهر الوسوم ( Tags ) المستخدمة فيها، تلك التي نكتبها بين الأقواس التي تشبه علامتي “ أكبر من ”  و ” أصغر من ”  التي درسناها في الرياضيات😂.

<><>

لغة CSS

إن كانت لغة HTML هي الهيكل العظمي لصفحات الويب، فإن لغة CSS هي اللحم والجلد الذي يرسم ملامح هذه الصفحات ويحدد شكلها.

دعني اجعلك ترى تأثير لغة CSS بنفسك:

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

اضغط على قائمة CSS ثم اضغط على Disable Styles ثم اختار Disable All Styles، سترى بنفسك كيف تبدو الصفحة التي تزورها بدون أي CSS … فقط HTML.

2. وإن كنت تستخدم متصفح فايرفوكس فالأمر بسيط للغاية … اضغط على زر Alt ستظهر لك قائمة أعلى الصفحة، اضغط على View ثم اختار Page style ثم No style.

كما رأيت بنفسك، لغة CSS هي المسؤولة عن تقسيم الصفحات، وعرض المعلومات، وتنظيمها وتغيير الألوان في أي صفحة ويب … لهذا أخبرتك سابقاً أنها تمثل اللحم والجلد الذي يُعطي شكلاً للهيكل العظمي المكتوب بلغة HTML.

كلمة CSS هي اختصاراً لـ Cascading Style Sheets، وترجمتها باللغة العربية ” أوراق النمط المتعاقب ” … لقد تم تطوير هذه اللغة عام 1996 من قبل العديد من المبرمجين، وتتم إدارة تحديثاتها من قبل منظمة World Wide Web Consortium – W3C.

إن اطلعت على هذا المقال الرائع سترى بنفسك كيف كانت أشكال المواقع في آواخر التسعينات، وكيف تغيرت أشكالها وألوانها مع تطور لغة CSS.

الجدير بالذكر هنا أن لغة HTML هي ليست لغة برمجة حقيقة، فلا يمكنك استخدامها لإجراء أي عملية حسابية أو منطقية، لهذا يُطلق عليها لغة توصيف ( Markup Language ).

ولغة CSS كذلك هي مجرد أداة تستخدم لتوضيح وتغيير شكل هذا التوصيف حتى توضح العناصر المختلفة، وتجعل تصفح الويب وتمييز المعلومات والعناصر أمر أسهل.

<><>

لغة Javascript

لغة Javascript هي الضلع الثالث في مثلث تطوير الويب … هي اللغة التي تُستخدم في عرض المحتوى المتغير الذي تحدثنا عنه سابقاً.

هل تذكر مثال الإعلانات؟ هناك سكربت صغير هو المسؤول عن عرض هذه الإعلانات على المواقع، ولكن وراء هذا السكربت برامج قوية تجمع البيانات عن المستخدمين، وتعرض الإعلانات المناسبة لكل شخص.

أي محتوى متغير على أي موقع مثل:

• المحتوى الذي يظهر على الموقع بعد وقت محدد (مثل صناديق الإشعارات – استمارات طلب التسجيل).
• الخرائط التفاعلية (مثل خرائط جوجل).
• الأنيميشن
• مشغلات الميديا (مثل مشغل الملفات الصوتية على soundcloud).

هو غالباً ما يعتمد على لغة Javascript.

ما أريدك أن تعلمه الآن هو ” أي لغة برمجة تستخدم مع HTML و CSS في تطوير الويب هي بمثابة العقل الذي يفكر بشكل منطقي ويعرض ويخزن المعلومات الهامة والمتغيرة “.

و Javascript هي لغة البرمجة الأشهر في هذا المجال، فكما يُقال ” لغة جافاسكربت هي الطبقة الثالثة من كعكة تطوير الويب 🥞 اللذيذة “.

تم تطوير هذه اللغة على يد Brandan Eich في أواخر عام 1995 على هيئة مجموعة من السكربتات البسيطة، والتي تم تطويرها بعد ذلك إلى أن وصلت إلى ما هي عليه اليوم.

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

• فيمكنك استخدامها في تطوير الواجهة الأمامية للمواقع.
• تطوير الواجهات الخلفية باستخدام Node.Js.
• استخدامها في تطوير تطبيقات الهاتف عن طريق React Native.
• وحتى تطوير تطبيقات سطح المكتب عن طريق Ionic.js

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

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

أفضل كورس لتعلم لغات تطوير الويب الأساسية

هناك العديد من المصادر المجانية والمدفوعة لتعلم تطوير الويب.

إن كنت تريد رأيي الشخصي فعليك بكورس ” The Web Developer Bootcamp 2021 “.

هذا الكورس هو المصدر الذي كنت سأعتمد عليه لو رغبت في تعلم أساسيات تطوير الويب اليوم، وهذا لعدة أسباب:

• الكورس يسير بخطوات عملية مرتبة ( مثل الخطوات التي سأذكرها لك لاحقاً إن أردت أن تتعلم بنفسك بدون أي كورس مدفوع ) …. وهذا سيوفر عليك الوقت والجهد.
• مادة الكورس حديثة وتغطي أهم التقنيات الجديدة في عالم تطوير الويب.
• هذا الكورس عليه اقبال شديد على منصة يوديمي، ومقدم الكورس شخص أكثر من رائع، وله خبرة كبيرة، ويتمتع بأسلوب مرح و يبسط المعلومات.
• لغة الكورس انجليزية بسيطة وسهلة أي شخص يستطيع أن يفهم الجمل الانجليزية يستطيع أن يتعلم ويفهم بدون أي قلق.
• تكلفة الكورس قليلة للغاية، في حدود 200 جنيه مصري تقريباً.
• يمكنك مشاهدة ومتابعة الكورس في أي وقت تريد.
• الكورس يبدأ معك من الصفر؛ من أول كيفية عمل الانترنت وصولاً إلى طرح أول تطبيق ويب كبير ومتكامل لك.
• الكورس لا يكتفي فقط بالأساسيات بل يغطي أيضاً معلومات هامة عن Node.Js و Express و React، وهي أدوات ستحتاج إلى تعلمها بنفسك مع مرور الوقت.
• أهم ما في الكورس – وعلى عكس الكثير من الكورسات الأخرى أو فيديوهات اليوتيوب – أنه لا يُعلمك فقط كيف تكتب الأكواد، بل لماذا تكتبها … لهذا أنت لا تتعلم فقط كيف تُقلد بل كيف تفكر.
• مقدم الكورس يحاول أن يجعلك تتعلم أهم المهارات التي يحتاجها مطور الويب مثل كيفية البحث عن المعلومات وتعلم أي تكنولوجيا جديدة بمنتهى السهولة والسرعة.

شخصياً أعتبر هذا الكورس مصدر متكامل ومميز.

دعنا الآن ننتقل إلى الحديث عن الخطوات العملية التي يجب أن تتبعها سواء قمت باختيار الكورس السابق أم لا.

والتي سأعرض لك فيها العديد من:

• المصادر والشروحات المجانية.
• أفضل الكورسات على منصة يوتيوب باللغة العربية عن تعلم لغات تطوير الويب الأساسية، والتي يمكنك استخدامها بعد إتمام الكورس السابق كنوع من المراجعة والتلخيص أو حتى كمصدر للتعلم إن أردت ذلك.
• روابط لمشاريع وتطبيقات عملية يمكنك تنفيذها للتدريب، وتعميق الفهم، وحتى تصنع لنفسك معرض أعمال ” Portfolio “ يساعدك على ترويج مواهبك للحصول على وظيفة أو للبدء في مجال العمل الحر.

كيف تتعلم أساسيات تطوير الويب بإحترافية خطوة بخطوة

1. تعلم كيف يعمل الانترنت

لكي تصبح مطور ويب يجب أن تعلم كيف يعمل الانترنت، يجب أن تكون قادراً على الإجابة على الأسئلة التالية:

• ما هو الإنترنت
• ما هو الـ IP 
• ما هو الـ DNS
• ما هو الـ HTTPS والفرق بينه وبين http.
  
• ما هو الـ API

يجب أن تكون قادراً على فهم وتلخيص ما يحدث عندما تفتح أي متصفح وتكتب اي رابط  ( URL ) حتى تظهر لك محتويات هذه الصفحة.

الكورس السابق الذي اشرت له يفسر هذه المعلومات بشكل رائع، وكما لاحظت بنفسك لدينا العديد من المقالات حول هذه المواضيع.

2. تعلم أساسيات لغتي HTML و CSS

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

من أفضل المصادر التي ستجدها باللغة العربية تشرح لك HTML و CSS هي هذه القائمة من قناة Elzero Web School، وهي واحدة من أفضل قنوات اليوتيوب لتعلم البرمجة.

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

هذا بالإضافة إلى نشره فيديوهات حول:

• مشاريع وتطبيقات على لغات تطوير الويب HTML و CSS.
• سيقوم قريباً بنشر كورس حديث حول لغة Javascript – حالياً لديه شروحات جيدة، ولكنه صرح أنه يحتاج إلى بتحديثها –  وربما يكون قد بدء في نشره بالفعل.
• نصائح وإرشادات عملية.

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

3. قم بتنفيذ 3 مشاريع بسيطة باستخدام ما تعلمته عن HTML و CSS

بعدما تعلمت أساسيات HTML و CSS قم بتنفيذ 3 مشاريع بسيطة كنوع من التدريب مثل:

• استمارة تسجيل بسيطة ( Form )، بحيث تقوم بتنسيق العناصر والألوان طريقة التسجيل ( Sign up – Sign in ).
• قم بمحاولة تقليد أي صفحة ويب بسيطة، ربما صفحة من موقع أخبار أو مدونة تحبها، حاول بناء نفس شكل الصفحة تقريباً بما تعلمته عن الـ HTML و CSS

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

4. تعلم التصميم المتجاوب ( Responsive Design )

في هذه المرحلة يحب أن تتعلم كيفية استخدام مبادئ CSS المتقدمة مثل ( Flexbox – CSS Grid ) وغيرها. ستجد قائمة كاملة لشروحات CSS على قناة أكاديمية الزيرو التي أشرت لها سابقاً.

ولا حاجة للتذكير بكورس The Web Developer Bootcamp 2021، والذي يغطي كل هذه الموضوعات وأكثر مع العديد من الأمثلة العملية.

5. قم بتنفيذ 5 مشاريع متوسطة لبناء صفحات ويب كاملة باستخدام تقنيات CSS المتقدمة

الآن يمكنك بناء صفحات ويب كبيرة و متجاوبة، لهذا أنصحك أن تبحث عن بعض التصميمات ومحاولة تنفيذها، ستجد العديد منها في قائمة قنوات اليوتيوب التي أشرت لها.

وإن بحثت بنفسك على اليوتيوب بكلمة ” HTML & CSS Projects ” ستجد العديد من التصميمات والفيديوهات التي يمكنك أن تحاول تنفيذ ما فيها من أفكار بنفسك، ثم مقارنة الأكواد الخاصة بك مع الشرح حتى تتعلم من الأخطاء.

6. تعلم أساسيات استضافة المواقع، وكيفية رفع الملفات والتعامل مع السيرفر بشكل مبدئي

هذه الخطوة أبسط مما تتصور، هنا ستتعلم كيف تقوم برفع الملفات التي كتبت فيها أكواد HTML و CSS لوضعها على سيرفر حتى يمكن لأي شخص زيارة المواقع التي قمت بتطويرها.

في هذه الخطوة أيضاً ربما تتعلم أحد برامج File Transfer Protocol – FTP الشهيرة مثل FileZilla، وهي أدوات تساعدك على رفع الملفات على اي سيرفر وتحديث المواقع بشكل مستمر.

ستجد العديد من الشروحات سواء على قنوات اليوتيوب التي أشرت لها أو من خلال الكورس، ومع الوقت ستتعلم أداة أفضل وهي Git و GIthub.

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

7. تعلم اساسيات البرمجة باستخدام لغة Javascript

بعد كل التدريب العملي السابق حان الوقت لكي تتعلم لغة برمجة حقيقة وتتعرف على أهم الأساسيات مثل:

• الدوال ( Functions )
• أنواع البيانات ( Data Types )
• المتغيرات ( Variables )

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

أنصحك بمتابعة قناة FreeCodeCamp – والتي ستجد العديد من المعلومات عنها في دليل أفضل قنوات اليوتيوب لتعلم البرمجة الذي أشرت له سابقاً.

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

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

8. قم بتنفيذ 5 مشاريع بسيطة باستخدام لغة جافاسكربت

هناك العديد من المشاريع البسيطة التي يمكنك تنفيذها باستخدام جافاسكربت مثل:

• تطبيق بسيط لتسجيل الملاحظات ( Note Taking App ).
• عمل قائمة إشعارات بسيطة ( POP Up ).

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

أهم شيء هو ألا تقوم بمشاهدة فيديوهات المشاريع حتى تقلد نفس الأكواد المكتوبة، بل قم أنت أولاً بمحاولة تنفيذ الفكرة بعدما تتعرف عليها بما لديك من معلومات، وبعد ذلك قارن بين ما قمت به وبين الشرح حتى تستفيد.

9. تعرف على المواضيع المتقدمة في لغة جافاسكربت مثل Closures و Async Await

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

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

10. قم بتنفيذ مشروع واحد متقدم بلغة جافاسكربت تستخدم فيه كل ما تعلمته سابقاً

لقد وصلنا إلى الخطوة العملية الأخيرة في هذا الدليل الكامل لتعلم لغات تطوير الويب الأساسية HTML – CSS – Javascript وهي بناء تطبيق عملي كبير.

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

هناك أفكار كثيرة يمكنك تنفيذها، وإن كان لديك مشروعك الخاص الذي تريد تنفيذه … الآن حان الوقت للبدء فيه.

في هذه الخطوة ستواجه الكثير من المشكلات وستجد نفسك تبحث وتسأل، وفي الكثير من الأحيان الأكواد التي كتبتها لن تعمل، وهذا شيء ممتاز.

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

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

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

نصائح عملية حول تعلم لغات تطوير الويب الأساسية

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

ستتعرف بنفسك وأنت تتعلم من المصادر التي أشرت لها سابقاً أهم هذه الأدوات، وإن كنت تريد نصيحتي فعليك بتعلم إطار ( React.js )، لأنه سهل نوعاً ما و تطلبه الكثير من الشركات.

والآن فإليك هذه المجموعة من النصائح السريعة:

1. خذ وقتك في التعلم، فلعلك طالب أو موظف و وقتك محدود، فقط حاول أن تتعلم و تطبق كل يوم حتى و لو لمدة ساعة.

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

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

4. عليك أن تتعلم أساسيات تصميم واجهات المستخدم UI- User Interface و تجربة المستخدم UX- User Experience.

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

5. لا تشغل نفسك بمتابعة الكثير من قنوات اليوتيوب خصوصاً في البداية، فقط اكتفي بقناة أو اثنين على الأكثر حتى لا تشتت نفسك.

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

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

أتمنى لك التوفيق والنجاح في رحلتك نحو تعلم تطوير الويب، وإلى لقاءٍ قريب!