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

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

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

لبدأ كتابة أكواد التصميم تحتاج لبرنامج لكتابة الأكود يطلق عليه محرر أكواد وهذه قائمة بالبرامج التي تفيدك لتختار منها أو تختارها جميعا.
  • برنامج [ Atom ] لكتابة الأكواد مجاني وجميل ويدعم اللغة العربية وخفيف على الجهاز.
  • برنامج [ Brackets ] لكتابة الأكواد مجاني وجميل و يدعم اللغة العربية حاليا أعمل به في كل الكورسات.
  • برنامج [ VS Code ] من روائع مايكروسوفت برنامج جميل وخفيف وبه الكثير من المميزات المفيدة.
  • برنامج [ KomodoEdit ] لكتابة الأكواد مجاني وجميل و يدعم اللغة العربية وخفيف على الجهاز.
  • برنامج [ ++Notepad ] لكتابة الأكواد مجاني وجميل ويدعم اللغة العربية وخفيف على الجهاز.
تحتاج لمتصفح إنترنت لترى شكل الموقع عليه وهنا أحسن المتصفحات لتختار منها أو تختارها جميعا.
  • متصفح [ Google Chrome ] أروع المتصفحات على الإطلاق من جوجل وبه مميزات رائعة تساعدك في التصميم والبرمجة.
  • متصفح [ Firefox Developer Edition ] متصفح رائع جدا من موزيلا مخصص للمطورين فقط وبه الكثير منا لمزايا الرائعة.
  • متصفح [ Opera ] جميل وخفيف وبه مميزات رائعة تساعدك في التصميم وفي عملك.
حتى تعمل بشكل سليم ولا تواجهك أي مشاكل هناك إعدادات معينة ونصائح تفيدك وتمنع الوقوع في مشاكل أثناء تعلم التصميم.
  • لا تعتمد على البرامج التي تكمل الكود في أول حياتك حتى تحترف وتتعود على كتابة وسوم اللغة.
  • تأكد أن إمتداد الملفات يظهر في النظام حتى لا تواجه أي مشكلة في إستدعاء الصور الشرح هنا
  • قم بعمل مجلد المشروع الخاص بك في مكان بعيدا عن النظام حتى لا تخسره في حالة فقدان النظام.
  • صمم موقعك باللغة الانجليزية أولا. لاتستعمل اللغة العربية الا بعد أن تتعلم وتقف على الطريق حتى لا تدخل في مشاكل.
  • قم بعمل مجلد المشروع بإسم Project وضع فيه مشاريعك وكل تصميم قم بعمل إصدار له حتى ترى بعد كل فترة هل تقدمت أم لا.
هنا سوف تجد دروس منوعة متجددة بإستمرار تفيدك في مجال الحاسب الالي والإنترنت والتصميم عموما ويمكن أن توفر عليك الوقت في عملك كمصمم ويب. يمكنك مشاهدة الدروس من هنا.

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

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

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

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

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

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

بعض النصائح والملاحظات المهمة.

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

وقت التطبيق العملي.

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

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

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

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

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

التطبيقات مرة أخرى

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

إضافة اللمسات السحرية والإمكانيات الرائعة.

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

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

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

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

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

توفير الوقت والمجهود بواسطة إطار العمل [ Bootstrap ]

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

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

وقت التطبيق وجلب المزيد من الأفكار

هنا سوف تجد الكثير من التطبيقات العملية التي سوف تزيد من مستواك وتفتح لك الباب للإبداع وتطوير أفكارك ومهاراتك.
  • تطبيقات عامة في تصميم الويب هنا
  • تطبيقات ودروس متقدمة في Html + Css من هنا
  • تطبيقات عامة في لغة Javascript هنا
  • تطبيقات عامة في مكتبة jQuery هنا

أسرار تصميم موقع متعدد اللغات

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

مواقع مهمة للتعليم والمراجعة والأخبار وجلب الأفكار

مواقع هامة لزيادة معلوماتك وللتطبيق والمراجعة.
  • MDN مرجع لا غنى عنه في مراجعة لغات الويب.
  • W3Schools موقع جميل للمراجعة على ما تعلمته.
  • Css-Tricks من أجمل المواقع التي تحتوي على أمقلة وتطبيقات وأسرار جميلة.
  • SitePoint موقع جميل للأمثلة المتقدمة على كل اللغات.
  • Bootstrap موقع إطار عمل البوتستراب.
  • Themeforest موقع بيع التصاميم.
  • Can I Use موقع هام لمعرفة الخواص التي تستعمها وتوافقها مع المتصفحات.
مواقع هامة جدا تفيدك في جلب الصور والأيقونات وجميع المصادر التي تحتاجها كمصمم ويب وأيضا الأدوات التي تفيدك وتوفر عليك الوقت.
  • Freepik يحتوى على مصادر رائعة لك كمصمم وبه الكثير من المواد المجانية التي تفيدك في عملك.
  • PngTree يحتوى على أربع ملايين صورة مجانية للمصممين وهو كنز لا غنى عنه.
  • MockupWorld يحتوى على Mockups مجانية رائعة لتعرض فيها أعمالك.
  • 1001FreeDownload يحتوى على كمية كبيرة من ال Vectors المجانية.
  • NegativeSpace يحتوى على صور Stock رائعة جدا ومجانية.
  • FreebiesBug يحتوى على تصاميم وأيقونات ومصادر رائعة.
  • 365PSD يحتوى على تصاميم وأيقونات ومصادر رائعة.
  • Unsplash يحتوى على صور Stockكثيرة رائعة ومجانية.
  • DeathToStockPhotos يحتوى على صور Stockكثيرة رائعة ومجانية.
  • Pexels يحتوى على صور Stockكثيرة رائعة ومجانية.
  • PixaBay يحتوى على صور Stockكثيرة رائعة ومجانية.
  • FlatIcon موقع رائع لجلب الأيقونات.
  • IconFinder موقع رائع لجلب الأيقونات.
  • Material Design لجلب أيقونات الماتريال ديزاين.
هنا سوف تجد الكثير من المواقع التي تفيدك في جلب الافكار والإلهام ومتابعة كل ما هو جديد في عالم التصميم وأجمل التصميمات الجديدة والأفكار في عالم التصميم.
مواقع اخرى مهمة يجب عليك متابعتها كمصمم ويب فيها الكثير من الإفادة.
أما هذا الموقع فيجب عليك متابتعه بإستمرار فهو عبارة عن قائمة بجميع المواقع التي يحتاجها أي مصمم من أول المصادر التعليمية وحتى الأسواق التي تبيع فيها تصميماتك ولا غنى عنه DesignersList
هذا المقال يحتوي على المواقع التي يحتاجها مصمم ومطور الويب ليحترف في مجاله باذن الله إقرا المقال من هنا.

المزيد من الإحتراف مع Sass

أدوات متقدمة يمكن أن تفيدك جدا في عملك وتوفر عليك الكثير من الوقت والجهد وتجعلك تقترب من طريق الإحتراف ويمكنك الإستغناء عنها في حالة كانت صعبة عليك أو لم تحب العمل بها. وهي لغة Sass وهي عبارة عن إمتداد للغة Css تضيف عليها مميزات برمجية رائعة توفر عليك الكثير من الوقت والجهد وتقوم بتنظيم وترتيب مشروعك بشكل جميل وتجعل إحتمالات الخطأ ضئيلة جدا ويمكنك مشاهدة الكورس كاملا من هنا.
Begin Working With Sass
بعد أن تعلمت اللغة يمكنك التطبيق عليها بكورس تصميم موقع كامل بواسطة ال Sass ويمكنك بواسطة الكورس تعلم كل ما يخص اللغة وكيف تستعملها في مشروع حقيقي وكيف تستفيد منها أكبر إستفادة ويمكنك مشاهدة الكورس من هنا.
Create Web Design With Sass

المزيد من الإحتراف مع PugJs

ال PugJs عبارة عن Template Engine يفيدك في إختصار الوقت والمجهود أثناء كتابة ال Html ويجعلك تقترب جدا من الإحتراف عن طريق إستخدام امكانيات لغات البرمجة وانت تكتب كود Html مثل ال Include وال Loop والمميزات العظيمة في لغات البرمجة والكورس سوف يفيد لمهاراتك الكثير ويمكنك تعلم الكورس من هنا.
Begin Working With PugJs

كيف تصل لأعلى درجات الإحتراف

هذا المقال يوضح لك كيف تكون Super Front-End Developer وما هي جميع الأدوات التي تجعلك محترف بمعنى الكلمة وتقبل في أي وظيفة Front-End Developer يمكنك قرائة المقال من هنا.
كيفية القبول في أي وظيفة Front End Developer
وهنا كورس صغير يوضح لك كل ما في المقال ولكن مع معلومات أكثر ونصائح أكثر والمزيد من الإضافات الكثيرة التي تتيح لك الإحتراف في المجال باذن الله.
How To Become A Front-End Monster

وقت المشاكل والحلول

ماذا تفعل في حالة واجهتك أي مشاكل؟
إشترك في مجموعتنا على الفيس بوك لتسال وتستفسر عن ما تريد من هنا
https://www.facebook.com/groups/ElzeroWebSchool
مميزات الجروب انك تجد من يشاركك الرأي والنقاش معك لتخرجوا بمعلومات جديدة وتتبادلوا الخبرات لتتطوروا سويا ولزيادة خبرتكم من الاسئلة التي تروها ولمساعدة الآخرين في حل مشاكلهم ولا تنسى أبدا الإطلاع على قسم نصائح الزيرو ففيه الكثير من النصائح الهامة التي سوف توفر عليك الكثير من الوقت وستختصر عليك الكثير والكثير.
قبل إستخدام الرسائل الخاصة هنا سوف تجد إجابات معظم الأسئلة التي سوف تسألها لذلك يجب عليك قراءة المقال فهو مهم جدا.
إجابة الأسئلة التي تسأل في الرسائل الخاصة
هذا القسم كاملا يحتوي على الأسئلة التي يكررها الناس كثيرا تابع القسم فسوف تجد إجابة لبعض الأسئلة التي تحتاج اجابتها باذن الله.
أهم الأسئلة وإجابتها
هنا بعض المقالات المهمة جدا والتي سوف تفيدك في مسارك التعليمي باذن الله.
حل مشاكلك في بداية التعلم
أسباب الملل وكيفية القضاء عليه
إذا كان لديك أي إضافة أو أداة أو موقع يفيد المسار التعليمي فضلا اكتبها في التعليقات.

47 تعليق


أضف تعليقك