مراحل تبدیل شدن به یک طراح وب از صفر تا صد

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

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

اما حالا، فقط پشت لپتاپم میشینم، یا گوشیم رو روشن میکنم، و توی گوگل سرچ میکنم: چطوری فلان کار رو بکنم؟

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

طبیعتا این فضا، از غیب یا عرش الهی نیومده و یه عده آدمیزاد، روش کار کردن که ساخته بشه و بتونه به خوبی کار کنه ( البته من اگه آخوند بودم قطعا میگفتم که اینترنت از الطاف خاصه الهیه که بر بشر نازل شده )

حالا سوال اینجاست: اون آدم ها، چطور سایت ها رو میسازن، و من یا شما چطور میتونیم جزوشون باشیم؟

چطور میتونم یه طراح سایت بشم ؟

اگه شما هم مثل من به کامپیوتر و اینترنت علاقه داشته باشید، ممکنه حداقل یکبار این عبارت رو سرچ کرده باشید: ” چگونه یک طراح سایت شویم ؟”
این موضوع، برای کسی مثل من که از حقوق سراغ طراحی و برنامه نویسی وب اومده بود، خیلی مهم بود و باید سعی میکردم اطلاعات دقیقی رو پیدا کنم.
به همین خاطر، کلی از سایت های ایرانی و خارجی رو سر زدم و حالا هم، این مطلب رو با استفاده از دانش اونوری ها و اینوری ها و تجربیات خودم مینویسم.

توی این مقاله، براتون توضیح میدم که:

1. طراحی وب چی هست
2. به چه دردی میخوره
3. چه مهارت هایی رو احتیاج داره
4. چه مراحلی رو باید براش طی کنید
5. چقدر درآمد داره

و احتمالا چیزهای دیگه ای که در ادامه به ذهنم میرسه.

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

طراحی وب، دو بخش اصلی داره که از این به بعد ( اگه پیگیر قضیه باشید ) قراره اسم اونها رو زیاد بشنوید:

1. فرانت اند Front-End
2. بک اند Back-End

توسعه دهنده فرانت اند یا اصطلاحا Front-End Developer کسیه که ظاهر سایت رو میسازه، یعنی دقیقا همین چیزی که الان دارید توی سایت من می­بینید.

تمامی چیزهای ظاهری و مواردی که کاربر باهاش روبرو میشه، توسط توسعه دهنده فرانت اند ساخته میشه. به این بخش، سمت کاربر یا Client-Side هم میگن. همونطور که از اسمش هم مشخصه، شامل چیزهاییه که کاربر توی یک سایت می­بینه.

اما این، تمام داستان نیست. هر ظاهری، یک باطن هم داره که از دید من و شما پنهان شده. این بخش، اصطلاحا سمت سرور  یا Server-Side نامیده میشه و شامل اتفاقاتیه که پشت صحنه و در سمت سرور می افته و کمک میکنه سایت تغییر کنه، اپدیت بشه و کار کنه.
مواردی مثل برنامه نویسی سمت سرور یا دیتا بیس ها توی این بخش قرار میگیرن و یک توسعه دهنده بک اند یا Back-End Developer باید با اونها سر و کله بزنه و یک سایت داینامیک Dynamic بسازه.

سایت داینامیک، سایتیه که یک سیستم مدیریت محتوا یا CMS پشت اون هست و ادمین سایت میتونه از طریق اون، سایت رو آپدیت کنه، مطالب جدید بذاره و تغییراتی که میخواد رو اعمال کنه.

البته سایت های استاتیک Static هم وجود دارن. این طور سایت ها، سیستم مدیریت محتوا ندارن، یک بار کد نویسی میشن و مطالب فقط یکبار توی اونها بارگزاری میشه و تغییرات زیادی ندارن.

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

یک برنامه نویس فرانت اند باید چه چیزهایی بلد باشه؟

اگه بخوایم خیلی خلاصه بررسی کنیم، این موارد، چیزهاییه که یک فرانت اند دولوپر باید بر اونها مسلط باشه:

• زبان نشانه گذاری فرا متنی یا HTML ( استخون بندی سایت رو تشکیل میده و بخش های مختلف سایت رو میسازه. بدون این زبان نشانه گذاری، سایتی هم وجود نداره )
• Css ( مخفف Cascading Style Sheets، راستش ترجمه فارسی خوبی برای این عبارت پیدا نکردم، ولی به طور خلاصه، زبانیه که برای شکل دادن و تنظیم ظاهر و استایل به کار میره و عملا، کار خوشگل کردن سایت رو به عهده داره )
• زبان جاوا اسکریپت ( اولا که باید اشاره کنم جاوا اسکریپت و جاوا، زمین تا زیرزمین با هم فرق دارن. نقش اصلی جاوا اسکریپت، ایجاد تعامل با کاربر سایته. یعنی به توسعه دهنده اجازه میده که برنامه ای رو بنویسه تا اگر کاربر فلان کار رو انجام داد، سایت بهمان واکنش رو نشون بده. البته این تنها کاربرد زبان جاوا اسکریپت نیست و باهاش میشه خیلی کارها انجام داد )
• یکی از کتابخونه های مطرح جاوا اسکریپت مثل جی کوئری JQuery ( این کتابخونه ها بهتون کمک میکنن که سریعتر، تمیزتر و راحت تر کد بزنید و درگیر پیچیدگی های جاوا اسکریپت نشید. به عبارت ساده تر، نیازی نیست دوباره چرخ رو اختراع کنید!)
• یکی از فریم ورک های مطرح برای طراحی واکنشگرا مثل بوت استرپ Bootstrap ( باید بتونید سایت هایی بسازید که توی دستگاه ها و مرورگر های مختلف، به خوبی نمایش داده بشه و متناسب با اندازه صفحه نمایش، خودش رو تغییر بده )
• پیش پردازنده های سی اس اس مثل Sass یا Less ( این زبان ها بهتون کمک میکنن کدهای Css رو راحت تر بنویسید و تغییر بدید. جدیدا شرکت های مختلف برای استخدام فرانت اند دولوپر، این مورد رو حتما میخوان )
• فریم ورک های جاوا اسکریپت مثل ری اکت js، انگولار Angular و …
• مفاهیم رابط کاربری UI و تجربه کاربری UX ( درمورد اینها بعدا توی یه مقاله جداگانه مفصل توضیح میدم )

توسعه دهنده بک اند باید چی بلد باشه؟

لیست مهارت های یک بک اند دولوپر به طور خلاصه به این شرحه:

• زبان های برنامه نویسی سمت سرور مثل PHP، C#، Python و … ( اینجا هم دونستن یکی از زبان ها کافیه )
• تسلط بر دیتابیس و یکی از زبان های مرتبط با اونها مثل SQL، MongoDB و…
• مسلط بودن بر Restful APIs (این مورد برای برنامه‌نویس‌های فرانت اند هم مهمه) 
• کار کردن با نرم افزار های کنترل نسخه مثل Git
• مفاهیم امنیت سایت

توسعه دهنده فول استک Full-Stack Developer

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

یک Full-Stack Developer باید تمامی مهارت های فرانت اند دولوپر و بک اند دولوپر رو بلد باشه. علاوه بر اینها، باید از تمامی موارد و مفاهیم مرتبط با یک سایت سر در بیاره، حتی چیزی مثل سئو! ( البته نیازی نیست سئوکار حرفه ای باشه )

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

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

برای شروع، چیو انتخاب کنیم؟

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

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

از لحاظ سختی و آسون بودن، طبیعتا فرانت اند راحت تره. شما میتونید توی یک تا دو ماه، Html و Css و پیش پردازنده ها رو یاد بگیرید. یاد گرفتن فریم ورک های فرانت اند مثل بوت استرپ هم کار سختی نیست و توی مدت کوتاهی میشه بهشون مسلط شد.

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

اما طبیعتا بک اند سخت تر و مدت یاد گرفتن اون طولانی تره. متداول ترین راه، یاد گرفتن PHP و MySQL هست. به این ترتیب، توی حدود شش ماه یا کمتر ( به خودتون بستگی داره ) میتونید این موارد رو یاد بگیرید و رسما کار خودتون رو بعنوان برنامه نویس بک اند شروع کنید.

البته این مورد، تنها راه نیست. زبان های دیگه ای مثل C#، پایتون و حتی جاوا هم وجود دارن که میتونید از اونها کمک بگیرید. ( سعی میکنم توی اولین فرصت یه راهنمای جامع درمورد این زبان ها، تفاوت ها و کاربردهاشون و نقاط ضعف و قوتشون در طراحی وب بنویسم )

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

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

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

درآمد طراح های سایت چقدره؟

مشخصا درآمد افراد، با توجه به توانایی و تلاششون متفاوته. خوشبختانه توی این کار، مواردی مثل پارتی بازی خیلی کمتره و اینطوری نیست که چون فلان آدم، توی فلان اداره پارتی داشته، تونسته مقام بالاتر و پول بیشتری بدست بیاره ( البته خب استثنا هم همیشه هست، چون بند پ ( پول، پارتی و پررویی ) عامل موفقیت خیلیا توی این کشور بوده )

دلیل کمتر بودن پارتی بازی توی طراحی وب هم اینه که حیطه کاری شما معمولا شرکت های خصوصیه و اونجا، خروجی و کیفیت کار خیلی مهمه، چون بودجه ثابت دولتی وجود نداره و شرکت باید بتونه از کار شما پول دربیاره تا بتونه حقوق شما رو بده! ( داستان برای فریلنسرها هم تقریبا همینه )

اما اگه بخوایم به طوری میانگین بررسی کنیم، یه برنامه نویس فرانت اند سطح بالا، معمولا حدود ۴ تا ۵ میلیون تومن در سال ۹۸ درآمد داره. البته قاعدتا افرادی هستن که بیشتر از این پول درمیارن و افرادی هم هستن که درآمد ماهانه شون ۱ تا ۲ میلیون تومنه!

برای برنامه نویس های بک اند هم، به طوری میانگین ۶ تا ۸ میلیون حقوق پرداخت میشه ( این رو با توجه به حقوق دوستانم و آگهی های جابینجا میگم ) و خب قطعا رقم های بیشتر و کمتر هم وجود داره.

اگه بخوایم خارج از ایران رو در نظر بگیریم، حقوق یه برنامه نویس فرانت اند در آمریکا، به طور میانگین حدود ۹۰ هزار دلار در ساله، که این مبلغ برای برنامه نویس بک اند، به حدود ۱۲۵ هزار دلار در سال میرسه.

چطوری و از کجا شروع کنم؟

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

اما در کل، دانش نظری و مطالعه هم همیشه مهمه. اما سوال اینه که این دانش رو از کجا به دست بیاریم؟

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

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

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

ولی بازم تاکید میکنم، ممکنه این راه برای همه جواب نده و اگه مطمئن هستید که تنهایی از پس قضیه برنمیاین و با کلاس حضوری نتیجه بهتری میگیرید، پس تردید نکنید و اون راه رو برید. مهم کسب نتیجه است، مهم نیست از چه راهی ( قاعدتا این حرف رو فقط توی حوزه برنامه نویسی میگم! )

بگذریم.

برای شروع یادگیری، سایت W3Schools.com میتونه یکی از بهترین گزینه ها باشه. این سایت تقریبا تمام مواردی که نیاز دارید تا به سطح متوسطی از مهارت برسید رو بهتون میده. البته مساله مهم اینجاست که باید زبان انگلیسی تون رو تقویت کنید تا بتونید از این سایت استفاده کنید.

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

البته اینم اضافه کنم که سایت W3Schools به فارسی ترجمه شده و سایت بیاموز beyamooz.com، متن فارسی رو با یه ترجمه خوب بهتون ارائه میده. ولی همونطور که قبلا هم گفتم، برای تبدیل شدن به یک دولوپر سطح بالا، حتما به زبان انگلیسی احتیاج دارید.

منبع بعدی، Mozilla Developer Network یا به اختصار MDN هست. این سایت هم متون آموزشی زیادی رو در اختیارتون قرار میده که میتونید باهاش چیزهای فوق العاده ای در زمینه طراحی وب یاد بگیرید، البته به زبان انگلیسی!

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

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

اگر هم نیاز به کتاب برای یادگیری داشتید، میتونید به من توی شبکه های اجتماعی پیام بدید تا براتون در قالب pdf بفرستم یا اگر نداشتم، راهنمایی تون کنم. البته منابعی که بهتون معرفی میکنم، قطعا به زبان انگلیسی هست 😊

حرف آخر!

همین طور که دارم می نویسم، مدام مطالب بیشتری به ذهنم میاد که به نظرم ارزش نوشتن رو دارن. اما همزمان، شمارشگر کلمات ورد داره بهم اخطار میده که متن رو زیادی طولانی نکن.

با وجود این، تمامی مطالبی که میشد توی این متن بیاد ولی نیومد رو به شکل تیتر وار یادداشت کردم و به مرور، اونها رو می نویسم و منتشر میکنم.

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