Views: 131920

مسار مصمم الويب


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


تجهيز الأدوات والإعدادات اللازمة لبدأ العمل في تصميم الويب

البرامج والأدوات الازمة

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

  • برنامج [ Brackets ] لكتابة الأكواد مجاني وجميل و يدعم اللغة العربية حاليا أعمل به في كل الكورسات.
  • برنامج [ KomodoEdit ] لكتابة الأكواد مجاني وجميل و يدعم اللغة العربية وخفيف على الجهاز.
  • برنامج [ ++Notepad ] لكتابة الأكواد مجاني وجميل ويدعم اللغة العربية وخفيف على الجهاز.
  • برنامج [ Atom ] لكتابة الأكواد مجاني وجميل ويدعم اللغة العربية وخفيف على الجهاز.
  • متصفح حديث لتشاهد تصميمك عليه مثل [ Google Chrome ] أو [ Firefox Developer Edition ]

إعدادات الكمبيوتر و ملاحظات

حتى تعمل بشكل سليم ولا تواجهك أي مشاكل هناك إعدادات معينة ونصائح تفيدك وتمنع الوقوع في مشاكل أثناء تعلم التصميم.

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

دروس بسيطة منوعة في عالم الكمبيوتر والإنترنت

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

أسئلة مهمة يسألها الناس كثيرا قبل التعلم وإجابتها

أسئلة مهمة يسألها الناس كثيرا قبل التعلم وإجابتها

الكثير منا قبل التعلم يقوم بسؤال هذه الأسئلة الشائعة والأفضل أن تشاهد إجابتها قبل البدأ في التعلم..

بدأ تعلم لغة [ HTML ] لتنشيء صفحتك الأولى في الويب.

ما هي لغة HTML؟

لغة Html هي اللغة الام في بناء هيكل صفحات الويب وقبل العمل على أي تطبيق أو تصميم يجب عليك معرفة كيف تبني هيكل الصفحة وبواسطة هذا الكورس ان شاء الله سوف تتعرف على الوسوم الخاصة باللغة [ Tags ] وسوف تتعرف على عناصر اللغة كاملة وكيف تستعملها لتصميم موقع كامل قبل الدخول في عالم التصميم أو البرمجة.


رابط الكورس التعليمي

يمكنك مشاهدة الكورس التعليمي على اليوتيوب من هنا

بدأ تعلم لغة [ CSS ] لتنسيق صفحات الويب.

ما هي لغة CSS؟

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


رابط الكورس التعليمي

يمكنك مشاهدة الكورس التعليمي على اليوتيوب من هنا

بعد تعلم اللغات الأساسية في تصميم صفحات الويب هنا بعض النصائح والملاحظات المهمة.

دروس مهمة

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

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

نصائح مهمة

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

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

بعد تعلم اللغات ومشاهدة النصائح يأتي وقت التطبيق العملي.

ماذا أفعل للتطبيق؟

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


رابط كورس بسيط لعمل تخطيط للتصميم

يمكنك مشاهدة كورس التخطيط Wireframing من هنا


رابط كورس التطبيق العملي الأول

يمكنك مشاهدة التطبيق الأول على لغة Html + Css من هنا


المزيد من التطبيقات؟

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

بدأ تعلم الإصدار الجديد من لغة Html

لماذا أتعلم الإصدار الجديد HTML5؟

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


رابط الكورس التعليمي

يمكنك مشاهدة الكورس التعليمي على اليوتيوب من هنا

بدأ تعلم الإصدار الجديد من لغة CSS

لماذا أتعلم الإصدار الجديد CSS3؟

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


رابط الكورس التعليمي

يمكنك مشاهدة الكورس التعليمي على اليوتيوب من هنا

ماذا بعد تعلم بناء صفحة الويب وتصميمها ؟ بقى أن تقوم بعمل اللمسات السحرية.

تعلم مكتبة ال jQuery

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


ماذا أحتاج قبل تعلم المكتبة؟

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


لماذا اشاهد كورس ال Javascript؟

كورس الجافاسكريبت سوف يضيف إليك الكثير جدا في مشاهدته وفيما يلي بعض النقاط التي سوف تفيدك جدا.

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

رابط كورس Javascript الأساسي لإتقان اللغة

يمكنك مشاهدة الكورس التعليمي على اليوتيوب من هنا


رابط كورس Javascript DOM للتعامل مع صفحة الويب

يمكنك مشاهدة الكورس التعليمي على اليوتيوب من هنا


رابط كورس Javascript BOM للتعامل مع المتصفح

يمكنك مشاهدة الكورس التعليمي على اليوتيوب من هنا


رابط كورس مكتبة ال jQuery

يمكنك مشاهدة الكورس التعليمي على اليوتيوب من هنا

جاء وقت التطبيق الثاني بعد تعلمنا لمكتبة jQuery

ماذا أفعل للتطبيق؟

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


رابط الكورس التعليمي

يمكنك مشاهدة التطبيق الثاني من هنا


المزيد من التطبيقات؟

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

التطبيق الثالث للمزيد من الأفكار وتوظيف ما تعلمناه

ماذا أفعل للتطبيق؟

التطبيق الثالث يحتوي على المزيد من الأفكار والمزيد من إستخدامات مكتبة ال jQuery وخواص Css3 حتى تؤهلك لتصل لهدفك وتوظف كل ما تعلمته.


رابط الكورس التعليمي

يمكنك مشاهدة التطبيق الثالث من هنا

توفير الوقت بإستخدام أطر العمل المشهورة

إطار العمل Framework هو الحل

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


رابط الكورس التعليمي

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


تطبيق آخر على Bootstrap

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


هل تعلم أنه يمكنك عمل إطار عمل لنفسك من صنعك؟

هذا الدرس سوف يوضح لك طريقة عمل إطار عمل خاص بك هنا

تعلم مفهوم التصميم المتجاوب Responsive بدون إطار عمل

تعلم مفهوم التصميم المتجاوب Responsive

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


رابط الكورس التعليمي

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

وقت جلب الأفكار

أفكار سوف تساعدك وتزيد مستواك

سوف تجد الكثير من الأمثلة العملية للتطبيق ولتطوير مستواك وهي متجدة بإستمرار تابعها دائما لترى جديد الدروس فيها

  • تطبيقات عامة في تصميم الويب هنا
  • تطبيقات متقدمة في Html + Css من هنا
  • تطبيقات عامة في لغة Javascript هنا
  • تطبيقات عامة في مكتبة jQuery هنا

جاء وقت المشاكل والحلول والنصائح

ماذا أفعل لو واجهتني مشكلة؟

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


ماذا أفعل لو واجهتني مشكلة في فيديو معين أثناء التعليم؟

إسال عن المشكلة في نفس الفيديو او في حساب ال Ask أو في الجروب مع وضع لينك الفيديو حتى يتم مساعدتك بسهولة.


هل هناك نصائح تفيدني أثناء التعليم و الإستفسار؟

نعم لا تنسى إلقاء نظرة على الأسئلة التي تتكرر كثيرا في الجروب والقناة من هنا


أحتاج للكثير من النصائح أثناء فترة تعليمي

في هذه الهاش تاج على الفيس بوك سوف تجد الكثير من النصائح العامة وفي مجال الويب لا تنسى متابتعتها بإستمرار هنا

أدوات متقدمة بعد الإحتراف

أدوات متقدمة يمكن أن تفيدك في عملك

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


رابط كورس تعليم SASS

يمكنك مشاهدة الكورس كاملا ومعرفة كيف سوف تفيدك لغة SASS من هنا

مواقع مهمة للمراجعة

مواقع مهمة

مواقع مهمة لمراجعة معلوماتك وزيادة الإستفادة

  • مرجع لا غنى عنه في مراجعة لغات الويب MDN
  • موقع جميل للمراجعة على ما تعلمته W3Schools
  • موقع جميل للأمثلة المتقدمة على كل اللغات SitePoint
  • موقع إطار عمل البوتستراب Bootstrap