برنامه‌ نویسی فرانت‌ اند | مسیر یادگیری و کسب درآمد از طراحی سایت فرانت‌ اند

برنامه‌ نویسی فرانت‌ اند چیست و طراحی سایت فرانت اند چطور انجام میشه؟ توسعه دهنده فرانت اند چیست و چطور میشه توسعه‌ دهنده فرانت‌ اند شد؟ فرانت‌ اند و بک‌ اند با هم چه تفاوتی دارن؟

قراره به همه‌ی سوالاتون جواب بدیم. همه چیز در مورد فرانت اند ؛ تمام و کمال، بدون پیچیدگی (چون اصلاً پیچیده نیست!).

فرانت‌ اند همون کدهای غیرقابل‌فهم برای کاربر‌های عادیه؛ و وظیفه‌‌ی توسعه دهنده فرانت‌ اند ، نمایش این کدها در قالب ظاهر گرافیکی به کاربران هست تا بتونن راحت‌تر از فضای یک صفحه وب استفاده کنن.

برنامه‌ نویسی فرانت‌ اند برخلاف اسمش اونقدرا هم سخت نیست. در این مورد با دو برنامه‌نویس درجه یک گفت‌وگو کردیم:

مهندس یحیی صیاد اربابی که می‌تونین متن مصاحبه کاملش رو در وبلاگ شخصی امین آرامش بخونید و مرتضی شجاعی دوست داشتنی که قسمت 68ام پادکست کارنکن رو به خودش اختصاص داده.

با جستجو در این حوزه احتمالاً با کلماتی مثل “توسعه دهنده وب”، “برنامه‌ نویس بک‌ اند”، “فول استک” و … مواجه میشین. در ادامه توضیح میدیم.

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

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

فهرست مطالب:

1. برنامه نویسی فرانت اند چیست؟
2. تفاوت برنامه‌ نویسی فرانت‌ اند و بک‌ اند
3. مسیر یادگیری برنامه‌ نویسی فرانت‌ اند
   1. 3. زبان HTML
   2. 3. زبان CSS
      • منابع یادگیری HTML و Css
   3. 3. جاوا اسکریپت (JavaScript)
      • منابع یادگیری جاوا اسکریپت
   4. 3. فریم‌ورک‌ و لایبرری (Framework & Library)
      • منابع یادگیری فریم‌ورک و لایبرری
   5. 3. گیت (Git)
      • منابع یادگیری گیت
4. یادگیری کدنویسی فرانت‌ اند چقدر زمان نیاز داره؟
5. کسب درآمد از برنامه‌ نویسی فرانت‌ اند
6. درآمد دلاری با برنامه‌ نویسی فرانت‌ اند
7. مهاجرت با برنامه‌ نویسی فرانت‌ اند
8. مصاحبه شغلی
9. مهارت‌های نرمی که باید بلد باشید
10. حرف آخر
11. سوالات متداول

1. برنامه‌ نویسی فرانت‌ اند چیست؟

شاید مثال صحنه تئاتر رو شنیده باشید. معمولاً برای درک بهتر برنامه‌ نویسی فرانت‌ اند از این مثال استفاده می‌کنن:

شما به عنوان تماشاگر تئاتر (سمت کاربر)، می‌تونید بازیگرا، گریم، محیط صحنه و … رو ببیند؛ اما پشت پرده (سمت سرور) برای شما معلوم نمیشه.

برای طراحی سایت فرانت اند وظیفه‌ی ما هم دقیقاً تبدیل رابط کاربری طراحی شده از سمت طراح یا دیزاینر به كد هست؛ یعنی هر چیزی که ما از یک صفحه وب داریم توی مرورگر خودمون میبینیم به وسیله‌ی توسعه دهنده فرانت‌ اند (front end developer) نوشته شده.

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

با ما همراه باشید تا همه چیز درباره فرانت اند براتون روشن بشه.

2. تفاوت برنامه‌ نویسی فرانت‌ اند و بک‌ اند

به جای واژه برنامه‌‌نویس برای این افراد بهتره از کلمه “توسعه دهنده” استفاده بشه.

میشه گفت برنامه‌ نویسی فرانت‌ اند (Front-End) و بک‌ اند (Back-End) دو روی یه سکه هستن به‌طوری که عملکرد یک وبسایت به هر دوی اونا بستگی داره.

هر کدوم از اونا روی بخش‌های مختلفی از یک وبسایت کار می‌کنند. اما نکته مهمی که باید بهش دقت کنین اینه که این دو تا کاملاً روی کیفیت هم‌دیگه تاثیر میذارن؛ درواقع اونا مکمل هم هستن.

فرق اساسی توسعه‌ دهنده فرانت‌ اند و بک‌ اند اینه که شما کدهای فرانت‌ اند (مثل: Html ,Css ,JavaScript) رو توی لپ‌تاپتون هم میتونید اجرا کنید،. اما کدهای بک‌ اند برای اجرا نیاز به پردازش سمت سرور دارن یعنی یا باید کدها رو ببرید سمت سرور تا اجرا بشن یا اینکه توی سیستم‌تون یک نرم افزار سرور مجازی مثل زمپ یا ومپ نصب کنید.

3. مسیر یادگیری برنامه‌ نویسی فرانت‌ اند

اگه در این زمینه مبتدی هستین، قبل از هر چیز باید یه کلیتی درباره وب بدونید؛ مثلاً اینکه هاست چیه؟ دامنه چیه؟ چطور یه وبسایت رو راه‌اندازی کنید؟ و یه سری چیزای دیگه …

حالا در گام بعدی طراحی سایت فرانت اند باید دو تا زبان یاد بگیرین: آقای مهندس Html و سرکار خانم Css
در واقع Html یه زبان نشانه‌گذاری یا فرامتنی هست و Css هم زبان سبک استایل‌دهی معرفی میشه. هر کدوم رو جدا توضیح میدیم.

بعد از یادگیری این دو بزرگوار باید بریم سراغ عالی‌جناب جاوا اسکریپت (JavaScript) که در ادامه توضیح میدیم.

3.1. زبان HTML

همون‌طور که گفیتم HTML (HyperText Markup Language) یک زبان نشانه‌گذاری فرامتنیه و نباید با زبان برنامه‌نویسی اشتباه گرفته بشه.

از Html برای جداسازی و پیکربندی اجزاء یک صفحه وب؛ مثلاً عناوین، فهرست، پاراگراف‌ها، تصاویر و… استفاده میشه. به عبارت دیگه Html بخش‌های تشکیل‌دهنده یک صفحه رو کنار هم قرار میده تا چهارچوب اصلی صفحه وب رو برای ما ایجاد کنه.

در طراحی سایت فرانت اند ، با Html بدنه اصلی وبسایت رو می‌سازیم.

3.2. زبان CSS

CSS (Cascading Style Sheets) به نوعی مکمل زبان Html برای برنامه‌ نویسی فرانت‌ اند هست.

این زبان با هدف فرم‌دهی صفحه‌های وب Html و قسمت‌های مختلف اون توسط کنسرسیوم بین‌المللی شبکه جهانی وب (W3C) توسعه داده شده.

Css در کنار Html و JavaScript از هسته‌های اصلی طراحی صفحات وب به حساب میان.

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

خوبه که قبل از یادگیری Css یا حین یادگیری، یه خورده فتوشاپ هم آموزش ببینید.

منابع یادگیری HTML و Css

تا اینجا با دو زبان پایه برنامه‌ نویسی یعنی HTML و CSS آشنا شدین.

دو عنصر مهم در مسیر یادگیری این دو تا به‌ کارتون میاد؛ اولیش علاقه‌ست و دومی هم پشتکار!

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

یه مرجع عالی برای یادگیری Html و Css سایت w3schools هست. توی این سایت شما به کلی آموزش دیگه هم در زمینه برنامه‌نویسی دسترسی دارین اون هم کاملاً رایگان!

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

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

ویدیوی زیر که بخشی از گفتگو با مرتضی شجاعی هست به شما نشون میده چطور از سایت w3school برای یادگیری Html و Css استفاده کنین.

نسخه کامل این ویدیو رو می‌تونید از یوتیوب کارنکن ببینید. (قبل از ورود قندشکن فراموش نشه)

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

3.3. جاوا اسکریپت (JavaScript)

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

احتمالاً توی مسیر یادگیری Html و Css به یه سری مشکلات برمی‌خورین که به دست‌های توانمند جاوا اسکریپت حل و فصل میشه. البته توانایی‌های جاوا اسکریپت به اینجا ختم نمیشه.

جاوا اسکریپت(Js) یه زبان همه فن حریفه! از این زبان برای برنامه‌نویسی سمت سرور (Server Side)، اپلیکیشن‌های موبایل، دسکتاپ و حتی بازی‌ها هم استفاده میشه. یعنی با یادگیری این زبان با یه تیر چند نشون می‌زنین.

منابع یادگیری جاوا اسکریپت

اگه زبان انگلیسی‌تون خیلی خوب نیست می‌تونید از کورس‌های فارسی استفاده کنید. مراجع زیر آموزش‌های نسبتاً خوبی ارائه دادن:

• سون لرن
• سبز لرن
• رشدانا

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

• دوره آموزشی آقای مشفق همدانی (مُش همدانی)
• سایت w3school

متأسفانه دوره‌های مُش همدانی برای ایرانی‌ها قابل خریداری نیست!

اما راه حل:

• یه تعداد از دوره‌های ایشون توسط سایت‌های داخلی هم ارائه میشن.
• بعضی از آموزش‌های ایشون رو می‌تونید از یوتیوب و تلگرام دانلود کنید.
• شما حتی می‌تونین به ایشون ایمیل بزنین که لینک آموزش‌هاشون رو براتون بفرستن.

شاید اسم JQuery به گوش‌تون خورده باشه. این زبان شاید قبلاً خیلی استفاده میشد اما الان یادگیری اون خیلی ضروری نیست.
پیشنهاد ما اینه که زمانش رو به تقویت جاوا اسکریپت اختصاص بدین.

3.4. فریم‌ورک‌ و لایبرری (Framework & Library)

بعد از یادگیری 3 مرحله اول؛ یعنی JavaScript, Css, HTML حالا به یک سری استانداردها برای طراحی سایت فرانت‌ اند نیاز داریم که از اینجا به بعد نقش فریم‌ورک‌ و کتابخانه پررنگ‌تر میشه.

فریم‌ورک‌های زیادی در این زمینه وجود دارن اما 3 تا از مهم‌ترین‌هاش رو براتون نام می‌بریم:

• React.Js
• Angular
• Vue.js

نکته‌ 1: برای یادگیری اینا نباید همزمان اقدام کنین!

پیشنهاد ما برای یادگیری، React هست چون اولاً بازار کار بهتری نسبت به بقیه داره دوماً به تبع بازار کارش، مخاطب‌های بیشتری هم داره.

نکته 2: از حالا به بعد نقش زبان انگلیسی پررنگ‌تر میشه. شما حتی اگه دوره آموزش فارسی خوبی هم پیدا کنین برای رفع اشکال باید برین سراغ منابع زبان انگیسی.

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

منابع یادگیری فریم‌ورک و لایبرری

اینجا هم مثل جاوا اسکریپت دوره‌های آقای مُش همدانی کارگشاست. اما متأسفانه این دوره برای ایرانی‌ها قابل خریداری نیست!

راه حلش رو قبلاً توضیح دادیم. اگه نخوندین اینجاست.

3.5. گیت (Git)

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

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

برای اینکه برنامه‌نویس‌ها و توسعه‌دهنده‌ها بتونن پروژه‌های خودشون رو به اشتراک بذارن یا با هم همکاری کنن به یک فضای ابری احتیاج دارن که معروف‌ترینش گیت‌هاب (GitHub) هست. در واقع این سرویس برای میزبانی و نگه‌داری پروژه‌های گیت شماست.

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

توی این زمینه اتفاقاً میخوایم یه دوره آموزشی عالی رایگان اونم به زبان فارسی معرفی کنیم:

• آموزش گیت، گیت‌هاب و گیت‌لب مهندس جادی میرمیرانی

4. یادگیری کدنویسی فرانت‌ اند چقدر زمان نیاز داره؟

این مورد کاملاً بستگی به خود شما داره…

• اینکه توی نقطه شروع در چه سطحی هستین؟
• چقدر به این کار علاقه دارین؟
• در روز چقدر وقت میذارین؟
• و …

اما تجربه نشون داده بین 6 تا 18 ماه این زمان متغیره که باز هم میگیم کاملاً به خودتون بستگی داره.

5. کسب درآمد از برنامه‌ نویسی فرانت‌ اند

بعد از آموزش طراحی وب سایت front end نوبت به درآمدزایی از این مهارت میرسه.

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

این هم درنظر داشته‌باشید که نمیشه روی این درآمد حساب باز کرد. چرا؟

1. درآمدش خیلی کمه.
2. چون زبان سطح پایینی هست طبیعتاً خیلی‌ها اونو بلدن و رقابت سر همين درآمد ناچيز هم خیلی زیاده.

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

در حال حاضر (1402) به عنوان برنامه‌نویس آماتور میتونید به درآمد 8 تا 10 میلیون تومن برسید. در این مورد میتونین به سایت‌های کاریابی مراجعه کنید.

قاعدتاً هر چی تجربه و مهارت شما بالاتر میره دستمزدتون هم افزایش پیدا می‌کنه؛ مثلاً توسعه‌دهنده‌های فرانت‌ اند حرفه‌ای در ایران ماهیانه تا 60 میلیون تومن هم درآمد دارن.

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

اگه به شرکت‌های فعال در حوزه برنامه‌ نویسی فرانت‌ اند دسترسی دارین، سعی کنید حتماً کارآموزی یا کارمندی رو تجربه کنید.

برای تجربۀ اول حتماً باید دو تا نکته رو رعایت کنید:

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

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

6. درآمد دلاری با برنامه‌ نویسی فرانت‌ اند

بعد از حدود یکی دو سال که خوب توی این حوزه جا افتادین، میتونین درآمد دلاری هم داشته باشین!

برای شروع میشه به درآمدی در حدود هزار تا هزار و 500 دلار در ماه رسید.

این رقم برای کسایی که در ایران با شرکت‌های خارجی فعالیت دارن به 5 تا 6 هزار دلار هم می‌رسه!

7. مهاجرت با برنامه‌ نویسی فرانت‌ اند

به جرئت میشه گفت آسون‌ترین راه برای مهاجرت برنامه‌نویس‌ها، مهاجرت از طریق فرانت‌ اند هست!

این جمله رو مرتضی میگه که همین الان هم داره برای شرکت‌های خارجی کار می‌کنه.

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

• مجارستان
• نروژ
• انگلستان
• سوییس
• آلمان

8. مصاحبه شغلی

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

اما برای آمادگی در روز مصاحبه هم باید نکاتی رو در نظر داشته‌ باشید که اینجا مفصل بهش پرداختیم.

از این اصول و قواعد که بگذریم مرتضی شجاعی در پادکست کارنکن به نکات خوبی اشاره می‌کنه.

نسخه کامل این ویدیو رو می‌تونید از یوتیوب کارنکن ببینید. (قبل از ورود قندشکن فراموش نشه)

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

9. مهارت‌های نرمی که باید بلد باشید

علاوه بر چیزهایی که گفیتم شما باید مهارت‌هایی تحت عنوان مهارت نرم (soft skills) داشته باشین. تعدادی از این‌ها ذاتی هستن و شما باید اون‌ها رو در خودتون تقویت کنید. اما مهارتی مثل زبان انگلیسی که از اوجب واجبات هست فقط با تکرار و تمرین بیشتر میسر میشه.

• زبان انگیسی
• پیگیر بودن و پشتکار داشتن
• یادگیرنده بودن
• شبکه‌سازی
• بازاریابی
• مدیریت زمان

10. حرف آخر

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

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

با نکاتی که گفتیم، می‌تونید در کم‌تر از یک سال به یک برنامه‌ نویس فرانت‌ اند تبدیل بشین و کسب درآمد کنید؛ اما توی این مسیر تلاش و پشتکار رو فراموش نکنید!

11. سوالات متداول

مطالب مرتبط با این محتوا

توی مسیر یادگیری‌تون یه تعداد نقشه راه داریم که حتماً به دردتون می‌خوره:

گام اول برای هر برنامه‌نویس یادگیری زبان انگلیسیه؛ شما هم از این قاعده مستثنا نیستین:

حالا که زبان انگلیسی رو بلد شدین باید بلد باشین توی مسیر یادگیری‌تون ازش استفاده کنین:

یادتون که نرفته! شما میخواین از آموزش‌تون پول دربیارین:

تا اونجا که تونستیم تلاش کردیم برنامه‌ نویسی فرانت‌ اند رو به‌طور كامل براتون تشريح كنيم.

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

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