148

تجربتي في تعلم تطوير وتصميم الويب - كيف ابدأ - نصائح + مصادر!

  • hussam3bd

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

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

front end(واجهة الموقع): وهي ما يراه المستخدم امامه عند تصفح الوقع (التصميم النهائي للموقع).

Back end(عقل الموقع او نظام الموقع): وهي التي لا يرها المستخدم والمقصود بها لغة البرمجة مثل (php, ruby, …) وتعمل على معالجة المعلومات واستقبالها من واجهة الموقع.

لتعرف الفرق اكثر شاهد هذا الفيديو:

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

كيف بدأت وكيف تبدأ انت؟

قبل سنتين من الان وكانت اول مرة اتصل بها بالأنترنت من منزلي

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

فذهبت الى العم جوجل وبحثت به: كيف ابرمج موقع مثل الفيس بوك؟

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

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

استمريت ما يقارب الشهر وبعدها توقفت بسبب انقطاع الانترنت عني

وفي بداية عام 2013 وبفضل الله أصبح لدي اشتراك انترنت خاص بي :)

وعدت كي أكمل التعلم.

والان لنبدأ كي تصبح مصمم يجب عليك ان تتعلم لغات الهيكلة مثل HTML, CSS

من اين اتعلم هذه اللغات ؟

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

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

والان بعد تعلم HTML, CSS حان الان وقت مشاهدة دورة تطبيقه مثل "تصميم قالب مدونة"

كي تطبق ما تعلمته وهذه بعض الدورات

والان ماذا ؟

والان اذهب لتعلمHTML5, CSS3 لا تقلق انها ليست لغة أخرى ولكن بعض التحديثات على لغة HTML, CSS

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

وتعلم استخدام اطر العمل الجاهزة مثل Bootstrap

وبعدها ابدا في تعلم الجافا سكريبت كي تضيف التفاعل الى موقعك وتعلم احد المكاتب لها مثل jquery

وتعلم Responsive Design التصميم المتجاوب والذي من خلاله تجعل الموقع يعمل على جميع احجام الشاشات مثل الجوال والأجهزة اللوحية.

والان لننتقل الى تعلم البرمجة وهنا انت تختار اللغة التي تريدها لتتعلما فهناك PHP, Ruby, ASP.NET

لا توجد لغة أفضل من الأخرى انت تختار حسب ما تحب وتفضل منها

انا شخصيا اخترت PHP لكثرت مصادر التعليم لها ويوجد الكثير من الشركات تطلب مبرمجين PHP وايضا احببتها جدا

ويجب ان تتعلم مع لغة البرمجة قواعد البيانات فلعة البرمجة بدون قاعدة البيانات لا تساوي شيء من خلالها تستطيع ان تخزن المستخدمين المقالات وغيرها من الامور.

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

والان تعلمت الأساسيات ماذا بعد؟!

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

والان انهيت هذه المرحلة ابدا في تعلم OOP وهو أسلوب برمجة الكائنات موجود في معظم لغات البرمجة فهو يسهل عليك العمل جدا.

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

قد تقول لي انا لا اتقن اللغة الإنجليزية وانا أيضا لا اتقنها ولكن اتعلم من الدروس الإنجليزية

كيف يحدث هذا؟ بكل بساطة عند مشاهدة الدرس شاهده اول مرة حاول ان تفهم منه قدر المستطاع وابدا في التطبيق وتحليل ما قمت بكتابته فان وقعت في مشاكل فانت في الطريق الصحيح لأنك عندما تحل هذه المشكلة شوف تفهم 99% من الكود الذي قمت بكتابته.

"ليس معنى كلامي ان تترك تعلم اللغة الإنجليزية ولكن هذه حل وانت تتعلم اللغة الإنجليزية"

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

المصادر العربية:

قناة يوسف إسماعيل فهو أفضل شخص لتأخذ منه الأساس

عبد الله عيد

أفضل كورس شاهدة لبناء CMS

بعض الخدع باستخدام CSS

شروحات في PHP والووردبريس

قناة إبراهيم قديح

مطورين الويب العرب (لا انصح به كثيرا)

قناة ذات شرح رائع HTML5, HTML5 API, CSS3, JS

مصادر اخرى:

التصميم المتجاوب

المصادر الإنجليزية:

من القنوات المفضلة لدي phpacademy

قنوات أخرى

قناة رائع للتصميم

tutsplus.com

udemy.com

كورس مجاني على موقع tutsplus لتعلم Bootstrap

التصميم المتجاوب

وايضا لا ننسى قراءة الكتب انها تعطيك معلومات اكثر من الكورسات

مدونات رائعة:

colorslab.net

fwasl.com

هذه هي تجربتي خلال سنتين من بداية عام 2013 الى نهاية عام 2014 وقريبا سوف يصبح عمري 17 عاما اتمنى ان أكون قد افدتكم :D واعتذر ان اطلت عليكم

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

27

تابع القناة دي

Youtube.com/OsamaElzero

و اوعدك ان شاء الله هتغير معظم الكلمات الموجودة في مقالك بالتوفيق ان شاء الله

أظن الوعد اتنفذ يا باشمهندس :D

لقد تحقق وعدك ياستاذنا

مجهول
  • حذف بواسطة المستخدم

تحية ليك استاذي

أجببت المشاركة أيضا بهذه المصادر لعلها تفيدك أو تفيد بعض الأخوة :

بالنسبة للمدونات :

blog.guestra.net

mubde3.net/blog

_____________________________

موقع رائع للحصول على بعض أكواد Css3 والتحكم بها :

createcss3.com

_____________________________

مواقع إنكليزية رائدة في مجال تعليم الويب :

w3schools.com

codecademy.com

dreamincode.net

codeschool.com

_____________________________

مدونة إنكليزية توفر العديد من التصاميم والنماذج المجانية :

Tympanus.net/codrops

_____________________________

كما يمكن الإتطلاع على هذه التدوينة لبعض المصادر العربية :

http://www.syr-tech.com/201...

_____________________________

مطورين الويب العرب (لا انصح به كثيرا)

لماذا لاتنصح به افضل موقع من وجهة نضري والموقع الذي لا انصح به حقا هو عبد الله عيد

بصراحة انا شاهدت اكثر من 10 كورسات في مجال PHP شاهدة كورسات موقع مطوري الويب العرب لم افهم شي لا يشرح باسلوب شخص يشرح الاساسيات ولا يوصلك لك المعلومة ودروسه مملة جدا وطويل

وايضا شاهدت 120 درس من قناة عبد الله عيد ولم افهم كثيرا

الشخص الوحيد الذي تعلمت منه PHP بشكل جيد جدا هو يوسف اسماعيل شرح مميز ويشرح باسلوب المحترفينن ويعلم ان من يشاهد الكورس مبتدا جدا فهو يوضح كل شئ

في النهاية هذه وجهت نظر لي ولا اعني ان عبد الله عيد لا ينصح به فهناك كورسات في قناته مثل الجافا سكربت من النادر ان تجد منها!

كن منصفأ واتقي الله يا رجل ...يكفي أن أذكر دورات عبدالله عيد في الجافا والاندرويد المجانية بخلاف الدورات الاخري ....من لايشكر الناس لا يشكر الله ...وليس ذنب عبدالله عيد وأمثاله أنك بطيئ الفهم ...بالله عليك آتني بعشر ما فعله عبدالله عيد إن إســـتطٌعت .... :)

انا اتكلم عن وجهت نظر شخصية ومعنى كلامي ان عبد الله عيد ليس سئ وهناك العديد من الكورسات الرائعة له ولاكن هناك ايضا كورسات يقدمها بعض الاشخاص بطريقة افضل منه

وبالنسبة لكورسات الجافا انا لم اشاهدها لاني لست مهتم في الجافا

anouer1
  • حذف بواسطة المستخدم

عبد الله عيد انسان جاد ومجتهد وكورسات يوسف اسماعيل افضل.

مقال رائع ومشاركة رائعة من شخص رائع ..

المراجع مصنفة ومرتبة ترتبا رائعا وهي فعلاً مفيد ورائعة

أشكرك وأشكرك كل شخص قائم على إحدى المراجع المذكورة

جعل الله هذا العمل في صحيفتك ^_^

أولا شكرا لمشاركتك القيمة

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

و http://www.weebly.com و كان هذا أول موقع لي كانت تجربة فاشلة لا أرغب بتدكرها أو تحدث عنها و بعدها تركت فكرة لفترة و بعد زمن تقريباً أشهر قليلة كنت أجري بحث عن لغات التي تبرمج بها تطبيقات هواتف الذكية و بصدفة تعرفت على اﻠ html و أنها لغة لتصميم المواقع يمكنك تعلمها خلال أسابيع قليلة و كذا بدات بتعلم تطوير الويب و الحمد لله تعلمت css و تصميم المتجاوب Responsive Design و أتعلم JavaScript حاليا

ولكن الفرق هو أنني في مستوي تعلم لغة JavaScript و ليس مستوى Php و تعامل مع سكربتات منتديات و غيرها لا أعرف سبب ولكن مصدر تعلمي الرئيسي كانت الكتب و ماتزال إلى أنني قمت بإستثناء مع JavaScript حيث أنني أنهيت دورتين دورة حامد أمومن لجافاسكريبت و دورة cliperz - يوسف إسماعيل لجافاسكريبت و حاليا من موقع http://www.w3schools.com و إنشاء الله سأتعلم Php بعد إنهائي لجافاسكريبت

و شكرا :)

رحلة رائعة وبالتوفيق

ولاكن نصيحة مني ابتعد عن حامد امومن لانه يعطيك كثير من المعلومات الخاطة ويقول لك انه لا يوجد لها حل !

في هذه القناة كورس افضل منه لتعلم الجافا سكربت

وايضا شاهد كورس عبد الله عيد فهو رائع

تجاربنا في التعلم دائما تكون متشابهه

اشكرك اولا علي هذه المشاركه القيمه والتي استفدت منها كثيرا واضافت لحافظتي مصادر جديده للتعلم حتما سوف اتصفحها

واقدر جدا هاتان الكلمتان "العلم لاينتهي" فمن تجربتي شعرت في كل مره اتعلم شيئا جديدا .. كنت ولازلت اشعر انني لم اتعلم شئ ..

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

انا الان متوقف عن العمل بها بسبب امتحانتي ارجو الدعاء لي بالنجاح

وعند الانتهاء منها سوف اضع رابطها هنا ليستفيد الجميع :)

ليس لدى الكثير لاحكيه فانا لازلت فى البداية

بدأت بتعلم html وتلاها css على موقع www.codecademy.com وقراءة بعض المواضيع العربية والاجنبية وما اثار اهتمامى ووجدت به خير اجابة عن استفساراتى موقع css tricks والاخر موقع الاسئلة quora الان انا لازلت فى البداية اعلم هذا وبدأت مؤخرا بتعلم jquery على codecadmy ايضا

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

https://www.youtube.com/res...

مميز ماشاء الله عمل رائع تشكر عليه

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

كيف يمكنني مراسلتك اريد التحدث اليك

مقال أكثر من رائع ... مشكور حسام

موضوع مميز ، كان هذا موضوعي أيضا عن تعلم تصميم المواقع

موضوع اكثر من رائع شكرا اخى على التوضيح والمصادر الرائعه

يمكن ان تاتي تحديثات اخرى

html5 و css3 حينها نتعلم اللغة الجديدة

دورات يوسف اسماعيل هي الأقوى عربيا ، يشرح بطريقة رااائعة جدا وسهلة ومفهومة

-2

السلام عليكم

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

ايهما افضل سكربت جاهز و ايش .. وردبريس او غير الوردبريس

اتمنى تفيدني ولك جزيل الشكر

-3

مشكوووور

وجزاااك الله خيراً

ممكن عطيني حسابك ع الفيس .....

-8

I give you the Right place to get the Lessons that can help you to be a Professional Web Developer

got Kickass.to and search these company keywords

1- Lynda - like (Lynda css, lynda HTML, Lynda JavaScript, Lynda PHP , Lynda MySql , Lynda Ruby on Rails)

2- Tutsplus like (Tutsplus css, Tutsplus HTML, Tutsplus JavaScript, Tutsplus PHP , Tutsplus MySql , Tutsplus Ruby on Rails)

keep going you will get all Lessons to be well in Web development

شكرا لك كنت سأقيم ردك ب-1 لكن اعجبني الا انه باللغة التي ابتعد عنها المجتمع اربيا

ربما لم تقرء شروط المجتمع مع احترامي

-4

كلامك مظبوط 100 % وانابستعمل الطريقه دى

-3

كلامك مظبوط 100 % وانابستعمل الطريقه دى

-4

فالنفترض اننا تغاضينا عن ردك الانجليزي , ما يفعله موقعك هذا "Kick***.to" يسمي غرصنة نهيك عن اسمه الغير لائق

kickass تعبير مجازي يعني الرائع وليس كما تظن أنت

بالضبط: (مصدر للتأكيد على كلامك)

-3

ذكر في اسم الموقع ass وهو غير لائق في نظر الاخ ومن حقه ان يقول ذلك ... فالكتاب يعرف من مقدمته .... ان كان هناك عجز عن انتقاء اسم لموقع فكيف بالمحتوى

هذا الموضوع منذ أكثر من سنة !!!

-6

How can I Tell Ignorance s People some thing that may Help them

I just Ignore what you say oaf

عايز اتعلم برمجة جافا ,, تنصحني بدورة مين ؟

حسوب I/O هو مجتمع عربي، رجاءً شارك باللغة العربية الفصحى فقط.

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

كذلك توجد دورة للدكتور عبد الله عيد لا بأس أن تلقى نظرة عليها.

شكرا لك

دورة جافا التى موجوده فى رواق هل اساسيات فقط ام كل شئ فى الجافا ؟