ایلیا فرامرزپور
ایلیا فرامرزپور
خواندن ۷ دقیقه·۵ سال پیش

مسیر یادگیری برای طراح وب شدن


سلام دوستای خوبم ، چند وقتی بود توی این فکر بودم که افرادی که ازم سوال میپرسن چه توی فضای مجازی چه توی کلاس ها و چه توی بیرون سوالشون اینه که چجوری تبدیل به یک طراح وب بشیم ؟ آیا طراحی وب به درد ما میخوره ؟ درآمد خوبی داره ؟ یادگیری اش چطوره؟ Front-end و Back-end فرقش چیه ؟ و ... خیلی سوالای دیگه.

امروز میخوام در مورد سوال های اولیه که توی ذهنتون به وجود اومده صحبت کنم.فقط قبلش اینو بدونید که برای طراح وب شدن نیازه عشق و علاقه داشته باشی و بعدش شروع کنی همون سوالی که آیا درآمد خوبی داره؟ بله درآمد خوبی داره بستگی به خودت داره یا باید به قدری خوب باشی تا درآمد خوبی داشته باشی یا باید وقتتو الکی هدر بدی ، پس بیا برای شروع کردن فکر درآمد رو از ذهنت بیرون کن چون تا خوب یادنگیری و عاشق کارت نشی نمیتونی به درآمد برسی پس تا آخر این مقاله با من باش و به حرفام خوب گوش کن.

  • خوب نمیخوام خیلی گنده حرف بزنم که خسته بشی از حرفام پس بیایم ساده صحبت کنیم تا بتونم با زبون خودمونی با هم تعامل پیدا کنیم پس شروع کن به خوندن حرفام.

آیا علاقه دارم ؟

علاقه ایجاد کردنیه یعنی وقتی دوست داری یه طراح وب بشی باید علاقه رو در خودت ایجاد کنی که بتونی پیشرفت کنی چون علاقه لازمه پیشرفت برای شروع هر کاریه میتونی علاقه رو با خوندن مطالب در مورد طراحی وب شروع کنی یا افراد بزرگ توی طراحی وب به پادکست هاشون گوش بدی و ... .


تخصص هایی که توی طراحی وب وجود دارن

UI/UX Designer :

تا حالا شده فکر کنی ظاهری که از یه وب سایت داری میبینی چجوری به فکر افتادن که این شکلی بشه. آیا فقط اومدن کد زدن ؟ نه قبلش یه فردی که بهش میگن UI/UX designer میاد ظاهر وب سایت رو داخل نرم افزار های به خصوص مثل : Photoshop ، XD و ... طراحی میکنن. UI رو راحت تر بخوام بگم اینکه که ظاهر وب سایت چه شکلی باشه چه رنگی باشه فونت و ... و UX المان ها و اسکلت وب سایتمون چجوری قرار بگیری کجا قرار بگیره و خیلی از مباحث دیگه که خیلی تخصصی میشه.



برنامه نویس سمت کاربر (client side) یا همون (Front-end developer) :

خیلی ساده بهت بگم کسی هست که طراحی رو از UI/UX designer تحویل میگیره و تبدیل به کد میکنه و بهش میگن Front-end developer و معمولا از زبان های Html , Css , Javascript استفاده میکنن (شاید خیلی ها بگن ما نمیدونیم اینا چی هست نگران نباشید در آخر همین مقاله قراره مسیر یادگیری هم براتون توضیح بدم).


برنامه نویس سمت سرور (server side) یا همون (Back-end developer) :

وقتی میخوای بین مروگرت و سرور مورد نظرت ارتباط برقرار کنی باید یک Back-end developer باشی به عنوان بتونی اطلاعات رو توی سرور ذخیره کنی اسم کاربر ها رو اونجا ذخیره کنی و عکس هاشونو ذخیره کنی و خیلی کارای دیگه که بتونی ارتباط مرورگرت و سرورت رو انجام بدی و معمولا زبان هایی مثل Asp.net ، Php ، node.js و زبان های دیگه که میتونید در موردشون توی اینترنت بخونید.



بهترین روش های یادگیری طراحی وب

  • جستجو در اینترنت و مطالعه مقاله در مورد یادگیری طراحی وب

خوب این روش رایگان و شاید یه مقداری ازتون زمان بگیره و سخت باشه ولی روش خوبیه خودآموزش از این مدل روش ها.

  • ویدئو آموزشی

خوب این روش خیلی خوبیه هزینه کم و هر زمان و مکانی که دوست داشتید میتونید به یادگیری بپردازید و از تجربه های مدرس های که ویدو منتشر میکنن استفاده کنید و بتونید از پشتیبانی های دوره که میخرید استفاده کنید.

  • کلاس های آموزشی

این روش هم میشه روش حساب کرد و خوبه و میتونید مستقیم با مدرس در ارتباط باشید و کلاس ها فقط یه مشکلی دارن اینکه بستگی به فضای علمی کلاس و سرفصل های کلاس داره که بستگی به خودتون داره که چجوری باهاشون کنار بیاین و یکی بشین.

"و در آخر پیشنهاد من به شما اول ویدئو های آموزشی و بعدش جستجو در اینترنت خودآموزی و در آخر کلاس های حضوری برای سطح های بالا "

و حالا اگه واقعا میخوای تبدیل به یک طراح وب بشی باید دستور العمل زیر رو دنبال کنی.


مسیر یادگیری برای طراح وب شدن

با Html شروع کنید

خوب html زبان پایه برای شروع طراحی وب هست که با اون میشه اسکلت یک وب سایت رو درست کرد و کد های html توسط مرورگر به کاربر نشون داده میشه.بنابراین اجزای صفحه وب مثل متن، عکس و.. به کمک تگ‌های html در صفحه وب قرار میگیرن.

با Css ادامه بدین

برای اینکه بتونی به وب سایتت رنگ و لعاب بدی باید از css استفاده کنی و آرایشی که خودت دلت میخواد براش درست کنی به عنوان مثال اگر میخوای سایز و رنگ متن هارو انتخاب کنی باید از css استفاده کنی.


با Javascript کار هاتو حرفه ای نشون بده

بعد از اینکه تونستی با html ، css یک وب سایت دلخواه برای خودت درست کنی حالا باید یه کاری کنی که پویا تر بشه و ساده تر بهت بگم اگر میخوای موقع باز شدن منو وب سایتت یک انیمیشن جذاب داشته باشی باید از javascript استفاده کنی البته حواست باشه که اگه اول مسیر طراحی وب هستی باید به خوبی html ، css رو یادبگیری و بعدش شروع به یادگیری javascript بکنی.


خوب شاید بعضی ها بگن بعد از این ها که مهارت front-end رو به دست آوردیم میخوایم بریم سمت برنامه نویسی سمت سرور یا همون Back-end developer باید اینو بگم که لازم نیست هر دو تخصص رو بلد باشید و هر قسمتی متخصص خودشو داره ولی اگر کسایی که میخوان هر دو رو با هم یاد بگیرن باید اول یک برنامه نویس سمت کاربر یا همون front-end developer خوبی باشن و بعدش شروع به یادگیری این قسمت بکنن.


یک زبان سمت سرور یاد بگیر

وقتی تونستی یه زبان سمت سرور یاد بگیری میتونی ارتباط بین مرورگر و سرورت رو ایجاد کنی به عنوان مثال بتونی هر اطلاعاتی رو که دلت خواست داخل دیتابیس سرورت ذخیره کنی.

خوب این بین زبان های مثل Asp.net و Php هستند که دو زبان محبوب این حوزه محسوب میشن البته زبان هایی مثل Node.js و ... برای این کار وجود دارن.



مدت زمان یادگیری طراحی وب چقدره ؟

خوب اول بگم که جواب این سوال کاملا بستگی به خودتون داره به به عنوان مثال اینجوریه که چقدر وقت میزارید ، چجوری یادمیگیرید ، مسیر یادگیری به شکلیه و سعی تلاش خودتون. ولی بهترین حالت برای طی کردن یادگیری طراحی وب 3 ماه هستش که تبدیل به یک Front-end developer خوبی بشی نمیگم عالی میگم خوب یعنی در حدی که بتونی حرفی برای گفتن داشته باشی. شاید خیلی ها بگن پس زبان سمت سرور چی ؟ اونو کی باید یادبگیریم اینو بگم اگر در اول راه هستین نگران نباشید فعلا باید محدود بشین به html,css,js و بعدش برید سراغ برنامه نویسی سمت سرور.


مسیر طراحی وب به صورت سر فصل

مرحله اول Html :

  • یادگیری پایه و مفهوم
  • مباحث به روز و ..

مرحله دوم Css :

  • یادگیری مقدمات
  • ساخت و یادگیری مفهوم layout ها (Flexbox,Css grid,Box model,Display,Floats,Positioning)
  • مدیا کوئری ها - ریسپانسیو کردن
  • یادگیری و به روز کردن مباحث در Css3

مرحله سوم

  • یادگیری دستور زبان و ساختار پایه
  • یادگیری DOM
  • یادگیری Ajax
  • یادگیری Es6,7,8

و ...

مرحله چهارم یادگیری پیش پردازنده ها در Css :

  • یادگیری Sass یا همون Scss هستش
  • یادگیری Less البته بلد بودنش خوبه ولی توی کارای جدید و پروژه هاتون استفاده نکنید

مرحله پنجم فریم ورک های محبوب Css :

  • یادگیری فریم ورک محبوب سی اس اس Bootstrap
  • یادگیری فریم ورک Materialize Css
  • یادگیری فریم ورک Bulma
  • یادگیری فریم ورک Semantic UI

"یادتون باشه نیاز نیست همشو یاد بگیرید و پیشنهاد من اینه که فقط bootstrap رو یادبگیرید و استفاده کنید"


خوب تا اینجا مراحل رو بهتون گفتم ولی نه همشو چون مباحث دیگه هم هست که دیگه خیلی تخصصی میشه پس بهتره اول کار اونا رو بزاریم کنار و یواش یواش که میریم جلو خودمون اونارو متوجه میشیم و میفهمیم که باید چه چیزایی رو دنبال کنیم و یاد بگیریم


منابع برای یادگیری طراحی وب

اول از همه بهتون بگم این منابع پیشنهاد من هست و من از این منابع استفاده کردم و تجربه خوبی داشتم دوست دارم تجربه های خودمو بهتون معرفی کنم.


منابع یادگیری Html :

منابع یادگیری Css :

منابع یادگیری



خوب دیگه اینم از پست ما تا اینجا براتون نوشتم در مورد چجوری یک طراح وب بشیم و داخل این پست بیشتر به Front-end developer صحبت کردم چون مسیر اول و مهم طراحی وب هست اگر دوست داری در مورد مبحث Back-end developer هم پست بزارم زیر همین پست کامنت کن


امیدوارم تونسته باشم بهتون کمک کنم توسط تجربه های خودم و اگر باز هم سوالی براتون بوجود اومده زیر همین پست برام کامنت کنید تا بهتون راهنمایی کنم.




طراحی وبمسیر یادگیری طراحی وببرنامه نویسی وبیادگیریتجربه
سلام ایلیا هستم یه برنامه نویس Front-end که عاشق چالشه و دوست دارم مطالبی و مباحثی رو که یاد میگیرم با دیگران به اشتراک بزارم. یه دوست خوب مجازی و عاشق نویسندگی در حوزه کاری خودم. عاشق ورزش
شاید از این پست‌ها خوشتان بیاید