كورس تصميم مواقع الويب مجانا | المقدمة

هل ترغب بتعلم تصميم المواقع؟ إذا كان الأمر كذلك أحببنا اليوم أن نبدأ معكم في كورس تصميم مواقع الويب مجانا.

نتمنى من الله أن يكون هذا الكورس خير مرجعًا لكم بإذن الله وسواء كنتم مبتدئين أو محترفين.

فلنبدأ على بركة الله بالتمهيد

مقدمة عن الكورس

في هذا الكورس ستتعرف على:

• ما هي مواقع الويب
• لماذا قد تحتاج لتعلم تصميم مواقع الويب
• هل فعلًا هذا الكورس مجانًا بالكامل
• ما الذي أحتاجه لأبدأ في تعلم تصميم مواقع الويب
• هل سيقضي الذكاء الصناعي على عملي كمصمم مواقع؟
• تهيئة بيئة العمل لتصميم مواقع الويب
• ما الذي سأكون قد تعلمته بنهاية هذا الكورس
• ما هي أفضل المصادر التي أستطيع زيادة علمي ومهاراتي منها

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

ما هي مواقع الويب

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

ما حدث إنك إستخدمت الإنترنت للدخول على متصفح إنترنت مثل Google Chrome أو Firefox أو غيرهم لتقوم بفتح موقع بحث جوجل والذي يصنف على إنه محرك بحث مثلما يصنف موقع Facebook على إنه موقع شبكة إجتماعية Social Media هو ولينكدإن وإكس (تويتر سابقًا) ، بالإضافة لموقع ويكيبيديا الذي يصنف كدليل وموقع يوتيوب الذي يصنف كمنصة محتوى مرئي وحتى أمازون الذي يصنف كموقع متجر إلكتروني ، وغيرهم الكثير.

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

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

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

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

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

كذلك موقع مثل يوتيوب ، نفس الفكرة ، بالإضافة لأن متاجر التطبيقات مثل Google Play و iTunes قد نالت بالفعل الكثير من إعجاب المستخدمين الذين أصبحوا بالمليارات بالفعل ، فلما لا تجاري التريند كما يقال وتصنع من موقعك أيضًا تطبيق بالأخص لو كنت شركة عملاقة مثل هؤلاء؟

لا تقلق .. فستعلم المزيد في كورس تصميم مواقع الويب مجانًا بدءًا من الأن.

هل تطبيقات الهواتف أفضل من مواقع الويب

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

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

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

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

الأن وقد تعرفت على بعض المعلومات العامة والنظرية عن المواقع الإلكترونية ، لننتقل إلى النقطة التالية

لماذا قد تحتاج لتعلم تصميم مواقع الويب

في الحقيقة الأسباب كثيرة للغاية ، نذكر من هذه الأسباب على سبيل المثال وليس الحصر:

• تكلفة تصميم موقع الويب كبيرة ، فلو كانت لديك فكرة لمشروع على الإنترنت ترغب بتنفيذها فستحتاج إلى مصمم مواقع محترف وهو ما يعني تكلفة كبيرة عليك ، فلو كان المصمم شخص هاوي قد يهمل شكل الموقع على الأجهزة المختلفة وتجاوبه مع أحجام الشاشات الكبيرة والصغيرة ، لذا يجب أن يقوم بإنشاءه كـ Responsive design بمعنى تصميم متجاوب يتغير شكله تلقائيًا ويعيد ترتيب نفسه بناءًًا على حجم الشاشة التي قامت بفتحه.
• التحكم الكامل في ما تريده في موقعك ، فإذا قمت بالفعل بطلب تصميم موقعك من مصمم مواقع وترغب لاحقًا بعد فترة بتغيير شكله أو إضافة أفكار إليه فتحتاج ثانيًا لمصمم المواقع ، فإن لم يكن متوفرًًا سيتعطل تنفيذك لما تريد كثيرًا ، وقد تكون تكلفة التنفيذ أكبر ، وإن طلبت التعديل من شخص أخر فقد يتطلب الأمر منه بعض الوقت لفهم كيفية تصميم مصمم الموقع الأول لموقعك من الصفر ليمكنه إكمال التعديلات المرجوة.
• بتعلمك لتصميم المواقع ستتاح لك خيارات كثيرة للعمل وجني المال ، سواء بإنشاء مشاريعك وتحويلك أفكارك لواقع على الإنترنت بسهولة وبدون تكلفة ، أو بالعمل كفريلانسر لصالح عملاؤ أخرين يحتاجون إلى مصممين مواقع أو بالعمل لصالح شركة أو مؤسسة براتب مجزي سواء من منزلك كعمل عبر الإنترنت Remotely أو من مقر الشركة وحتى الحصول على فرص للعمل بالخارج لدى هذه الشركات والمؤسسات المرموقة مثل جوجل ومايكروسوفت وأبل وغيرهم.
• ليس ذلك فقط بل أن عملك كمصمم مواقع يفتح لك فرصة جني الأرباح بالدولار مما يساعدك على تحسين حياتك المادية كثيرًا.

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

هل فعلًا كورس تصميم مواقع الويب مجانا بالكامل

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

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

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

ما الذي أحتاجه لأبدأ في تعلم تصميم مواقع الويب

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

فإن توفرت هذه الإمكانيات فأنت جاهز بالفعل للبدء.

وماذا عن اللغة الإنجليزية؟

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

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

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

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

كما يمكنك إرسال رسالة لي مباشرًة على صفحتي على فيسبوك Mohamed Shaker Web وسأقوم بالرد عليها بنفسي بإذن الله.

الخوف من قضاء الذكاء الصناعي على مهن تصميم وتطوير مواقع الويب والبرمجة

قبل أن أضع بين أيديك رأيي الشخصي كمصمم ومبرمج ومعلم ، أرغب بأن أوضح لك نقطة هامة للغاية يا صديقي.

هل تعلم ما هو الذكاء الصناعي؟

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

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

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

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

تهيئة بيئة العمل لتصميم مواقع الويب

أشكرك لأنك وصلت لهذه النقطة معي ، وأحمد الله على ذلك لإنه يعني إمتلاكك للإنترنت ، ولكني أحتاج منك أن تجهز معي التالي:

• جهاز كمبيوتر أو لابتوب (لا يشترط حديث ، فقط مصنع ضمن أخر 5 سنوات على الأقل).
• متصفح إنترنت (يفضل إستخدام متصفح مثل: جوجل كروم لإنه ما سأستخدمه في الشروحات ، بالإضافة لمتصفح فايرفوكس).
• تنزيل برامج مثل: Notepad++ و Visual Studio Code وغيرهم .. لا تقلق ، مع أول درس سنقوم بتنصيب المطلوب معًا.

هذا هو كل المطلوب منك بجانب فنجان من القهوة وإنتباه كامل من فضلك ♥

ما الذي سأكون قد تعلمته بنهاية هذا الكورس

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

• ما هي لغات HTML, CSS, JavaScript
• نبذة عن أدوات مثل: Font Awesome و Google Fonts
• إستخدام برامج ال IDE مثل: Visual Studio Code والفرق بينها وبين برامج تعديل النصوص.
• إنشاء موقع ويب كامل من الألف للياء ( سنقوم معًا بإنشاء أكثر من موقع ويب في مجالات مختلفة سواء لشركات أو مواقع شخصية أو متاجر إلكترونية ، وسواء بالكود كبرمجة خاصة أو بالإستعانة بمنصات مثل WordPress و Shopify).
• جعل الموقع متجاوب Responsive
• كيفية رفع موقعك على الإنترنت مجانًا
• كيفية رفع موقعك على الإنترنت بالطريقة المدفوعة بحجز إستضافة ودومين لموقعك وربطهم بملفاته على السيرفر (غير مطلوب منك شراء شئ ، نحن سنوفر لك شرح لتفهم ما يجب عليك فعله عند تعاملك مع عملاء حقيقيين).

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

ما هي أفضل المصادر التي أستطيه زيادة علمي ومهاراتي منها

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

ولكن في حالة كنت ترغب ببعض المصادر العامة وباللغة العربية فأنصحك بشدة بقنوات يوتيوب مثلأ:

• الزيرو ويب سكول
• أوكتوكود

خاتمة المقدمة

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

تحياتي وأطيب أمنياتي للجميع بالتوفيق – محمد شاكر