۴۱۰۰+
کدآموز
۶۰+
تمرین عملی
۱۳۰+
درسنامه آموزشی
به همراه گواهی معتبر
۹۰ روز مهلت گذراندن دوره
صفر تا صد مفاهیم HTML | CSS | Tailwind | JavaScript | Ajax | Sass
رشد ۱۳٪
تعداد برنامهنویسان فرانتاند از سال ۲۰۲۰ تا سال ۲۰۳۰
رتبه یکم
پراستفادهترین زبان برنامهنویسی در سال ۲۰۲۲
۲۶.۵٪ رشد
درآمد سالانه برنامهنویسان فرانتاند از سال ۲۰۲۱ به ۲۰۲۲
بهترین نقطه آغاز
برای ورود به حوزهٔ توسعه فرانتاند وب
معرفی
حامیان
مخاطبین
پیشنیازها
سرفصلها
پروژهها
اساتید
0 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 1
مسیر آموزشی فرانتاند کوئرا کالج با به کارگیری تجربیات بهترین توسعه دهندگان صنعت نرم افزار شکل گرفته است. این مسیر با زبانهای HTML، CSS و JavaScript شروع شده و با یادگیری Tailwind، JQuery و Ajax ادامه مییابد.
این دوره مناسب شما است اگر...
• مشتاقید به بازار پردرآمد برنامهنویسی و حوزهی نرمافزار وارد شده و آیندهی شغلی خود را رقم بزنید.
• برای پروژههای شخصی یا کاری خود نیاز به یادگیری CSS ،HTML و JavaScript دارید.
• میخواهید CSS ،HTML و JavaScript را به صورت عملی و برای همیشه به شکل اصولی بیاموزید.
• بازار کار و حقوق بالای برنامهنویسان در داخل و خارج ایران برایتان جذاب است.
این دوره مناسب شما نیست اگر...
• هنوز فکر میکنید که شرکتها برای استخدام به مدرک دانشگاهی شما توجه میکنند.
• تجربهی عملی چندین هزار خط کدنویسی برایتان ارزشی ندارد.
• حاضر نیستید در هفته ۶ ساعت برای یادگیری، پیشرفت و رشد درآمدتان زمان بگذارید.
• میخواهید CSS ،HTML و JavaScript را به طور سطحی و گذرا بیاموزید.
پبشنیازها
لازم است...
علاقه و پشتکار داشته باشید.
مبانی برنامهنویسی را بشناسید.
لازم نیست...
در رشتهی کامپیوتر تحصیل کرده باشید.
دانش ریاضی قوی داشته باشید.
درسنامه
ویدئو
تمرین
اهداف فصل
درسنامه
مقدمهای بر HTML
درسنامه
نگاه اولیه به HTML
درسنامه
المانهای HTML
درسنامه
ساختار HTML
درسنامه
المانهای نمایش متن - بخش ۱
درسنامه
المانهای نمایش متن - بخش ۲
درسنامه
جمله نقلقول
۱۰۰ امتیاز
تمرین
دعوتنامه ساده
۱۰۰ امتیاز
تمرین
ساخت لینک - بخش ۱
درسنامه
ساخت لینک - بخش ۲
درسنامه
لینک تایید دعوتنامه
۱۰۰ امتیاز
تمرین
لینکهای مفید
درسنامه
لیستها
درسنامه
لیست کارها
۱۰۰ امتیاز
تمرین
عکسها - بخش ۱
درسنامه
عکسها - بخش ۲
درسنامه
لوگو دعوتنامه
۱۰۰ امتیاز
تمرین
پخش ویدئو
درسنامه
فیلم تبلیغ
۱۰۰ امتیاز
تمرین
پخش صدا
درسنامه
زبان اسپانیایی!
۱۰۰ امتیاز
تمرین
مرور فصل
درسنامه
اهداف فصل
درسنامه
بخشبندی صفحات با div
درسنامه
block یا inline
درسنامه
جدولها - بخش ۱
درسنامه
جدولها - بخش ۲
درسنامه
جدول دعوتشدگان
۱۰۰ امتیاز
تمرین
برنامه کلاسها
۱۰۰ امتیاز
تمرین
المانهای فرم - بخش ۱
درسنامه
المانهای فرم - بخش ۲
درسنامه
المانهای فرم - بخش ۳
درسنامه
فرم دعوتنامه
۱۰۰ امتیاز
تمرین
فرم ثبت سفارش
۱۰۰ امتیاز
تمرین
المان iframe
درسنامه
نقشه کوئرا
۱۰۰ امتیاز
تمرین
تگهای معنادار
درسنامه
وبلاگ من
۱۰۰ امتیاز
تمرین
المانهای داخل head
درسنامه
کوئیز پایانی
۱۰۰ امتیاز
تمرین
اهداف فصل
درسنامه
مقدمهای بر طراحی تجربه کاربری
درسنامه
مقدمهای بر طراحی رابط کاربری
درسنامه
آشنایی با Wireframing
درسنامه
استفاده از رنگها
درسنامه
تایپوگرافی
درسنامه
مرور فصل و معرفی منابع بیشتر
درسنامه
نقشه کوئرا
۱۰۰ امتیاز
تمرین
فرم ثبت سفارش
۱۰۰ امتیاز
تمرین
مدیاکده
۱۰۰ امتیاز
تمرین
برنامه کلاسها
۱۰۰ امتیاز
تمرین
وبلاگ من - بخش اول
۱۰۰ امتیاز
تمرین
جدول دعوتشدگان
۱۰۰ امتیاز
تمرین
رضایت مشتری
۱۰۰ امتیاز
تمرین
راهاندازی VSCode
درسنامه
افزونههای VSCode
درسنامه
Live Server
درسنامه
خروجی لحظهای در موبایل
درسنامه
افزونه Emmet
درسنامه
اهداف فصل
درسنامه
CSS چیست؟
درسنامه
استایلهای inline
درسنامه
روشهای دیگر استایلدهی
درسنامه
استایلهای اولیه
درسنامه
رنگها
درسنامه
دستهبندی رستورانها
۱۰۰ امتیاز
تمرین
خبرنامه کوئرا
۱۰۰ امتیاز
تمرین
مدل جعبهای
درسنامه
حاشیهی المان
درسنامه
دوز
۱۰۰ امتیاز
تمرین
هزینه اشتراکها
۱۰۰ امتیاز
تمرین
دکمه زشت
۱۰۰ امتیاز
تمرین
استایل دادن به متنها
درسنامه
کوئرا بلاگ
۱۰۰ امتیاز
تمرین
پست وبلاگ
۱۰۰ امتیاز
تمرین
اضافه کردن فونت به پروژه
درسنامه
صفحه کوئرا کالج!
۱۰۰ امتیاز
تمرین
اهداف فصل
درسنامه
آشنایی با چیدمان یک صفحه
درسنامه
روند نرمال
درسنامه
خاصیت Display
درسنامه
آشنایی با Flexbox
درسنامه
فرزندان flex!
درسنامه
پرسشنامه
۱۰۰ امتیاز
تمرین
آشنایی با Grid
درسنامه
فرزندان grid!
درسنامه
فیلتر محصولات
۱۰۰ امتیاز
تمرین
خاصیت Position
درسنامه
مودال
۱۰۰ امتیاز
تمرین
چیدمان چندستونی
درسنامه
طراحی Responsive
درسنامه
منو واکنشگرا
۱۰۰ امتیاز
تمرین
تعدادی مجید!
۱۰۰ امتیاز
تمرین
اهداف فصل
درسنامه
واحدهای اندازهگیری در CSS
درسنامه
استایل دادن به فرمها
درسنامه
فرم تماس با ما
۱۰۰ امتیاز
تمرین
کلاسهای Pseudo
درسنامه
نظرات کاربران
۱۰۰ امتیاز
تمرین
سرفصلها
درسنامه
مفهوم Pseudo Elements
درسنامه
رزرو پرواز - بخش اول
۱۰۰ امتیاز
تمرین
انتخابکننده تودرتو
۱۰۰ امتیاز
تمرین
ارثبری
درسنامه
Cascade و Specificity
درسنامه
رزرو پرواز - بخش دوم
۱۰۰ امتیاز
تمرین
فرم تماس با ما - بخش دوم
۱۰۰ امتیاز
تمرین
استایل دادن به عکسها
درسنامه
گالری تصاویر محصول
۱۰۰ امتیاز
تمرین
استایل دادن به لینکها و لیستها
درسنامه
منوی نوبار
۱۰۰ امتیاز
تمرین
فوتر
۱۰۰ امتیاز
تمرین
استایل دادن به جدولها
درسنامه
جدول مسابقات
۱۰۰ امتیاز
تمرین
منوی سایدبار
۱۰۰ امتیاز
تمرین
داشبورد کوئرا
۱۰۰ امتیاز
تمرین
فیلتر محصولات
۱۰۰ امتیاز
تمرین
پرسشنامه
۱۰۰ امتیاز
تمرین
کاور دعوتنامه
۱۰۰ امتیاز
تمرین
دکمه فوکوس
۱۰۰ امتیاز
تمرین
جدول مهمانان
۱۰۰ امتیاز
تمرین
اهداف فصل
درسنامه
آشنایی با Tailwind
درسنامه
نصب و راه اندازی
درسنامه
چند مثال ساده
درسنامه
مفاهیم اصلی
درسنامه
سفارشیسازی tailwind
درسنامه
تایپوگرافی
درسنامه
اندازهها
درسنامه
فاصلهها
درسنامه
حاشیهها
درسنامه
پروفایل تیلویندی مجید!
۱۰۰ امتیاز
تمرین
Layout
درسنامه
Flex
درسنامه
Grid
درسنامه
Transitions
درسنامه
انیمیشن
درسنامه
مجیدهای تیلویندی!
۱۰۰ امتیاز
تمرین
گالری بستنی - بخش اول
۱۰۰ امتیاز
تمرین
گالری بستنی - بخش دوم
۱۰۰ امتیاز
تمرین
گالری بستنی - بخش سوم
۱۰۰ امتیاز
تمرین
کار با پلاگینها
درسنامه
اهداف فصل
درسنامه
خروجی
درسنامه
متغیرها
درسنامه
انواع داده
درسنامه
تبدیل نوع
درسنامه
ورودی
درسنامه
ورودی، خروجی ساده
درسنامه
خوشآمد گویی
۱۰۰ امتیاز
تمرین
عملگرهای حسابی
درسنامه
ترکیب عملگرهای حسابی و انتساب
درسنامه
کار با ورودی و خروجی
۱۰۰ امتیاز
تمرین
عملگرهای منطقی و رابطهای
درسنامه
شرط
درسنامه
بررسی عدد
۱۰۰ امتیاز
تمرین
سوییچ کیس
درسنامه
حلقه
درسنامه
نکات حلقه
درسنامه
تحلیل دما
۱۰۰ امتیاز
تمرین
توابع
درسنامه
سایر روشهای ساخت تابع
درسنامه
نکات توابع
درسنامه
حوزهی تعریف
درسنامه
آرایه
درسنامه
متدهای مهم آرایه
درسنامه
جستوجو در آرایه
درسنامه
مرتبسازی آرایه
درسنامه
کار با آرایه
۱۰۰ امتیاز
تمرین
رشتهها
درسنامه
دسترسی به کاراکترها
درسنامه
زیررشتهگیری و چسباندن رشتهها
درسنامه
جستوجو در رشته
درسنامه
متدهای مهم رشته
درسنامه
بررسی رشتهها
۱۰۰ امتیاز
تمرین
آبجکت
درسنامه
نکات آبجکت
درسنامه
زنجیرهکردن
درسنامه
مدیریت تسکها
۱۰۰ امتیاز
تمرین
تاریخ
درسنامه
تاریخ شمسی
درسنامه
چند سالته؟
۱۰۰ امتیاز
تمرین
اهداف فصل
درسنامه
عبارات با قاعده
درسنامه
آشنایی با عبارات منظم در جاوااسکریپت
درسنامه
اصلاح شماره موبایل
۱۰۰ امتیاز
تمرین
شماره موبایل امن
۱۰۰ امتیاز
تمرین
Destructuring
درسنامه
نگاشتها
درسنامه
محدوده دسترسی
درسنامه
توابع به عنوان متغیر
درسنامه
مساحت
۱۰۰ امتیاز
تمرین
Callback Hell
درسنامه
بشمار
۱۰۰ امتیاز
تمرین
کلاس ها در جاوااسکریپت
درسنامه
getter و setter
درسنامه
ایستایی یا خصوصی بودن مسئله این است
درسنامه
وراثت (Inheritance)
درسنامه
اهداف فصل
درسنامه
جاوا اسکریپت چیست؟
درسنامه
اتصال فایلهای جاوا اسکریپت به HTML
درسنامه
معرفی DOM
درسنامه
انتخابگرها
درسنامه
دسترسی به خصوصیتها در DOM
درسنامه
مدیریت کلاسها و استایلها
درسنامه
انتخابکننده تودرتو (JS)
۲۰۰ امتیاز
تمرین
آشنایی با رویدادها (۱)
درسنامه
آشنایی با رویدادها (۲)
درسنامه
چرخه انتشار رویدادها
درسنامه
رویدادهای موس و صفحهکلید
درسنامه
اسلایدر
۲۰۰ امتیاز
تمرین
ویرایشِ پویای صفحه
درسنامه
بازی XO - بخش اول
۲۰۰ امتیاز
تمرین
تابعهای مهم در window
درسنامه
رنگها!
۲۰۰ امتیاز
تمرین
ذخیره داده در مرورگر
درسنامه
سنجشگر!
۲۰۰ امتیاز
تمرین
مدل همزمانی در جاوااسکریپت
درسنامه
بازی XO - بخش دوم
۲۰۰ امتیاز
تمرین
بازی XO - بخش سوم
۲۰۰ امتیاز
تمرین
اهداف فصل
درسنامه
کدنویسی ماژولار
درسنامه
تاریخچه ماژولها در جاوااسکریپت
درسنامه
ES Modules
درسنامه
export و import کردن ماژولها
درسنامه
معرفی npm
درسنامه
نصب پکیج با npm
درسنامه
آشنایی با پکیج Jalali Moment
درسنامه
کتابخانه lodash
درسنامه
🆙 بازگشت از بوستان
۱۰۰ امتیاز
تمرین
🆙 زوجیت
۱۰۰ امتیاز
تمرین
🆙 دو نقطه خط
۱۰۰ امتیاز
تمرین
❌ یخ
۱۰۰ امتیاز
تمرین
🆙 یک سوال ساده
۱۰۰ امتیاز
تمرین
🆙 سوال زرد
۱۰۰ امتیاز
تمرین
🆙 رژیم سخت
۱۰۰ امتیاز
تمرین
🆙 شمردنِ سخت
۱۰۰ امتیاز
تمرین
🆙 آسونِ سخت
۱۰۰ امتیاز
تمرین
🆙 جدول ضرب گنده
۱۰۰ امتیاز
تمرین
🆙 شتری 🐪
۱۰۰ امتیاز
تمرین
🆙 گرانترین سهم
۱۰۰ امتیاز
تمرین
🆙 تخمین زمان مطالعه
۱۰۰ امتیاز
تمرین
محصولات
۱۰۰ امتیاز
تمرین
اهداف فصل
درسنامه
مقدمهای بر ریکوئستها و HTTP
درسنامه
آشنایی با Restful API
درسنامه
Promise در جاوااسکریپت
درسنامه
بیشتر در مورد ریکوئستها
درسنامه
آشنایی با Fetch API
درسنامه
طرز کار با async/await
درسنامه
بورس بازی!
۲۰۰ امتیاز
تمرین
فاز دوم فروشگاه آنلاین - بخش اول
۲۰۰ امتیاز
تمرین
فاز دوم فروشگاه آنلاین - بخش دوم
۲۰۰ امتیاز
تمرین
فاز دوم فروشگاه آنلاین - بخش سوم
۲۰۰ امتیاز
تمرین
فاز دوم فروشگاه آنلاین - بخش چهارم
۲۰۰ امتیاز
تمرین
اسنپ فود
۲۰۰ امتیاز
تمرین
پروژه فیفا بخش I
درسنامه
پروژه فیفا بخش II
درسنامه
پروژه فیفا بخش III
درسنامه
پروژه فیفا بخش IV
درسنامه
آموزش فرانتاند (Front-End)
۶۰+ تمرین عملی
۱۳۰+ درسنامه آموزشی
سوالات متداول
شما در هر زمانی که بخواهید میتوانید در دوره ثبتنام و دوره را آغاز کنید.
پیشنیاز این دوره، تسلط به مباحث مبانی برنامهنویسی است.
اگر هنوز به این مباحث مسلط نیستید، پیشنهاد میکنیم پیش از شروع این دوره، دورهٔ «مبانی برنامهنویسی و تفکر الگوریتمی» را در حداقل یک زبان ++C یا Python بگذرانید.
خیر؛ نیازی نیست!
اگر پیشنیاز دوره (تسلط به مبانی برنامهنویسی) را داشته باشید، میتوانید در این دوره شرکت کنید.
بله؛ شما میتوانید از درسنامههایی که از قبل آشنایی سریع بگذرید، اما در نکات گفته شده در درسنامهها موارد بسیاری وجود دارد که میتواند دانش شما را تکمیل کند؛ پس پیشنهاد میکنیم که آنها را هم مطالعه کنید.
همچنین حتما میدانید که هرچقدر در برنامهنویسی تمرین کنیم، باز هم کافی نیست؛ پس پیشنهاد میکنیم که تمرینات مربوط به این مباحث را نیز حل کنید تا یادگیری کاملی داشته باشید.
محتوای دوره به صورت درسنامههای متنی و در بعضی قسمتها ویدیوهای آموزشی میباشد.
پس از درسنامهها، نوبت به تمرین و حل مسئله میرسد. تعدادی تمرین مطرح میشود که شما دستورات آنها را نوشته و ارسال میکنید. سامانه داوری خودکار Quera در مدت کوتاهی کد شما را تصحیح میکند و نمره میدهد.
در صورتی که نمرهٔ کامل نگرفتید نگران نباشید، میتوانید کد خود را تغییر دهید و دوباره ارسال کنید.
در طول این دوره تمرینهای متعددی وجود دارد تا شما با انجام آنها، مهارت خود را تقویت کنید.
در کنار این تمرینها، داوری آنلاین نیز وجود دارد. یعنی کد ارسالی شما در همان لحظه توسط سیستم، داوری و امتیازدهی میشود تا اشکالاتتان را پیدا کرده و آنها را رفع کنید.
شما میتوانید در هر کجای دوره که به مشکل خوردید، از طریق بخش پرسش و پاسخ («سوال خصوصی») آن را با مربیهای دوره در میان بگذارید و مربیها در اسرع وقت به شما کمک خواهند کرد.
شما بعد از رسیدن به فصل «CSS»، به مدت ۹۰ روز فرصت دارید تا دوره را به اتمام برسانید و بعد از اتمام دوره برای همیشه به تمام محتواهای دوره دسترسی خواهید داشت.
همچنین اگر تا انتهای زمانِ گفتهشده نتوانستید دوره را تمام کنید نگران نباشید، چون امکان تمدید دوره وجود دارد!
در انتهای دوره، با کسب تجربهی عملی بر روی پروژههای واقعی و حل تمرینها به کمک مربیها، به بسیاری از ملزومات ورود به بازار کار بهعنوان توسعهدهندهی فرانتاند مسلط خواهید بود.
شاید برای شما هم سوال باشد که برنامه نویسی فرانت اند چیست؟ اگر شما هم از جمله افرادی هستید که بارها عبارات فرانت اند و بک اند را شنیدهاید ولی معنی و مفهوم آنها را نمیدانستید این محتوا میتواند برای شما مفید باشد. اغلب برنامه نویسانی که در حوزهی وب کار میکنند، این سوال را از یکدیگر میپرسند: برنامه نویس بک اند هستی یا برنامه نویس فرانت اند؟
برای اینکه بدانید برنامه نویسی فرانت اند چیست و برنامه نویس Front End کیست، ابتدا باید بدانید که Front end چیست؟ ما در این مقاله، برنامه نویسی فرانت اند، موارد مورد نیاز برای یادگیری آن و تفاوتهای برنامه نویس فرانت اند با سایر حوزهها را توضیح میدهیم.
فرانت اند یا Front End، به بخش قابل مشاهدهی یک وب سایت یا نرم افزار توسط کاربران میگویند. فرانت اند، کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آنها نمایش میدهد تا بتوانند به راحتی از بخشهای مختلف سایت استفاده کنند. در این بخش، فرمهای ورودی اطلاعات، صداها، تصاویر، ویدئوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، قرار میگیرد.
فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم میشود. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و… ظاهر سایت را طراحی میکنند. اما بخش توسعهی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSS و جاوا اسکریپت است. بخش قابل مشاهده سایت برای کاربران در سمت فرانت را سمت کاربر یا Client Side مینامند. بنابراین کدهای نوشته شده در سمت فرانت اند، در مرورگر کاربر پردازش و اجرا میشوند. یعنی کاربر به راحتی به این کدها دسترسی مستقیم دارد و میتواند آنها را مشاهده کند. فرانت اند با بخش بک اند (Backend) در ارتباط مستقیم است و بر روی تجربه کاربران هنگام استفاده از محصول تاثیر بسیاری میگذارد.
امروزه به دلیل استفاده کاربران از دستگاههای مختلف، طراحی سایت کمی پیچیدهتر شده و بنابراین طراح مجبور است تا تمام این موارد و فاکتورها را در طراحی سایت در نظر بگیرد. آنها باید مطمئن شوند که سایت در مرورگرهای مختلف، سیستمعاملهای مختلف و دستگاههای مختلف به درستی نمایش داده میشود و این امر نیاز به برنامهریزی دقیق از سوی توسعهدهنده فرانتاند دارد.
به طور معمول، مسئولیتهای یک توسعه دهنده فرانتاند عبارتاند از:
اکثر توسعه دهندگان Front end بخش زیادی از زمان خود را صرف کار با زبانهای برنامه نویسی HTML، CSS و جاوا اسکریپت میکنند و باید در هر کدام از این زبانها مهارت کافی داشته باشند تا بتوانند به اهداف خود دست پیدا کنند.
توسعه دهندگان فرانتاند از HTML برای چیدمان ساختار و محتوای کلی وبسایت، از CSS برای قالببندی و از جاوا اسکریپت برای پیادهسازی ویژگیهای پیچیده استفاده میکنند. علاوه بر این، آنها ممکن است از AJAX (ترکیبی از جاوا اسکریپت و XML) برای به روز رسانی بخشهای خاصی از وبسایت استفاده کنند.
برنامه نویسان فرانتاند ممکن است از پایتون، روبی یا پی اچ پی نیز استفاده کنند تا بتوانند به راحتی میان دادهها با بکاند وبسایت ارتباط برقرار کنند.
CSS یک زبان برنامه نویسی وب است که به برنامه نویسان کمک میکند تا قالب بندی وبسایت و همچنین ظاهر آن را به شکلی کاربرپسند طراحی کنند. از این زبان برنامه نویسی، همچنین برای توصیف سندهای نوشته شده در HTML یا XML استفاده میشود. CSS است که تعیین میکند در طراحی وبسایت چگونه عناصر باید در کنار یکدیگر قرار بگیرند و کاربر در کدام قالببندی میتواند تجربه بهتری داشته باشد.
با استفاده از CSS، میتوانید رنگ متن، سبک فونتها، فاصله بین پاراگرافها، نحوه اندازهگذاری و چیدمان ستونها، تصاویر پسزمینه، رنگ پس زمینه صفحات وبسایت، چیدمان صفحات، نمایش وبسایت برای دستگاههای مختلف و اندازه صفحات را انتخاب کنید.
یادگیری CSS دشوار نیست، اما از آنجایی که زبانی سرشار از جزئیات است، یادگیری آن میتواند کمی گیج کننده باشد. یادگیری اصول اولیه CSS به هیچ وجه زمانبر نیست. اما با این حال، اگر میخواهید به CSS مسلط شوید، باید برای آن زمان بگذارید.
HTML به عنوان هسته اصلی هر صفحه از وبسایت به شمار میآید. برای طراحان وبسایت دانستن زبان برنامه نویسی HTML یک ضرورت به شمار میآید. در واقع هر شخصی که میخواهد کدنویسی برای طراحی وبسایت را آغاز کند، باید از یادگیری HTML کار را شروع کند و خوشبختانه، یادگیری آن به شدت آسان است.
زبان HTML یک زبان برنامه نویسی نشانهگذاری است و زبانهای نشانهگذاری کاربردی شبیه به تگهای محتوای وبسایت را دارند. با این تفاوت که از HTML به عنوان زبانی برای نشانهگذاری عناصر مختلف یک وبسایت استفاده میشود. برای مثال، از HTML برای تعریف تگهای هدر، تگ پاراگراف، تگ تصویر و غیره استفاده میشود. هر صفحه از وبسایت مجموعهای از این تگهای HTML دارد که محتوای کلی صفحه را نشان میدهند.
با استفاده از HTML، میتوانید به صفحات عنوان اضافه کنید، پاراگرافها را قالببندی کنید، فاصله میان خطوط را تنظیم کنید، فهرست بسازید، قسمتهایی از متن را هایلایت کنید، کاراکترهای خاص در صفحه به وجود آورید، تصاویر به صفحه اضافه کنید، جدول بسازید و خیلی چیزهای دیگر.
جاوا اسکریپت نسبت به HTML یا CSS زبان پیچیدهتری است. امروزه جاوا اسکریپت در تمام مرورگرها پشتیبانی میشود و تقریبا در هر سایتی برای قویتر شدن و بهبود عملکرد استفاده میشود.
جاوا اسکریپت یک زبان برنامه نویسی مبتنی بر منطق است که میتواند برای اصلاح محتوای وبسایت و بهبود تجربه کاربردی مورد استفاده قرار بگیرد. جاوا اسکریپت در مواردی مانند دکمه کال تو اکشن، گرافیک وبسایت و اضافه کردن انیمیشن به وبسایت استفاده دارد. همچنین برای ساخت اپلیکیشنهای تلفن همراه و ایجاد برنامههای سمت سرور نیز میتوان از جاوا اسکریپت استفاده کرد.
سختترین بخش برنامه نویسی یادگیری آن است و این در مورد جاوا اسکریپت نیز صدق میکند. اما هنگامی که اصول اولیه را یاد گرفتید، به راحتی میتوانید در این زبان حرفهای شوید و از آن در فرانت اند استفاده کنید.
حال که متوجه شدید که برنامه نویسی فرانت اند چیست، در این بخش میخواهیم مهارتهایی را بررسی کنیم که برای توسعهی بخش فرانت اند نیاز است. فرانت اند یکی از مهمترین جنبههای یک کسب و کار است، زیرا اولین درگاهی است که کارفرما میتواند با مشتری خود ارتباط برقرار کند و اگر ظاهر مناسبی برای این درگاه نداشته باشد، فرصت خود را از دست خواهد داد. پس کسانی که قصد دارند طراح و توسعه دهنده فرانتاند شوند باید ویژگیها و مهارتهای مختلفی را داشته باشند. در ادامه به برخی از مهمترین مهارتهای یک برنامه نویس فرانت اند اشاره میکنیم.
اگر میخواهید به یک توسعه دهنده Front-End تبدیل شوید، در مرحله اول باید بتوانید به صورت حرفهای با HTML ، CSS و JavaScript کدنویسی کنید. کدنویسی فرانت اند، نسبت به سایر حوزههای برنامه نویسی آسانتر است و منابع زیادی در اینترنت وجود دارند تا روند یادگیری را سریعتر کنند. علاوه بر آن، برای هر مشکلی که به آن برخورد میکنید، یک راه حل در انجمنهای پرسش و پاسخ پیدا میشود.
به دلیل استانداردهای زبان برنامه نویسی جاوا اسکریپت، میتوان با آن پیاده سازیهای متنوعی را انجام داد. به همین دلیل هرازگاهی یک فریمورک جدید و سفارشی به مجموعه فریمورکهای جاوا اسکریپت اضافه میشود. فریمورکهای جاوا اسکریپت امکانات بسیار زیاد و پیشرفتهای را در اختیار طراحان فرانت اند قرار میدهند. از جمله این فریمورکها میتوان به Vu.js، Angular و… اشاره کرد.
یک رابط کاربری استاندارد باید به گونهای باشد که در دستگاهها و پلتفرمهای مختلف، عملکرد اپلیکیشن را دچار اختلال نکند. پس باید بتواند متناسب با نوع دستگاهی که در حال اجرای آن است، واکنش مناسب نشان دهد. اگر رابط کاربری به درستی طراحی نشود، ارزش سایت یا برنامه را از بین میبرد و کاربر با محصول شما کار نمیکند.
تصور کنید میخواهید یک صفحهی وب را پیاده سازی کنید که پیچیدگی المانهای آن بالا است. در این حالت بهتر است که قبل از شروع کدنویسی طرح آن را با فتوشاپ ترسیم کرده و بعد از موافقت اعضای تیم آن را پیاده سازی کنید. نرم افزارهای گرافیکی مانند Adobe xd، Figma و… در بیشتر مراحل طراحی یک رابط کاربری توسط طراحان فرانت مورد استفاده قرار میگیرند. پس یادگیری حداقل یکی از آنها برای برنامه نویس فرانت اند الزامی است.
طراح فرانت اند باید از طرح هایی خلاقانه، کاربرپسند و چشم نواز برای ظاهر یک اپلیکیشن استفاده کند. یک طراح موفق کسی است که بتواند رابط کاربری زیبا منطق بر استانداردهای ظاهری و تجربه کاربری ایجاد کند. ایجاد همین تفاوتهای ظاهری و طرحهای جذاب است که کار شما را از سایر رقبا جدا میکند.
یکی از راههای تقویت نوآوری و خلاقیت دیدن کارهای مشابه در سایت dribble و یا چند نمونه قالب وردپرس است که در بسیاری از موارد با استانداردهای بالایی طراحی شده و مورد توجه کاربران قرار گرفته است. از کنار هم قرار دادن بهترین نمونهها میتوانید نقاط قوت هر کدام را درک کرده و ایدههای جالبی ارائه کنید.
توسعه دهندهی فرانت اند باید به خوبی نیازهای کاربران را بشناسد. او باید بتواند رابط کاربری یک اپلیکیشن را به گونهای طراحی کند که کاربران بهترین تجربه را حین استفاده از آن به دست آورند. در حقیقت، کلید موفقیت یک برنامه نویس فرانت اند، این است که در مرحلهی اول کاربر و نیازهایش را بشناسد و در مرحلهی بعد بتواند براساس آن نیاز، یک صفحه را طراحی و پیاده سازی کند.
از آنجایی که برنامه نویسان فرانتاند از مهمترین افراد در توسعه وبسایت و برنامه هستند، بنابراین باید لیستی از مهارتها را داشته باشند تا بتوانند در این حوزه به خوبی عمل کنند. مهارتهای یک توسعهدهنده فرانتاند شامل موارد زیر میشود:
به طور کلی، آینده برای هر کسی که میخواهد به یک توسعهدهنده فرانتاند تبدیل شود، روشن به نظر میرسد. آخرین مطالعات پیش بینی میکنند که در بسیاری از کشورهای جهان بسیاری از شرکتها به برنامه نویسان فرانتاند نیاز خواهند داشت و در حال حاضر نیز بازار کار در این حوزه دچار کمبود نیروی انسانی است.
طبق آمارهای اداره آمار کار آمریکا، پیشبینی میشود که استخدام توسعهدهندگان وب از سال ۲۰۱۶ تا ۲۰۲۶ میزان ۱۵ درصد رشد داشته باشد. این نرخ بسیار سریعتر از میانگین همه مشاغل دیگر است.
اگرچه این اعداد باورنکردنی به نظر میرسند، اما اگر به تاریخ و زمان آن دقت کنید، چندان تعجب آور نیست. افزایش استفاده از اینترنت، به ویژه در زمینه موبایل، به معنای نیاز بیشتر به رابط کاربری است که به نوبه خود حرفه برنامه نویسی فرانتاند را پرتقاضا میکند. توسعه وب زمینهای است که میزان رشد و فرصتهای شغلی آن با محبوبیت اینترنت مرتبط است و البته در حال حاضر میزان استفاده از اینترنت روز به روز در حال افزایش است.
درآمد یک توسعه دهنده Front-End در جهان بین 65 هزار دلار تا 110 هزار دلار است و در کشور ما از سه میلیون تومان شروع میشود و بسته به عنوان شغل تا بالای ده میلیون تومان نیز میرسد. عناوین زیادی برای افرادی که در حوزهی فرانت اند کار میکنند، وجود دارد. این مشاغل بسته به وظیفهای که دارند، در میزان حقوق دریافتی هم تفاوت دارند. برخی از مشاغل مهم فرانت اند عبارتند از:
توجه: اگر اصطلاحات "Full Stack" یا اصطلاحات عمومی "Web Developer" در عناوین شغلی را پیدا کردید، ممکن است این کلمات توسط یک کارفرما برای توصیف نقشی بهکار رود که مسئولیت کلیه جنبههای توسعهی وب / برنامهها را در بر میگیرد، یعنی هر دو بخش Backend و Front-End. پس سعی کنید که قبل از شروع کار، مسئولیتها و وظایفی که به آن متعهد میشوید را با کارفرمای خود مشخص کنید.
اغلب سایتها به یک برنامه نویس Backend نیاز دارند تا منطق سایت را به وسیله زبانهای برنامه نویسی پیادهسازی کنند. بک اند یا Back-end به بخشی از یک وب سایت یا نرم افزار میگویند که برای کاربران قابل مشاهده نیست. به عبارتی دیگر هسته و مغز یک سایت است که وظیفهی کنترل منطق آن را بر عهده دارد. کاربران به کدهای نوشتهشده در بخش بک اند دسترسی ندارند و نمیتوانند آنها را مشاهده کنند. بخش بک اند با سرور اصلی (که سایت روی آن قرار گرفته است) و پایگاه داده سروکار دارد.
هنگامی که کاربر روی یک دکمه کلیک میکند، در اصل روی یکی از المانهای بخش فرانت اند کلیک کرده است. فرانت اند این کلیک را شناسایی کرده و براساس کدی که برنامه نویس فرانت اند نوشته است، درخواست خود را به بخش بک اند ارجاع میدهد. با استفاده از منطقی که برنامه نویس بک اند کد آن را پیاده سازی کرده است، آن درخواست اجرا میشود. در این بخش است که ممکن است اطلاعاتی از پایگاه داده گرفته شود یا پردازشی در کدهای بک اند انجام شود و نیازی به برقراری ارتباط با پایگاه داده نباشد. در نهایت جواب نهایی دوباره توسط بخش بک اند به فرانت اند فرستاده میشود و فرانت اند آن را به کاربر در قالب المانهای گرافیکی مثل پیام متنی، تصویر و… نشان میدهد.
همانطور که در بخشهای قبل گفتیم، فرانت اند از دو بخش طراحی و توسعهی رابط کاربری تشکیل شده است. به بخش طراحی تجربهی کاربری (User Experience) یا به اصطلاح UX گفته میشود. UX مشخص میکند که تعامل کاربر با یک نرم افزار یا یک وب سایت چگونه باید باشد. بخش توسعهی رابط کاربری (User Interface) هم UI نامیده میشود. UI بر این نکته تمرکز دارد که این ارتباط یا همان رابط کاربری، چگونه به نمایش گذاشته میشود.
پس طراحان UX مشخص میکنند که طراحی صفحات شامل چه المانهایی باشد (مثلا صفحهی مورد نظر نیاز به دکمه دارد یا خیر) در حالی که تیم UI روی ظاهر و پیاده سازی این المانها کار میکند. این دو در کنار هم، بخش فرانت اند را تشکیل میدهند. در بسیاری از مشاغل به خصوص در داخل کشور، هنگامی که به عنوان یک برنامه نویس فرانت اند استخدام میشوید، کارفرما از شما انتظار دارد که مهارت بالایی در پیاده سازی رابط کاربری داشته و در کنار آن، بعد از نیازسنجی سیستم با سایر اعضای شرکت، بتوانید طراحی مناسبی را پیشنهاد دهید. اما اگر به عنوان یک طراح رابط کاربری مشغول به کار شدید، درمورد طراحی المانها تعهدی ندارید. هرچند که همیشه کمی آشنایی با UX، کار شما را به عنوان برنامه نویس سرعت میبخشد و از اضافه کاری جلوگیری میکند.