آموزش برنامه نویسی فرانت اند (Front-End)

۴۲۷۰+

کدآموز

۹۰+

تمرین عملی

۱۷۰+

درسنامه آموزشی

feature

به همراه گواهی معتبر

۹۰ روز مهلت گذراندن دوره

آموزش فرانت‌اند (Front-End)

صفر تا صد مفاهیم HTML | CSS | Tailwind | JavaScript | Ajax | Sass

۲,۱۶۹,۰۰۰۱,۵۱۸,۳۰۰ تومان
quotationامکان پرداخت قسطیquotation

رشد ۱۳٪

تعداد برنامه‌نویسان فرانت‌اند از سال ۲۰۲۰ تا سال ۲۰۳۰

رتبه یکم

پر‌استفاده‌ترین زبان برنامه‌نویسی در سال ۲۰۲۲

۲۶.۵٪ رشد

درآمد سالانه برنامه‌نویسان فرانت‌اند از سال ۲۰۲۱ به ۲۰۲۲

بهترین نقطه آغاز

برای ورود به حوزه‌ٔ توسعه فرانت‌اند وب

چرا کوئرا کالج؟

معرفی

حامیان

مخاطبین

پیش‌نیازها

سرفصل‌ها

پروژه‌ها

اساتید

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 ادامه می‌یابد.

    با مثال‌های عملی از شرکت‌

      لوگوی اسنپ‌فود
    • section item

      این دوره مناسب شما است اگر...

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

      برای پروژه‌های شخصی یا کاری خود نیاز به یادگیری CSS ،HTML و JavaScript دارید.

      می‌خواهید CSS ،HTML و JavaScript را به صورت عملی و برای همیشه به شکل اصولی بیاموزید.

      بازار کار و حقوق بالای برنامه‌نویسان در داخل و خارج ایران برایتان جذاب است.

    • section item

      این دوره مناسب شما نیست اگر...

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

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

      حاضر نیستید در هفته ۶ ساعت برای یادگیری، پیشرفت و رشد درآمدتان زمان بگذارید.

      می‌خواهید CSS ،HTML و JavaScript را به طور سطحی و گذرا بیاموزید.

    • پبش‌نیازها

    • لازم است...

      section item

      علاقه و پشتکار داشته باشید.

      section item

      مبانی برنامه‌نویسی را بشناسید.

    • لازم نیست...

      section item

      در رشته‌ی کامپیوتر تحصیل کرده باشید.

      section item

      دانش ریاضی قوی داشته باشید.

    سرفصل‌های دوره

    ۱۷۴

    درسنامه

    ۱۷

    ویدئو

    ۹۳

    تمرین

















    certificatethumb

    آنچه خواهید ساخت

    banner

    QCV

    ساخت رزومه‌ساز کوئرا

    banner

    فروشگاه آنلاین

    نمایش محصولات یک فروشگاه به همراه امکانات جانبی

    banner

    فیفا

    پیاده‌سازی صفحه‌ی لیست بازیکنان فیفا ۲۰۲۱

    اساتید و مربیان دوره

    سید سجاد معصومی's avatar
    سید سجاد معصومی
    طراح
    حمیدرضا ناظمی شادباش's avatar
    حمیدرضا ناظمی شادباش
    طراح
    امیررضا صافحیان's avatar
    امیررضا صافحیان
    طراح
    مهدی سیدان's avatar
    مهدی سیدان
    طراح
    علی شفیعی's avatar
    علی شفیعی
    طراح
    حسین افسرپور's avatar
    حسین افسرپور
    به‌روزرسان
    مربی
    سید محمد سروش سجادی's avatar
    سید محمد سروش سجادی
    به‌روزرسان
    فاطمه آقابابایی's avatar
    فاطمه آقابابایی
    به‌روزرسان
    محمد هادی جلالیان's avatar
    محمد هادی جلالیان
    مربی
    college

    آموزش فرانت‌اند (Front-End)


    feature

    ۹۰+ تمرین عملی

    feature

    ۱۷۰+ درسنامه آموزشی

    ۹۰ روز مهلت ارسال تمرین
    گواهی معتبر

    نظرات کدآموزهای کوئرایی

    عرفانه صحرائی | ۲ اردیبهشت ۱۴۰۱

    عرفانه صحرائی | ۲ اردیبهشت ۱۴۰۱

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

    سیاوش خانی | ۱۸ بهمن ۱۴۰۰

    سیاوش خانی | ۱۸ بهمن ۱۴۰۰

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

    شایان محمد پاسخی رضوی | ۲۰ دی ۱۳۹۹

    شایان محمد پاسخی رضوی | ۲۰ دی ۱۳۹۹

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

    علی زاهدزاده | ۱۲ آذر ۱۳۹۹

    علی زاهدزاده | ۱۲ آذر ۱۳۹۹

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

    فرشاد دانایی‌فرد | ۲۶ آبان ۱۳۹۹

    فرشاد دانایی‌فرد | ۲۶ آبان ۱۳۹۹

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

    ۲٬۱۶۹٬۰۰۰

    ۱٬۵۱۸٬۳۰۰ تومان

    quotation

    امکان پرداخت قسطی

    quotation


    مدت زمان گذراندن دوره: ۹۰ روز

    دسترسی به محتوای دوره همیشگی است.

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

    سوالات متداول












    آموزش برنامه نویسی فرانت اند (Front-End) کوئرا کالج

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

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

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

    یادگیری زبان‌های برنامه نویسی HTML ،CSS و جاوا اسکریپت

    اگر می‌خواهید به یک توسعه دهنده Front-End تبدیل شوید، در مرحله اول باید بتوانید به صورت حرفه‌ای با HTML ، CSS و JavaScript کدنویسی کنید. کدنویسی فرانت اند، نسبت به سایر حوزه‌های برنامه نویسی آسان‌تر است و منابع زیادی در اینترنت وجود دارند تا روند یادگیری را سریع‌تر کنند. علاوه بر آن، برای هر مشکلی که به آن برخورد می‌کنید، یک راه حل در انجمن‌های پرسش و پاسخ پیدا می‌شود.

    آشنایی با کتابخانه‌ها و فریمورک‌های فرانت اند Javascript

    به دلیل استانداردهای زبان برنامه نویسی جاوا اسکریپت، می‌توان با آن پیاده سازی‌های متنوعی را انجام داد. به همین دلیل هرازگاهی یک فریمورک‌ جدید و سفارشی به مجموعه فریمورک‌های جاوا اسکریپت اضافه می‌شود. فریمورک‌های جاوا اسکریپت امکانات بسیار زیاد و پیشرفته‌ای را در اختیار طراحان فرانت اند قرار می‌دهند. از جمله این فریمورک‌ها می‌توان به Vu.js، Angular و… اشاره کرد.

    آشنایی با اصول طراحی واکنش‌گرا

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

    یادگیری نرم افزارهای گرافیکی مانند فتوشاپ

    تصور کنید می‌خواهید یک صفحه‌ی وب را پیاده سازی کنید که پیچیدگی المان‌های آن بالا است. در این حالت بهتر است که قبل از شروع کدنویسی طرح آن را با فتوشاپ ترسیم کرده و بعد از موافقت اعضای تیم آن را پیاده سازی کنید. نرم افزارهای گرافیکی مانند Adobe xd، Figma و… در بیشتر مراحل طراحی یک رابط کاربری توسط طراحان فرانت مورد استفاده قرار می‌گیرند. پس یادگیری حداقل یکی از آن‌ها برای برنامه نویس فرانت اند الزامی است.

    داشتن سلیقه و خلاقیت

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

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

    آشنایی با اصول تجربه کاربری

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

    مهارت‌های مورد نیاز برای برنامه نویس فرانت اند شدن

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

    • در زبان‌های برنامه نویسی مانند HTML، CSS، جاوا اسکریپت و جی کوئری مهارت داشته باشد
    • CSS سمت سرور را درک کند
    • در برنامه‌های طراحی گرافیک (مانند Adobe Illustrator) تجربه کار داشته باشد
    • اصول سئو را بشناسد
    • در حل مسئله مهارت داشته باشد
    • در برقراری ارتباط با اعضای تیم، مدیران و مشتریان مهارت داشته باشید
    • مدیریت زمان بداند

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

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

    طبق آمارهای اداره آمار کار آمریکا، پیش‌بینی می‌شود که استخدام توسعه‌دهندگان وب از سال ۲۰۱۶ تا ۲۰۲۶ میزان ۱۵ درصد رشد داشته باشد. این نرخ بسیار سریع‌تر از میانگین همه مشاغل دیگر است.

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

    درآمد و حقوق برنامه نویس فرانت اند چقدر است؟

    درآمد یک توسعه دهنده Front-End در جهان بین 65 هزار دلار تا 110 هزار دلار است و در کشور ما از سه میلیون تومان شروع می‌شود و بسته به عنوان شغل تا بالای ده میلیون تومان نیز می‌رسد. عناوین زیادی برای افرادی که در حوزه‌ی فرانت اند کار می‌کنند، وجود دارد. این مشاغل بسته به وظیفه‌ای که دارند، در میزان حقوق دریافتی هم تفاوت دارند. برخی از مشاغل مهم فرانت اند عبارتند از:

    • Front-End Developer
    • Front-End Engineer (با نام مستعار JavaScript Developer یا Full Stack JavaScript Developer)
    • CSS / HTML Developer
    • Front-End Designer Web
    • توسعه دهنده / مهندس UI (User Interface)
    • Mobile / Tablet Front-End Developer
    • Front-End Expert SEO
    • Front-End DevOps
    • Test-End Testing / Q

    توجه: اگر اصطلاحات "Full Stack" یا اصطلاحات عمومی "Web Developer" در عناوین شغلی را پیدا کردید، ممکن است این کلمات توسط یک کارفرما برای توصیف نقشی به‌کار رود که مسئولیت کلیه جنبه‌های توسعه‌ی وب / برنامه‌ها را در بر می‌گیرد، یعنی هر دو بخش Backend و Front-End. پس سعی کنید که قبل از شروع کار، مسئولیت‌ها و وظایفی که به آن متعهد می‌شوید را با کارفرمای خود مشخص کنید.

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

    اغلب سایت‌ها به یک برنامه نویس Backend نیاز دارند تا منطق سایت را به وسیله زبان‌های برنامه نویسی پیاده‌سازی کنند. بک اند یا Back-end به بخشی از یک وب سایت یا نرم افزار می‌گویند که برای کاربران قابل مشاهده نیست. به عبارتی دیگر هسته و مغز یک سایت است که وظیفه‌ی کنترل منطق آن را بر عهده دارد. کاربران به کدهای نوشته‌شده در بخش بک اند دسترسی ندارند و نمی‌توانند آن‌ها را مشاهده کنند. بخش بک اند با سرور اصلی (که سایت روی آن قرار گرفته است) و پایگاه داده سروکار دارد.

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

    تفاوت برنامه نویس فرانت اند و طراح رابط کاربری (Ui) چیست؟

    همانطور که در بخش‌های قبل گفتیم، فرانت اند از دو بخش طراحی و توسعه‌ی رابط کاربری تشکیل شده است. به بخش طراحی تجربه‌ی کاربری (User Experience) یا به اصطلاح UX گفته می‌شود. UX مشخص می‌کند که تعامل کاربر با یک نرم افزار یا یک وب سایت چگونه باید باشد. بخش توسعه‌ی رابط کاربری (User Interface) هم UI نامیده می‌شود. UI بر این نکته تمرکز دارد که این ارتباط یا همان رابط کاربری، چگونه به نمایش گذاشته می‌شود.

    پس طراحان UX مشخص می‌کنند که طراحی صفحات شامل چه المان‌هایی باشد (مثلا صفحه‌ی مورد نظر نیاز به دکمه دارد یا خیر) در حالی که تیم UI روی ظاهر و پیاده سازی این المان‌ها کار می‌کند. این دو در کنار هم، بخش فرانت اند را تشکیل می‌دهند. در بسیاری از مشاغل به خصوص در داخل کشور، هنگامی که به عنوان یک برنامه نویس فرانت اند استخدام می‌شوید، کارفرما از شما انتظار دارد که مهارت بالایی در پیاده سازی رابط کاربری داشته و در کنار آن، بعد از نیازسنجی سیستم با سایر اعضای شرکت، بتوانید طراحی مناسبی را پیشنهاد دهید. اما اگر به عنوان یک طراح رابط کاربری مشغول به کار شدید، درمورد طراحی المان‌ها تعهدی ندارید. هرچند که همیشه کمی آشنایی با UX، کار شما را به عنوان برنامه نویس سرعت می‌بخشد و از اضافه کاری جلوگیری می‌کند.